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