Improve Blazor reconnection experience after the server is restarted

src/Components/Server/src/ComponentHub.cs

@@ -316,9 +316,10 @@ public async ValueTask<string> ResumeCircuit(
             persistedCircuitState = await _circuitPersistenceManager.ResumeCircuitAsync(circuitId, Context.ConnectionAborted);
             if (persistedCircuitState == null)
             {
+                // The circuit state cannot be retrieved. It might have been deleted or expired.
+                // We do not send an error to the client as this is a valid scenario
+                // that will be handled by the client reconnection logic. 
                 Log.InvalidInputData(_logger);
-                await NotifyClientError(Clients.Caller, "The circuit state could not be retrieved. It may have been deleted or expired.");
-                Context.Abort();
                 return null;
             }
         }

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

@@ -129,12 +129,13 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
   failed(): void {
     this.rejoiningAnimation.style.display = 'none';
     if (this.reconnect) {
+      this.resumeButton.style.display = 'none';
       this.reloadButton.style.display = 'block';
       this.status.innerHTML = 'Failed to rejoin.<br />Please retry or reload the page.';
       this.document.addEventListener('visibilitychange', this.retryWhenDocumentBecomesVisible);
     } else {
-      this.status.innerHTML = 'Failed to resume the session.<br />Please reload the page.';
-      this.resumeButton.style.display = 'none';
+      this.status.innerHTML = 'Failed to resume the session.<br />Please retry or reload the page.';
+      this.resumeButton.style.display = 'block';
       this.reloadButton.style.display = 'none';
     }
   }
@@ -157,7 +158,6 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
       const successful = await Blazor.reconnect!();
       if (!successful) {
         // Try to resume the circuit if the reconnect failed
-        this.update({ type: 'pause', remote: this.remote });
         const resumeSuccessful = await Blazor.resumeCircuit!();
         if (!resumeSuccessful) {
           this.rejected();
@@ -178,7 +178,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
       // - exception to mean we didn't reach the server (this can be sync or async)
       const successful = await Blazor.resumeCircuit!();
       if (!successful) {
-        this.failed();
+        this.rejected();
       }
     } catch (err: unknown) {
       // We got an exception, server is currently unavailable

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

@@ -126,13 +126,12 @@ class ReconnectionProcess {
         if (!result) {
           // Try to resume the circuit if the reconnect failed
           // If the server responded and refused to reconnect, stop auto-retrying.
-          this.reconnectDisplay.update({ type: 'pause', remote: true });
           const resumeResult = await this.resumeCallback();
           if (resumeResult) {
             return;
           }
 
-          this.reconnectDisplay.failed();
+          this.reconnectDisplay.rejected();
           return;
         }
         return;

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

@@ -27,7 +27,9 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
 
   static readonly ReconnectStateChangedEventName = 'components-reconnect-state-changed';
 
-  private reconnect = false;
+  reconnect = true;
+
+  remote = false;
 
   constructor(private dialog: HTMLElement, private readonly document: Document, maxRetries?: number) {
     this.document = document;
@@ -70,10 +72,10 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
       this.dispatchReconnectStateChangedEvent({ state: 'retrying', currentAttempt, secondsToNextAttempt });
     }
     if (options.type === 'pause') {
-      const remote = options.remote;
+      this.remote = options.remote;
       this.dialog.classList.remove(UserSpecifiedDisplay.ShowClassName, UserSpecifiedDisplay.RetryingClassName);
       this.dialog.classList.add(UserSpecifiedDisplay.PausedClassName);
-      this.dispatchReconnectStateChangedEvent({ state: 'paused', remote: remote });
+      this.dispatchReconnectStateChangedEvent({ state: 'paused', remote: this.remote });
     }
   }
 
@@ -90,7 +92,7 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
       this.dispatchReconnectStateChangedEvent({ state: 'failed' });
     } else {
       this.dialog.classList.add(UserSpecifiedDisplay.ResumeFailedClassName);
-      this.dispatchReconnectStateChangedEvent({ state: 'resume-failed' });
+      this.dispatchReconnectStateChangedEvent({ state: 'resume-failed', remote: this.remote });
     }
   }
 

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/ReconnectModal.razor

@@ -25,11 +25,11 @@
         <p class="components-pause-visible">
             The session has been paused by the server.
         </p>
-        <button id="components-resume-button" class="components-pause-visible">
-            Resume
-        </button>
         <p class="components-resume-failed-visible">
-            Failed to resume the session.<br />Please reload the page.
+            Failed to resume the session.<br />Please retry or reload the page.
         </p>
+        <button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
+            Resume
+        </button>
     </div>
 </dialog>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Layout/ReconnectModal.razor.js

@@ -16,6 +16,7 @@ function handleReconnectStateChanged(event) {
     } else if (event.detail.state === "failed") {
         document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
     } else if (event.detail.state === "rejected") {
+        reconnectModal.close();
         location.reload();
     }
 }
@@ -52,7 +53,7 @@ async function resume() {
             location.reload();
         }
     } catch {
-        location.reload();
+        reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
     }
 }