Marc Mintel
ede34ab7ce
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 12s
Build & Deploy / 🏗️ Build (push) Successful in 10m30s
Build & Deploy / 🚀 Deploy (push) Successful in 27s
Build & Deploy / 🩺 Smoke Test (push) Successful in 7s
Build & Deploy / 🔔 Notify (push) Successful in 4s
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import * as Sentry from "@sentry/nextjs";
|
|
import { Button } from "@/src/components/Button";
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
// Log the error to Sentry/GlitchTip
|
|
Sentry.captureException(error);
|
|
console.error("Caught in error.tsx:", error);
|
|
|
|
// Auto-reload on ChunkLoadError or Server Action errors to fetch the new deployment assets
|
|
const isChunkLoadError =
|
|
error.message &&
|
|
(error.message.includes("ChunkLoadError") ||
|
|
error.message.includes("Loading chunk") ||
|
|
error.message.includes("Failed to find Server Action"));
|
|
|
|
if (isChunkLoadError) {
|
|
const lastReload = sessionStorage.getItem("last-chunk-reload");
|
|
const now = Date.now();
|
|
if (!lastReload || now - parseInt(lastReload) > 10000) {
|
|
sessionStorage.setItem("last-chunk-reload", now.toString());
|
|
window.location.reload();
|
|
}
|
|
}
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[70vh] px-5 py-20 text-center">
|
|
<div className="space-y-6 max-w-2xl mx-auto">
|
|
<span className="inline-block px-3 py-1 bg-red-50 border border-red-100 rounded text-[10px] font-mono text-red-500 uppercase tracking-widest">
|
|
Error 500
|
|
</span>
|
|
<h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter">
|
|
Kritischer Fehler.
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-slate-500 font-serif italic max-w-xl mx-auto leading-relaxed">
|
|
Ein unerwartetes Problem ist aufgetreten. Unsere Systeme haben den
|
|
Vorfall protokolliert.
|
|
</p>
|
|
|
|
<div className="pt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Button href="#" onClick={() => reset()} variant="primary">
|
|
System neu starten (Retry)
|
|
</Button>
|
|
<Button href="/" variant="outline">
|
|
Zurück zur Basis
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="pt-16 max-w-sm mx-auto">
|
|
<div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-left font-mono text-xs text-slate-400">
|
|
<div className="flex items-center justify-between border-b border-slate-200/60 pb-2 mb-2">
|
|
<span>STATUS</span>
|
|
<span className="text-red-500 flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span>
|
|
FAIL
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between border-b border-slate-200/60 pb-2 mb-2">
|
|
<span>TRACKING</span>
|
|
<span className="text-green-500">GLITCHTIP_LOGGED</span>
|
|
</div>
|
|
{error.digest && (
|
|
<div className="flex justify-between">
|
|
<span>DIGEST</span>
|
|
<span className="truncate max-w-[150px]">{error.digest}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|