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,38 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+export default function DashboardError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // After a redeployment the old chunk URLs 404 — force a hard reload to pick up new manifest
+    if (error?.name === "ChunkLoadError") {
+      window.location.reload();
+    }
+  }, [error]);
+
+  if (error?.name === "ChunkLoadError") {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-4 text-zinc-400">
+      <AlertTriangle className="w-10 h-10 text-amber-500" />
+      <p className="text-lg font-medium text-zinc-200">Something went wrong</p>
+      {error?.message && (
+        <p className="text-sm text-zinc-500 max-w-md text-center">{error.message}</p>
+      )}
+      <Button variant="outline" onClick={reset} className="gap-2">
+        <RefreshCw className="w-4 h-4" />
+        Try again
+      </Button>
+    </div>
+  );
+}
@@ -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>
+  );
+}