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>
+  );
+}