Improve Blazor reconnection experience.

- Updated text of reconnect dialog to be more clear.
- Added user feedback to the `Retry` event button click. The current flow is `Attempting to reconnect` -> `Failed to reconnect ... [Retry]` -> Click Retry -> `Attempting to reconnect`.
- Found that in cases where the server went away entirely the reconnect event would through unexpectedly preventing the reconnect display from handling a failed reconnect. Added a separate error flow to understand when the server went away/could not start a SignalR connection to.
- Could not find a great way to add tests for this scenario.

Addresses #12442

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

@@ -37,8 +37,13 @@ async function boot(userOptions?: Partial<BlazorOptions>): Promise<void> {
     }
 
     const reconnection = existingConnection || await initializeConnection(options, logger);
+    if (reconnection.state !== signalR.HubConnectionState.Connected) {
+      logger.log(LogLevel.Information, 'Reconnection attempt failed. Unable to connect to the server.');
+      return false;
+    }
+
     if (!(await circuit.reconnect(reconnection))) {
-      logger.log(LogLevel.Information, 'Reconnection attempt failed.');
+      logger.log(LogLevel.Information, 'Reconnection attempt to the circuit failed.');
       return false;
     }
 

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

@@ -31,12 +31,18 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     ];
 
     this.modal.style.cssText = modalStyles.join(';');
-    this.modal.innerHTML = '<h5 style="margin-top: 20px"></h5><button style="margin:5px auto 5px">Retry?</button><p>Alternatively, <a href>reload</a></p>';
+    this.modal.innerHTML = '<h5 style="margin-top: 20px"></h5><button style="margin:5px auto 5px">Retry</button><p>Alternatively, <a href>reload</a></p>';
     this.message = this.modal.querySelector('h5')!;
     this.button = this.modal.querySelector('button')!;
     this.reloadParagraph = this.modal.querySelector('p')!;
 
-    this.button.addEventListener('click', () => window['Blazor'].reconnect());
+    this.button.addEventListener('click', async () => {
+      this.show();
+      const successful = await window['Blazor'].reconnect();
+      if (!successful) {
+        this.failed();
+      }
+    });
     this.reloadParagraph.querySelector('a')!.addEventListener('click', () => location.reload());
   }
 
@@ -57,7 +63,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
 
   failed(): void {
     this.button.style.display = 'block';
-    this.reloadParagraph.style.display = 'block';
-    this.message.textContent = 'Failed to reconnect to the server.';
+    this.reloadParagraph.style.display = 'none';
+    this.message.innerHTML = 'Reconnection failed. Try <a href>reloading</a> the page if you\'re unable to reconnect.';
   }
 }

src/Components/Web.JS/tests/DefaultReconnectDisplay.test.ts

@@ -45,7 +45,7 @@ describe('DefaultReconnectDisplay', () => {
         display.failed();
 
         expect(display.modal.style.display).toBe('block');
-        expect(display.message.textContent).toBe('Failed to reconnect to the server.');
+        expect(display.message.innerHTML).toBe('Reconnection failed. Try <a href=\"\">reloading</a> the page if you\'re unable to reconnect.');
         expect(display.button.style.display).toBe('block');
     });