Fix Blazor Server Reconnection Mechanism (#36126)

* Fix Blazor Server Reconnection Mechanism

* Fix documentation

* Update yarn.lock

* Update release.js

Author: TanayParikh

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -29,23 +29,8 @@ async function boot(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
   const jsInitializer = await fetchAndInvokeInitializers(options);
 
   const logger = new ConsoleLogger(options.logLevel);
-  Blazor.defaultReconnectionHandler = new DefaultReconnectionHandler(logger);
-
-  options.reconnectionHandler = options.reconnectionHandler || Blazor.defaultReconnectionHandler;
-  logger.log(LogLevel.Information, 'Starting up Blazor server-side application.');
-
-  const components = discoverComponents(document, 'server') as ServerComponentDescriptor[];
-  const appState = discoverPersistedState(document);
-  const circuit = new CircuitDescriptor(components, appState || '');
 
-  const initialConnection = await initializeConnection(options, logger, circuit);
-  const circuitStarted = await circuit.startCircuit(initialConnection);
-  if (!circuitStarted) {
-    logger.log(LogLevel.Error, 'Failed to start the circuit.');
-    return;
-  }
-
-  const reconnect = async (existingConnection?: HubConnection): Promise<boolean> => {
+  Blazor.reconnect = async (existingConnection?: HubConnection): Promise<boolean> => {
     if (renderingFailed) {
       // We can't reconnect after a failure, so exit early.
       return false;
@@ -61,6 +46,21 @@ async function boot(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
 
     return true;
   };
+  Blazor.defaultReconnectionHandler = new DefaultReconnectionHandler(logger);
+
+  options.reconnectionHandler = options.reconnectionHandler || Blazor.defaultReconnectionHandler;
+  logger.log(LogLevel.Information, 'Starting up Blazor server-side application.');
+
+  const components = discoverComponents(document, 'server') as ServerComponentDescriptor[];
+  const appState = discoverPersistedState(document);
+  const circuit = new CircuitDescriptor(components, appState || '');
+
+  const initialConnection = await initializeConnection(options, logger, circuit);
+  const circuitStarted = await circuit.startCircuit(initialConnection);
+  if (!circuitStarted) {
+    logger.log(LogLevel.Error, 'Failed to start the circuit.');
+    return;
+  }
 
   let disconnectSent = false;
   const cleanup = () => {
@@ -76,8 +76,6 @@ async function boot(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
 
   window.addEventListener('unload', cleanup, { capture: false, once: true });
 
-  Blazor.reconnect = reconnect;
-
   logger.log(LogLevel.Information, 'Blazor server-side application started.');
 
   jsInitializer.invokeAfterStartedCallbacks(Blazor);
@@ -138,10 +136,15 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
 
   try {
     await connection.start();
-  } catch (ex) {
+  } catch (ex: any) {
     unhandledError(connection, ex as Error, logger);
 
-    if (!isNestedError(ex)) {
+    if (ex.errorType === 'FailedToNegotiateWithServerError') {
+      // Connection with the server has been interrupted, and we're in the process of reconnecting.
+      // Throw this exception so it can be handled at the reconnection layer, and don't show the
+      // error notification.
+      throw ex;
+    } else if (!isNestedError(ex)) {
       showErrorNotification();
     } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
       showErrorNotification('Unable to connect, please ensure you are using an updated browser that supports WebSockets.');

src/Components/Web.JS/src/Boot.Server.ts

@@ -53,11 +53,11 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
         // - true to mean success
         // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
         // - exception to mean we didn't reach the server (this can be sync or async)
-        const successful = await (Blazor?.reconnect as any)();
+        const successful = await Blazor.reconnect!();
         if (!successful) {
           this.rejected();
         }
-      } catch (err) {
+      } catch (err: any) {
         // We got an exception, server is currently unavailable
         this.logger.log(LogLevel.Error, err as Error);
         this.failed();

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

@@ -14,7 +14,7 @@ export class DefaultReconnectionHandler implements ReconnectionHandler {
   constructor(logger: Logger, overrideDisplay?: ReconnectDisplay, reconnectCallback?: () => Promise<boolean>) {
     this._logger = logger;
     this._reconnectionDisplay = overrideDisplay;
-    this._reconnectCallback = reconnectCallback || (() => (Blazor.reconnect as any)());
+    this._reconnectCallback = reconnectCallback || Blazor.reconnect!;
   }
 
   onConnectionDown (options: ReconnectionOptions, error?: Error) {
@@ -80,7 +80,7 @@ class ReconnectionProcess {
           return;
         }
         return;
-      } catch (err) {
+      } catch (err: any) {
         // We got an exception so will try again momentarily
         this.logger.log(LogLevel.Error, err as Error);
       }

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectionHandler.ts

@@ -4547,7 +4547,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-url-parse@^1.4.3, url-parse@^1.5.0:
+url-parse@>=1.5.0, url-parse@^1.4.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
   integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==

src/Components/Web.JS/yarn.lock

@@ -158,6 +158,31 @@ export class FailedToStartTransportError extends Error {
     }
 }
 
+/** Error thrown when the negotiation with the server failed to complete. */
+/** @private */
+export class FailedToNegotiateWithServerError extends Error {
+    // @ts-ignore: Intentionally unused.
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    private __proto__: Error;
+
+    /** The type name of this error. */
+    public errorType: string;
+
+    /** Constructs a new instance of {@link @microsoft/signalr.FailedToNegotiateWithServerError}.
+     *
+     * @param {string} message A descriptive error message.
+     */
+    constructor(message: string) {
+        const trueProto = new.target.prototype;
+        super(message);
+        this.errorType = 'FailedToNegotiateWithServerError';
+
+        // Workaround issue in Typescript compiler
+        // https://github.com/Microsoft/TypeScript/issues/13965#issuecomment-278570200
+        this.__proto__ = trueProto;
+    }
+}
+
 /** Error thrown when multiple errors have occurred. */
 /** @private */
 export class AggregateErrors extends Error {

src/SignalR/clients/ts/signalr/src/Errors.ts

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { DefaultHttpClient } from "./DefaultHttpClient";
-import { AggregateErrors, DisabledTransportError, FailedToStartTransportError, HttpError, UnsupportedTransportError } from "./Errors";
+import { AggregateErrors, DisabledTransportError, FailedToNegotiateWithServerError, FailedToStartTransportError, HttpError, UnsupportedTransportError } from "./Errors";
 import { HeaderNames } from "./HeaderNames";
 import { HttpClient } from "./HttpClient";
 import { IConnection } from "./IConnection";
@@ -347,7 +347,7 @@ export class HttpConnection implements IConnection {
             }
             this._logger.log(LogLevel.Error, errorMessage);
 
-            return Promise.reject(new Error(errorMessage));
+            return Promise.reject(new FailedToNegotiateWithServerError(errorMessage));
         }
     }