chore: deployment debugging - output standalone and global error boundary
This commit is contained in:
48
src/app/error.tsx
Normal file
48
src/app/error.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { AlertTriangle, RefreshCcw } from 'lucide-react';
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error('App Crash Error:', error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
|
||||
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-2xl flex items-center justify-center mx-auto">
|
||||
<AlertTriangle size={32} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-2xl font-black text-zinc-900 dark:text-white">Hoppla! Ein Fehler.</h2>
|
||||
<p className="text-zinc-500 text-sm">
|
||||
Die App ist auf ein Problem gestoßen. Das kann an fehlenden Umgebungsvariablen oder Verbindungsproblemen liegen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error.message && (
|
||||
<div className="p-4 bg-zinc-100 dark:bg-zinc-800 rounded-xl text-left">
|
||||
<p className="text-[10px] font-black uppercase text-zinc-400 mb-1 tracking-widest">Fehlermeldung:</p>
|
||||
<p className="text-xs font-mono text-zinc-600 dark:text-zinc-300 break-all">{error.message}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => reset()}
|
||||
className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
|
||||
>
|
||||
<RefreshCcw size={18} />
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user