Add ChunkLoadError boundary to force reload on stale deployment

2026-08-06 08:12:16 +02:00
parent 0d0f3e1a33
commit c727795a78
2 changed files with 70 additions and 0 deletions
@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Root-level error boundary — must include its own <html>/<body>
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    if (error?.name === "ChunkLoadError") {
+      window.location.reload();
+    }
+  }, [error]);
+
+  return (
+    <html>
+      <body className="flex items-center justify-center min-h-screen bg-zinc-950 text-zinc-200">
+        {error?.name === "ChunkLoadError" ? null : (
+          <div className="text-center space-y-2">
+            <p className="text-lg font-medium">Application error</p>
+            {error?.digest && (
+              <p className="text-sm text-zinc-500">Digest: {error.digest}</p>
+            )}
+          </div>
+        )}
+      </body>
+    </html>
+  );
+}