fix(pwa): recover from a dead chunk and a broken precache after an update (#2524)

After an update, a tab or a device whose service worker still serves the
previous build asks for chunks the update removed. The server answered those
requests with index.html and a 200, so the import failed with a MIME error,
and everything caching in between was free to keep the HTML as the chunk. A
precache install that met a missing file stored it, and Workbox reuses hashed
entries by URL, so the device showed "A new version is available" on every
load, whatever the reload or the cleared browser cache, and carried the broken
entry into every later release that keeps the file's name.

The SPA fallback now answers a GET for a build file that is not on disk with
a plain 404 (no-store) instead of index.html. A precache install refuses it,
so the worker whose cache is complete stays in charge until the new build is.
index.html is sent relative to the public dir, which also stops an install
living under a dot directory from answering every deep link with a 404.

On the client, the reload after a dead chunk (the automatic one and the
button on the update screen) no longer goes straight back to the worker that
served the broken shell. When that same worker is still in charge and the
server answers, its precache and registration are dropped first, so the
reload reaches the build the server runs now. Offline, and in offline mode,
the shell is kept. Every recovery reload, and the reload of the version
handover, asks for the page under a one-off query parameter, so a proxy or
CDN that keeps index.html against its headers cannot hand back the stale
shell either.

A chunk the entry imports statically fails before any of that code runs.
shell-guard.js, a small classic script loaded ahead of the entry, watches for
exactly that failure and runs the same recovery, once per session.

A stylesheet, font or icon that holds a page raises no error at all, so once
the app has started and the browser is idle, it looks through the precache
for entries that hold a page under a build file's name, fetches each from
the server past every cache and puts it back in place. A repaired stylesheet
is loaded again, and so are the app's stylesheets when a font was repaired,
since the browser does not try a face that failed again in the same
document. Only the headers are read, a precache found sound is not looked at
again until its entries change, nothing is fetched while nothing is broken,
and nothing happens offline, in offline mode or without storage. An answer
that is not the file (an auth wall, its login page, a server error) leaves
the entry for the next launch.

A page the recovery loaded from the network already runs the version the
server reports, so the version handover now records it instead of reloading
it a second time once the new worker takes over. A page loaded past an older
worker that is still in charge, as a hard reload does, still asks for the new
worker and records the version only once that has taken over, so the next
tab or launch cannot get the old shell without a handover.

Dropping the worker ends a Web Push subscription with it, so on such a device
the settings card shows push as off until it is switched on again. A missing
sw-push.js now fails the worker install with a 404 rather than index.html; the
comments that described the old answer say so.

client/src/components/shared/ErrorBoundary.test.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import ErrorBoundary, { RootErrorFallback } from './ErrorBoundary';
+import * as chunkReload from '../../utils/chunkReload';
+
+// Only the Reload button's way out is replaced; the boundary's own automatic reload
+// (reloadOnceForChunk) keeps running the real code.
+vi.mock('../../utils/chunkReload', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('../../utils/chunkReload')>()),
+  reloadOntoCurrentBuild: vi.fn(),
+}));
 
 // React logs every caught error itself; without this each of these tests prints a
 // full component stack and buries the real output.
@@ -146,9 +154,10 @@ describe('ErrorBoundary', () => {
   });
 
   it('FE-COMP-ERRBOUND-011: a chunk failure reloads once, then stops', () => {
+    // The recovery reload is a location.replace onto a fresh URL (chunkReload).
     const reload = vi.fn();
     Object.defineProperty(window, 'location', {
-      value: { ...window.location, reload },
+      value: { ...window.location, replace: reload },
       writable: true,
     });
 
@@ -214,3 +223,40 @@ describe('RootErrorFallback', () => {
     expect(screen.getByText('A new version is available')).toBeInTheDocument();
   });
 });
+
+describe('Reload button', () => {
+  let reload: ReturnType<typeof vi.fn>;
+  beforeEach(() => {
+    reload = vi.fn();
+    Object.defineProperty(window, 'location', { value: { ...window.location, reload }, writable: true });
+    vi.mocked(chunkReload.reloadOntoCurrentBuild).mockClear();
+  });
+
+  // A plain reload is answered by the service worker with the shell that just
+  // failed, which is how the update screen outlived every reload (#2524).
+  it('FE-COMP-ERRBOUND-017: after a dead chunk it reloads onto the current build', () => {
+    render(<RootErrorFallback error={new Error(CHUNK_MESSAGE)} reset={() => {}} isChunkError />);
+    fireEvent.click(screen.getByText('Reload page'));
+    expect(chunkReload.reloadOntoCurrentBuild).toHaveBeenCalledTimes(1);
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-ERRBOUND-018: the route fallback for a dead chunk does the same', () => {
+    sessionStorage.setItem('trek:chunk-reload', '1');
+    render(
+      <ErrorBoundary boundaryId="route" level="route">
+        <Boom message={CHUNK_MESSAGE} />
+      </ErrorBoundary>,
+    );
+    fireEvent.click(screen.getByText('Reload page'));
+    expect(chunkReload.reloadOntoCurrentBuild).toHaveBeenCalledTimes(1);
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-ERRBOUND-019: any other failure keeps the plain reload', () => {
+    render(<RootErrorFallback error={new Error('boot failed')} reset={() => {}} isChunkError={false} />);
+    fireEvent.click(screen.getByText('Reload page'));
+    expect(reload).toHaveBeenCalledTimes(1);
+    expect(chunkReload.reloadOntoCurrentBuild).not.toHaveBeenCalled();
+  });
+});

client/src/components/shared/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AlertTriangle, RefreshCw, RotateCcw } from 'lucide-react'
 import { useTranslation } from '../../i18n'
-import { isChunkLoadError, reloadOnceForChunk } from '../../utils/chunkReload'
+import { isChunkLoadError, reloadOnceForChunk, reloadOntoCurrentBuild } from '../../utils/chunkReload'
 
 /**
  * The app had none of these, so a single throw during render unmounted the whole
@@ -95,6 +95,16 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
   }
 }
 
+/**
+ * The fallback's Reload button. After a dead chunk a plain reload can come back
+ * to this very screen, because the service worker answers it with the shell it
+ * already failed to load (#2524), so that case goes through the chunk recovery.
+ */
+function reloadPage(isChunkError: boolean) {
+  if (isChunkError) reloadOntoCurrentBuild()
+  else window.location.reload()
+}
+
 interface FallbackProps extends FallbackState {
   level: Level
   variant: 'desktop' | 'mobile'
@@ -161,7 +171,7 @@ export function ErrorFallback({ error, reset, isChunkError, level, variant, labe
         {(!isPanel || isChunkError) && (
           <button
             type="button"
-            onClick={() => window.location.reload()}
+            onClick={() => reloadPage(isChunkError)}
             className={[
               'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-caption font-medium',
               mobile ? 'border-[color:var(--m-rowbr)] text-m-ink' : 'border-edge text-content',
@@ -201,7 +211,7 @@ export function RootErrorFallback({ error, isChunkError }: FallbackState) {
       {message && <code className="max-w-full truncate text-caption text-content-faint">{message}</code>}
       <button
         type="button"
-        onClick={() => window.location.reload()}
+        onClick={() => reloadPage(isChunkError)}
         className="mt-1 inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-2 text-caption font-medium text-white"
       >
         <RefreshCw size={14} aria-hidden />