An app whose shell no longer matches the server repairs itself

[suskozaver]

Reported after a deploy: a white screen, "Application error: a client-side exception has occurred", and ChunkLoadError: Loading chunk 135 failed in the console.

What the hashes said

file	the browser	the new build
255-…	3d881dfa8c72bc56	3d881dfa8c72bc56
135-…	d5de4c531d4e06a7	b4d0965ad68280be
webpack-…	55676dfde347fa72	9100694e6ef91c55

The runtime was the old one, out of the service worker's cache. It asked for chunk 135 by its old name and the new build calls that file something else, so the request 404ed. Chunk 255 loaded perfectly, because its contents had not changed between the builds and it therefore kept its name. Half old and half new, which is the exact thing the per-build cache exists to prevent.

It does prevent it, for files it holds. What it cannot prevent is a chunk it never held: the cache fills by visiting, chunks are lazy, and a deploy takes the old ones off the server. From that moment, any chunk the old shell had not already cached is gone for good.

And the way out is the update prompt, which lives inside the app that cannot boot.

The fix

A way out that does not live there. An inline script in the head, ahead of the app's own code, listening for that failure and only that one: drop the caches, unregister the worker, reload once.

Explicit updates stay, because they are a good decision and this does not touch them. The script speaks up only when the shell is already broken and there is nothing left to protect.

Twice in ten minutes and it stops. If clearing the cache did not help then the fault is on the server, and a page that reloads forever is one broken page turned into a machine hammering it.

Two things about the shape

Inline rather than a component, because by the time React could mount a component, the chunk it needs may be the missing one.

Serialised from the real functions with toString() rather than the same rules typed out again as a string. Two copies of a rule is how one of them gets fixed and the other does not, and there is a test holding the script to the functions.

Checks

npx tsc --noEmit, npx next lint, npm test and TZ=America/New_York npm test: 65 files, 1684 tests, no warnings.

Eighteen of them are new. Five run the serialised source in a node:vm sandbox with the browser stubbed out and assert what it does to the caches, the registration and the location, because source that has never been run has never been checked. The built output was also read: the listener is in the HTML of every prerendered page.

[vercel]

Someone is attempting to deploy a commit to the Arun's projects Team on Vercel.

A member of the Team first needs to authorize it.