page loading

src/components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { isStaleChunkError } from '@/lib/staleChunk';
 
 /**
  * The last line before a white page.
@@ -45,12 +46,28 @@ export class ErrorBoundary extends Component<Props, State> {
     this.setState({ error: null });
   };
 
+  private reload = () => {
+    window.location.reload();
+  };
+
   override render() {
     const { error } = this.state;
     if (!error) return this.props.children;
 
     const area = this.props.area ?? 'this screen';
 
+    /**
+     * A page whose code never arrived cannot be re-rendered into existence.
+     *
+     * "Try again" clears the error and renders the same `lazy()` component,
+     * which requests the same missing file and throws the same error — the
+     * button looked like a recovery and was a loop. `lib/staleChunk.ts` already
+     * reloads once on its own; landing here means that reload has happened and
+     * not helped, or was suppressed to avoid a boot loop, so the honest offer
+     * is a reload the person chooses and a message that names the cause.
+     */
+    const isStale = isStaleChunkError(error);
+
     return (
       <div
         role="alert"
@@ -65,11 +82,12 @@ export class ErrorBoundary extends Component<Props, State> {
         }}
       >
         <h2 style={{ margin: '0 0 8px', fontSize: 18, fontWeight: 600, color: '#8A1F1F' }}>
-          Something on {area} failed to render
+          {isStale ? 'This page was updated while you were working' : `Something on ${area} failed to render`}
         </h2>
         <p style={{ margin: '0 0 16px', fontSize: 14, lineHeight: 1.6, color: '#5C4747' }}>
-          The rest of the console is fine — this is one screen, not the whole app. The message
-          below is what broke, and the full stack is in the browser console.
+          {isStale
+            ? 'A new version of the console was deployed, so the file this tab was about to load no longer exists. Nothing is wrong with your data — reloading picks up the current version.'
+            : 'The rest of the console is fine — this is one screen, not the whole app. The message below is what broke, and the full stack is in the browser console.'}
         </p>
         <pre
           style={{
@@ -88,7 +106,7 @@ export class ErrorBoundary extends Component<Props, State> {
         </pre>
         <button
           type="button"
-          onClick={this.reset}
+          onClick={isStale ? this.reload : this.reset}
           style={{
             padding: '9px 18px',
             borderRadius: 999,
@@ -99,7 +117,7 @@ export class ErrorBoundary extends Component<Props, State> {
             cursor: 'pointer',
           }}
         >
-          Try again
+          {isStale ? 'Reload the page' : 'Try again'}
         </button>
       </div>
     );