Skip to content

Commit 2605373

Browse files
committed
fix: auto-reload on chunk loading errors (version skew)
When dynamic imports fail due to deployment version skew, automatically reload the page to fetch fresh assets. Uses sessionStorage to prevent infinite reload loops.
1 parent aaa8f74 commit 2605373

File tree

1 file changed

+26
-0
lines changed

1 file changed

+26
-0
lines changed

src/components/DefaultCatchBoundary.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,37 @@ import { useEffect } from 'react'
1818
// isRoot?: boolean
1919
// }
2020

21+
function isChunkLoadError(error: unknown): boolean {
22+
if (!(error instanceof Error)) return false
23+
return (
24+
error.message.includes('Failed to fetch dynamically imported module') ||
25+
error.message.includes('error loading dynamically imported module') ||
26+
error.message.includes('Importing a module script failed') ||
27+
error.name === 'ChunkLoadError'
28+
)
29+
}
30+
2131
export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
2232
const router = useRouter()
33+
2334
useEffect(() => {
35+
// Handle chunk loading errors (version skew) by reloading the page
36+
if (isChunkLoadError(error) && typeof window !== 'undefined') {
37+
const reloadKey = 'chunk-error-reload'
38+
const lastReload = sessionStorage.getItem(reloadKey)
39+
const now = Date.now()
40+
41+
// Only reload if we haven't reloaded in the last 10 seconds (prevent loop)
42+
if (!lastReload || now - parseInt(lastReload, 10) > 10000) {
43+
sessionStorage.setItem(reloadKey, now.toString())
44+
window.location.reload()
45+
return
46+
}
47+
}
48+
2449
Sentry.captureException(error)
2550
}, [error])
51+
2652
const isRoot = useMatch({
2753
strict: false,
2854
select: (state) => state.id === rootRouteId,

0 commit comments

Comments
 (0)