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.

Author: tannerlinsley

src/components/DefaultCatchBoundary.tsx

@@ -18,11 +18,37 @@ import { useEffect } from 'react'
 //   isRoot?: boolean
 // }
 
+function isChunkLoadError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+  return (
+    error.message.includes('Failed to fetch dynamically imported module') ||
+    error.message.includes('error loading dynamically imported module') ||
+    error.message.includes('Importing a module script failed') ||
+    error.name === 'ChunkLoadError'
+  )
+}
+
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
+
   useEffect(() => {
+    // Handle chunk loading errors (version skew) by reloading the page
+    if (isChunkLoadError(error) && typeof window !== 'undefined') {
+      const reloadKey = 'chunk-error-reload'
+      const lastReload = sessionStorage.getItem(reloadKey)
+      const now = Date.now()
+
+      // Only reload if we haven't reloaded in the last 10 seconds (prevent loop)
+      if (!lastReload || now - parseInt(lastReload, 10) > 10000) {
+        sessionStorage.setItem(reloadKey, now.toString())
+        window.location.reload()
+        return
+      }
+    }
+
     Sentry.captureException(error)
   }, [error])
+
   const isRoot = useMatch({
     strict: false,
     select: (state) => state.id === rootRouteId,