Reload page automatically only when resume fails after non-graceful pause

Author: oroztocil

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

@@ -36,6 +36,8 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
 
   remote = false;
 
+  graceful = false;
+
   retryWhenDocumentBecomesVisible: () => void;
 
   constructor(dialogId: string, private readonly document: Document, private readonly logger: Logger) {
@@ -95,6 +97,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     }
 
     this.operation = options?.type ?? 'reconnect';
+    this.graceful = (options?.type === 'pause') ? options.graceful : false;
 
     this.retryButton.style.display = 'none';
     this.rejoiningAnimation.style.display = 'block';
@@ -105,6 +108,8 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
 
   update(options: ReconnectDisplayUpdateOptions): void {
     this.operation = options.type;
+    this.graceful = (options.type === 'pause') ? options.graceful : false;
+
     if (this.operation === 'pause') {
       this.retryButton.style.display = 'none';
       this.rejoiningAnimation.style.display = 'none';
@@ -129,10 +134,16 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
   failed(): void {
     this.rejoiningAnimation.style.display = 'none';
     if (this.operation === 'pause') {
-      // The client expected to be able to resume the circuit and it failed.
-      // This typically happens when the server has been restarted and the circuit state is lost.
-      // This is effectively the same as the circuit being rejected during reconnect.
-      this.rejected();
+      if (this.graceful) {
+        // Circuit failed to resume after a graceful (client-requested) pause.
+        // We show a retry UI to allow the user to try to continue without losing the state.
+        this.resumeButton.style.display = 'block';
+        this.status.innerHTML = 'Failed to resume.<br />Please retry or reload the page.';
+      } else {
+        // Circuit failed to resume after an ungraceful pause (e.g., server restart).
+        // We treat this as non-recoverable rejection.
+        this.rejected();
+      }
     } else {
       this.retryButton.style.display = 'block';
       this.status.innerHTML = 'Failed to rejoin.<br />Please retry or reload the page.';
@@ -158,7 +169,7 @@ 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 });
+        this.update({ type: 'pause', remote: this.remote, graceful: this.graceful });
         const resumeSuccessful = await Blazor.resumeCircuit!();
         if (!resumeSuccessful) {
           this.failed();

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

@@ -75,6 +75,7 @@ class ReconnectionProcess {
     const displayOptions: ReconnectDisplayUpdateOptions = {
       type: isGracefulPause ? 'pause' : 'reconnect',
       remote: this.isRemote,
+      graceful: !!isGracefulPause,
       currentAttempt: 0,
       secondsToNextAttempt: 0,
     };
@@ -85,6 +86,7 @@ class ReconnectionProcess {
       this.reconnectDisplay.update({
         type: 'pause',
         remote: this.isRemote,
+        graceful: true,
       });
     }
   }
@@ -126,7 +128,7 @@ 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 });
+          this.reconnectDisplay.update({ type: 'pause', remote: true, graceful: false });
           const resumeResult = await this.resumeCallback();
           if (resumeResult) {
             return;

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

@@ -13,7 +13,8 @@ export type ReconnectDisplayUpdateOptions = ReconnectOptions | PauseOptions;
 
 export type PauseOptions = {
   type: 'pause',
-  remote: boolean
+  remote: boolean,
+  graceful: boolean
 };
 
 export type ReconnectOptions = {

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

@@ -3,4 +3,5 @@ export interface ReconnectStateChangedEvent {
   currentAttempt?: number;
   secondsToNextAttempt?: number;
   remote?: boolean;
+  graceful?: boolean;
 }

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

@@ -71,9 +71,10 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
     }
     if (options.type === 'pause') {
       const remote = options.remote;
+      const graceful = options.graceful;
       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: remote, graceful: graceful });
     }
   }
 

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

@@ -15,7 +15,7 @@ function handleReconnectStateChanged(event) {
         reconnectModal.close();
     } else if (event.detail.state === "failed") {
         document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
-    } else if (event.detail.state === "rejected" || event.detail.state === "resume-failed") {
+    } else if (event.detail.state === "rejected" || (event.detail.state === "resume-failed" && !!event.detail.graceful)) {
         location.reload();
     }
 }