[release/8.0] [Blazor] Close the circuit when all Blazor Server components are disposed (#50170)

# [Blazor] Close the circuit when all Blazor Server components are disposed

Allows a Blazor Server circuit to close when all root Blazor Server components get dynamically removed from the page.

## Description

The overall approach I've taken is:
1. Define what it means for the circuit to be in use (`WebRootComponentManager.hasAnyExistingOrPendingServerComponents()`):
    * There are interactive Blazor Server components on the page, or...
    * The initialization of an interactive Blazor Server component has started, but hasn't completed yet, or...
    * There are SSR'd components on the page that haven't been initialized for interactivity yet (consider stream rendering, where we don't activate new components until the response completes), but they have either a "Server" or "Auto" render mode
2. Determine the cases where a circuit's "in use" status may have changed:
    * After a render batch is applied (see `attachCircuitAfterRenderCallback` in `WebRootComponentManager.ts`)
      * An applied render batch may result in the creation/disposal of a root component
    * After an SSR update occurs, but before the first render batch is applied
      * Consider the case where an SSR'd component with a Server render mode gets removed from the page, but before the circuit has a chance to initialize
3. Decide what to do if the "in use" status may have changed (`WebRootComponentManager.circuitMayHaveNoRootComponents()`):
    * If the circuit is not in use:
      * Start a timeout with some configurable duration (`SsrStartOptions.circuitInactivityTimeoutMs`), if it hasn't started already
      * When the timeout expires, dispose the circuit
    * If the circuit is not in use:
      * Clear any existing timeout

This PR also:
- [X] Addresses a bug preventing Virtualize from working correctly when a WebAssembly and Server instance is present on the page at the same time
- [X] Adds E2E tests

Fixes #48765

Author: MackinnonBuck

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

@@ -1,113 +1,78 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-import { DotNet } from '@microsoft/dotnet-js-interop';
 import { Blazor } from './GlobalExports';
-import { HubConnectionBuilder, HubConnection, HttpTransportType } from '@microsoft/signalr';
-import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack';
-import { showErrorNotification } from './BootErrors';
-import { RenderQueue } from './Platform/Circuits/RenderQueue';
 import { ConsoleLogger } from './Platform/Logging/Loggers';
-import { LogLevel, Logger } from './Platform/Logging/Logger';
-import { CircuitDescriptor } from './Platform/Circuits/CircuitManager';
+import { LogLevel } from './Platform/Logging/Logger';
+import { CircuitManager } from './Platform/Circuits/CircuitManager';
 import { resolveOptions, CircuitStartOptions } from './Platform/Circuits/CircuitStartOptions';
 import { DefaultReconnectionHandler } from './Platform/Circuits/DefaultReconnectionHandler';
-import { attachRootComponentToLogicalElement } from './Rendering/Renderer';
 import { discoverPersistedState, ServerComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
-import { sendJSDataStream } from './Platform/Circuits/CircuitStreamingInterop';
 import { fetchAndInvokeInitializers } from './JSInitializers/JSInitializers.Server';
-import { WebRendererId } from './Rendering/WebRendererId';
 import { RootComponentManager } from './Services/RootComponentManager';
 
-let renderingFailed = false;
-let hasStarted = false;
-let connection: HubConnection;
-let circuit: CircuitDescriptor;
-let dispatcher: DotNet.ICallDispatcher;
-let userOptions: Partial<CircuitStartOptions> | undefined;
+let started = false;
+let appState: string;
+let circuit: CircuitManager;
+let options: CircuitStartOptions;
+let logger: ConsoleLogger;
 
 export function setCircuitOptions(circuitUserOptions?: Partial<CircuitStartOptions>) {
-  if (userOptions) {
+  if (options) {
     throw new Error('Circuit options have already been configured.');
   }
 
-  userOptions = circuitUserOptions;
+  options = resolveOptions(circuitUserOptions);
 }
 
-export async function startCircuit(components: RootComponentManager<ServerComponentDescriptor>): Promise<void> {
-  if (hasStarted) {
+export async function startServer(components: RootComponentManager<ServerComponentDescriptor>): Promise<void> {
+  if (started) {
     throw new Error('Blazor Server has already started.');
   }
 
-  hasStarted = true;
+  started = true;
+  appState = discoverPersistedState(document) || '';
+  logger = new ConsoleLogger(options.logLevel);
+  circuit = new CircuitManager(components, appState, options, logger);
 
-  // Establish options to be used
-  const options = resolveOptions(userOptions);
-  const jsInitializer = await fetchAndInvokeInitializers(options);
-
-  const logger = new ConsoleLogger(options.logLevel);
+  logger.log(LogLevel.Information, 'Starting up Blazor server-side application.');
 
-  Blazor.reconnect = async (existingConnection?: HubConnection): Promise<boolean> => {
-    if (renderingFailed) {
+  Blazor.reconnect = async () => {
+    if (circuit.didRenderingFail()) {
       // We can't reconnect after a failure, so exit early.
       return false;
     }
 
-    const reconnection = existingConnection || await initializeConnection(options, logger, circuit);
-    if (!(await circuit.reconnect(reconnection))) {
+    if (!(await circuit.reconnect())) {
       logger.log(LogLevel.Information, 'Reconnection attempt to the circuit was rejected by the server. This may indicate that the associated state is no longer available on the server.');
       return false;
     }
 
-    options.reconnectionHandler!.onConnectionUp();
-
     return true;
   };
-  Blazor.defaultReconnectionHandler = new DefaultReconnectionHandler(logger);
 
+  Blazor.defaultReconnectionHandler = new DefaultReconnectionHandler(logger);
   options.reconnectionHandler = options.reconnectionHandler || Blazor.defaultReconnectionHandler;
-  logger.log(LogLevel.Information, 'Starting up Blazor server-side application.');
-
-  const appState = discoverPersistedState(document);
-  circuit = new CircuitDescriptor(components, appState || '');
 
   // Configure navigation via SignalR
   Blazor._internal.navigationManager.listenForNavigationEvents((uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
-    return connection.send('OnLocationChanged', uri, state, intercepted);
+    return circuit.sendLocationChanged(uri, state, intercepted);
   }, (callId: number, uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
-    return connection.send('OnLocationChanging', callId, uri, state, intercepted);
+    return circuit.sendLocationChanging(callId, uri, state, intercepted);
   });
 
-  Blazor._internal.forceCloseConnection = () => connection.stop();
-  Blazor._internal.sendJSDataStream = (data: ArrayBufferView | Blob, streamId: number, chunkSize: number) => sendJSDataStream(connection, data, streamId, chunkSize);
-
-  dispatcher = DotNet.attachDispatcher({
-    beginInvokeDotNetFromJS: (callId, assemblyName, methodIdentifier, dotNetObjectId, argsJson): void => {
-      connection.send('BeginInvokeDotNetFromJS', callId ? callId.toString() : null, assemblyName, methodIdentifier, dotNetObjectId || 0, argsJson);
-    },
-    endInvokeJSFromDotNet: (asyncHandle, succeeded, argsJson): void => {
-      connection.send('EndInvokeJSFromDotNet', asyncHandle, succeeded, argsJson);
-    },
-    sendByteArray: (id: number, data: Uint8Array): void => {
-      connection.send('ReceiveByteArray', id, data);
-    },
-  });
+  Blazor._internal.forceCloseConnection = () => circuit.disconnect();
+  Blazor._internal.sendJSDataStream = (data: ArrayBufferView | Blob, streamId: number, chunkSize: number) => circuit.sendJsDataStream(data, streamId, chunkSize);
 
-  const initialConnection = await initializeConnection(options, logger, circuit);
-  const circuitStarted = await circuit.startCircuit(initialConnection);
+  const jsInitializer = await fetchAndInvokeInitializers(options);
+  const circuitStarted = await circuit.start();
   if (!circuitStarted) {
     logger.log(LogLevel.Error, 'Failed to start the circuit.');
     return;
   }
 
-  let disconnectSent = false;
   const cleanup = () => {
-    if (!disconnectSent) {
-      const data = new FormData();
-      const circuitId = circuit.circuitId!;
-      data.append('circuitId', circuitId);
-      disconnectSent = navigator.sendBeacon('_blazor/disconnect', data);
-    }
+    circuit.sendDisconnectBeacon();
   };
 
   Blazor.disconnect = cleanup;
@@ -119,94 +84,35 @@ export async function startCircuit(components: RootComponentManager<ServerCompon
   jsInitializer.invokeAfterStartedCallbacks(Blazor);
 }
 
-async function initializeConnection(options: CircuitStartOptions, logger: Logger, circuit: CircuitDescriptor): Promise<HubConnection> {
-  const hubProtocol = new MessagePackHubProtocol();
-  (hubProtocol as unknown as { name: string }).name = 'blazorpack';
-
-  const connectionBuilder = new HubConnectionBuilder()
-    .withUrl('_blazor')
-    .withHubProtocol(hubProtocol);
-
-  options.configureSignalR(connectionBuilder);
-
-  const newConnection = connectionBuilder.build();
-
-  newConnection.on('JS.AttachComponent', (componentId, selector) => attachRootComponentToLogicalElement(WebRendererId.Server, circuit.resolveElement(selector, componentId), componentId, false));
-  newConnection.on('JS.BeginInvokeJS', dispatcher.beginInvokeJSFromDotNet.bind(dispatcher));
-  newConnection.on('JS.EndInvokeDotNet', dispatcher.endInvokeDotNetFromJS.bind(dispatcher));
-  newConnection.on('JS.ReceiveByteArray', dispatcher.receiveByteArray.bind(dispatcher));
-
-  newConnection.on('JS.BeginTransmitStream', (streamId: number) => {
-    const readableStream = new ReadableStream({
-      start(controller) {
-        newConnection.stream('SendDotNetStreamToJS', streamId).subscribe({
-          next: (chunk: Uint8Array) => controller.enqueue(chunk),
-          complete: () => controller.close(),
-          error: (err) => controller.error(err),
-        });
-      },
-    });
-
-    dispatcher.supplyDotNetStream(streamId, readableStream);
-  });
-
-  const renderQueue = RenderQueue.getOrCreate(logger);
-  newConnection.on('JS.RenderBatch', (batchId: number, batchData: Uint8Array) => {
-    logger.log(LogLevel.Debug, `Received render batch with id ${batchId} and ${batchData.byteLength} bytes.`);
-    renderQueue.processBatch(batchId, batchData, newConnection);
-  });
-
-  newConnection.on('JS.EndLocationChanging', Blazor._internal.navigationManager.endLocationChanging);
-
-  newConnection.onclose(error => !renderingFailed && options.reconnectionHandler!.onConnectionDown(options.reconnectionOptions, error));
-  newConnection.on('JS.Error', error => {
-    renderingFailed = true;
-    unhandledError(newConnection, error, logger);
-    showErrorNotification();
-  });
-
-  try {
-    await newConnection.start();
-    connection = newConnection;
-  } catch (ex: any) {
-    unhandledError(newConnection, ex as Error, logger);
-
-    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 {
-      showErrorNotification();
-    }
+export function startCircuit(): Promise<boolean> {
+  if (!started) {
+    throw new Error('Cannot start the circuit until Blazor Server has started.');
+  }
 
-    if (ex.innerErrors) {
-      if (ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
-        logger.log(LogLevel.Error, 'Unable to connect, please ensure you are using an updated browser that supports WebSockets.');
-      } else if (ex.innerErrors.some(e => e.errorType === 'FailedToStartTransportError' && e.transport === HttpTransportType.WebSockets)) {
-        logger.log(LogLevel.Error, 'Unable to connect, please ensure WebSockets are available. A VPN or proxy may be blocking the connection.');
-      } else if (ex.innerErrors.some(e => e.errorType === 'DisabledTransportError' && e.transport === HttpTransportType.LongPolling)) {
-        logger.log(LogLevel.Error, 'Unable to initiate a SignalR connection to the server. This might be because the server is not configured to support WebSockets. For additional details, visit https://aka.ms/blazor-server-websockets-error.');
-      }
-    }
+  if (circuit.didRenderingFail()) {
+    // We can't start a new circuit after a rendering failure because the renderer
+    // might be in an invalid state.
+    return Promise.resolve(false);
   }
 
-  // Check if the connection is established using the long polling transport,
-  // using the `features.inherentKeepAlive` property only present with long polling.
-  if ((newConnection as any).connection?.features?.inherentKeepAlive) {
-    logger.log(LogLevel.Warning, 'Failed to connect via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. To troubleshoot this, visit https://aka.ms/blazor-server-using-fallback-long-polling.');
+  if (circuit.isDisposedOrDisposing()) {
+    // If the current circuit is no longer available, create a new one.
+    circuit = new CircuitManager(circuit.getRootComponentManager(), appState, options, logger);
   }
 
-  return newConnection;
+  // Start the circuit. If the circuit has already started, this will return the existing
+  // circuit start promise.
+  return circuit.start();
 }
 
-function unhandledError(connection: HubConnection, err: Error, logger: Logger): void {
-  logger.log(LogLevel.Error, err);
+export function hasStartedServer(): boolean {
+  return started;
+}
 
-  // Disconnect on errors.
-  //
-  // Trying to call methods on the connection after its been closed will throw.
-  if (connection) {
-    connection.stop();
-  }
+export async function disposeCircuit() {
+  await circuit?.dispose();
+}
+
+export function isCircuitAvailable(): boolean {
+  return !circuit.isDisposedOrDisposing();
 }

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

@@ -4,7 +4,7 @@
 import { Blazor } from './GlobalExports';
 import { shouldAutoStart } from './BootCommon';
 import { CircuitStartOptions } from './Platform/Circuits/CircuitStartOptions';
-import { setCircuitOptions, startCircuit } from './Boot.Server.Common';
+import { setCircuitOptions, startServer } from './Boot.Server.Common';
 import { ServerComponentDescriptor, discoverComponents } from './Services/ComponentDescriptorDiscovery';
 import { DotNet } from '@microsoft/dotnet-js-interop';
 import { InitialRootComponentsList } from './Services/InitialRootComponentsList';
@@ -21,7 +21,7 @@ function boot(userOptions?: Partial<CircuitStartOptions>): Promise<void> {
 
   const serverComponents = discoverComponents(document, 'server') as ServerComponentDescriptor[];
   const components = new InitialRootComponentsList(serverComponents);
-  return startCircuit(components);
+  return startServer(components);
 }
 
 Blazor.start = boot;

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

@@ -21,7 +21,7 @@ import { attachComponentDescriptorHandler, registerAllComponentDescriptors } fro
 import { hasProgrammaticEnhancedNavigationHandler, performProgrammaticEnhancedNavigation } from './Services/NavigationUtils';
 
 let started = false;
-const rootComponentManager = new WebRootComponentManager();
+let rootComponentManager: WebRootComponentManager;
 
 function boot(options?: Partial<WebStartOptions>) : Promise<void> {
   if (started) {
@@ -43,6 +43,8 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
   setCircuitOptions(options?.circuit);
   setWebAssemblyOptions(options?.webAssembly);
 
+  rootComponentManager = new WebRootComponentManager(options?.ssr?.circuitInactivityTimeoutMs ?? 2000);
+
   attachComponentDescriptorHandler(rootComponentManager);
   attachStreamingRenderingListener(options?.ssr, rootComponentManager);
 

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

@@ -19,7 +19,8 @@ import { RootComponentManager } from './Services/RootComponentManager';
 
 let options: Partial<WebAssemblyStartOptions> | undefined;
 let platformLoadPromise: Promise<void> | undefined;
-let hasStarted = false;
+let loadedWebAssemblyPlatform = false;
+let started = false;
 
 let resolveBootConfigPromise: (value: MonoConfig) => void;
 const bootConfigPromise = new Promise<MonoConfig>(resolve => {
@@ -35,11 +36,11 @@ export function setWebAssemblyOptions(webAssemblyOptions?: Partial<WebAssemblySt
 }
 
 export async function startWebAssembly(components: RootComponentManager<WebAssemblyComponentDescriptor>): Promise<void> {
-  if (hasStarted) {
+  if (started) {
     throw new Error('Blazor WebAssembly has already started.');
   }
 
-  hasStarted = true;
+  started = true;
 
   if (inAuthRedirectIframe()) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -54,7 +55,7 @@ export async function startWebAssembly(components: RootComponentManager<WebAssem
     // focus, in turn triggering a 'change' event. It may also be possible to listen to other DOM mutation events
     // that are themselves triggered by the application of a renderbatch.
     const renderer = getRendererer(browserRendererId);
-    if (renderer.eventDelegator.getHandler(eventHandlerId)) {
+    if (renderer?.eventDelegator.getHandler(eventHandlerId)) {
       monoPlatform.invokeWhenHeapUnlocked(continuation);
     }
   });
@@ -146,15 +147,30 @@ export async function startWebAssembly(components: RootComponentManager<WebAssem
   api.invokeLibraryInitializers('afterStarted', [Blazor]);
 }
 
+export function hasStartedWebAssembly(): boolean {
+  return started;
+}
+
 export function waitForBootConfigLoaded(): Promise<MonoConfig> {
   return bootConfigPromise;
 }
 
 export function loadWebAssemblyPlatformIfNotStarted(): Promise<void> {
-  platformLoadPromise ??= monoPlatform.load(options ?? {}, resolveBootConfigPromise);
+  platformLoadPromise ??= (async () => {
+    await monoPlatform.load(options ?? {}, resolveBootConfigPromise);
+    loadedWebAssemblyPlatform = true;
+  })();
   return platformLoadPromise;
 }
 
+export function hasStartedLoadingWebAssemblyPlatform(): boolean {
+  return platformLoadPromise !== undefined;
+}
+
+export function hasLoadedWebAssemblyPlatform(): boolean {
+  return loadedWebAssemblyPlatform;
+}
+
 // obsolete, legacy, don't use for new code!
 function invokeJSFromDotNet(callInfo: Pointer, arg0: any, arg1: any, arg2: any): any {
   const functionIdentifier = monoPlatform.readStringField(callInfo, 0)!;