46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
// Log error details to console
|
|
console.error("Global Error:", error);
|
|
console.error("Error Name:", error.name);
|
|
console.error("Error Message:", error.message);
|
|
console.error("Error Stack:", error.stack);
|
|
console.error("Error Digest:", error.digest);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html>
|
|
<body>
|
|
<div className="flex flex-col items-center justify-center h-screen gap-4 p-4">
|
|
<h2 className="text-2xl font-bold text-red-600">
|
|
Critical System Error
|
|
</h2>
|
|
<div className="bg-red-50 border border-red-200 rounded p-4 max-w-2xl">
|
|
<p className="font-semibold mb-2">Error Type: {error.name}</p>
|
|
<p className="text-sm mb-2">Message: {error.message}</p>
|
|
{error.digest && (
|
|
<p className="text-xs text-gray-600">Digest: {error.digest}</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
|
onClick={() => reset()}
|
|
>
|
|
Restart App
|
|
</button>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|