(frontend) recover from stale lazy-loaded chunks after a deploy

Route components are code-split with content-hashed filenames. A
user who loaded the app before a deployment (typically someone
sitting in a call) still holds an `index.html` referencing old chunk
names. When they navigate after the deploy — e.g. to `/feedback` on
leaving a room — the old chunk is gone and the dynamic import fails
with "TypeError: error loading dynamically imported module".

Reload the page on that failure to fetch a fresh `index.html` with
the current hashes, which transparently fixes the stale-deploy case.

Guard against infinite reload loops with a `RELOAD_COOLDOWN_MS`: if
the import fails again right after a reload, the cause is not a
stale deploy (ad blocker, proxy, outage) and reloading further would
loop forever. In that case, let the error propagate so it reaches
monitoring.

Inspired by https://vite.dev/guide/build#load-error-handling
This commit is contained in:
lebaudantoine
2026-08-12 19:36:52 +02:00
parent 047a4c9f3f
commit 2af6157265
2 changed files with 24 additions and 0 deletions
+4
View File
@@ -8,6 +8,10 @@ and this project adheres to
## [Unreleased]
### Fixed
- ✨(frontend) recover from stale lazy-loaded chunks after a deploy
## [1.26.0] - 2026-08-12
### Added
+20
View File
@@ -2,6 +2,26 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
const CHUNK_RELOAD_KEY = 'vite-preload-error-reload-at'
const RELOAD_COOLDOWN_MS = 30_000
window.addEventListener('vite:preloadError', (event) => {
try {
const lastReloadAt = Number(sessionStorage.getItem(CHUNK_RELOAD_KEY)) || 0
if (Date.now() - lastReloadAt <= RELOAD_COOLDOWN_MS) {
// Recent reload didn't help: not a stale deploy, surface the error.
return
}
sessionStorage.setItem(CHUNK_RELOAD_KEY, String(Date.now()))
} catch {
// Without sessionStorage we cannot guard against a reload loop:
// don't auto-reload, let the error propagate.
return
}
event.preventDefault()
window.location.reload()
})
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />