72 lines
3.3 KiB
JavaScript
72 lines
3.3 KiB
JavaScript
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { AlertCircle } from 'lucide-react';
|
|
|
|
function DetailedErrorFallback({ error, resetErrorBoundary }) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-8">
|
|
<Alert variant="destructive" className="mx-auto max-w-4xl">
|
|
<AlertCircle className="h-5 w-5" />
|
|
<AlertTitle className="mb-2 text-xl font-bold">Runtime Error</AlertTitle>
|
|
<AlertDescription>
|
|
<div className="mt-4 space-y-4">
|
|
{/* Error Message */}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500">Error Message:</h3>
|
|
<p className="mt-1 font-medium text-red-600">{error.message}</p>
|
|
</div>
|
|
|
|
{/* Component Stack */}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500">Component Stack:</h3>
|
|
<pre className="mt-1 overflow-auto rounded-md bg-gray-900 p-4 text-sm text-white">
|
|
{error.componentStack || error.stack}
|
|
</pre>
|
|
</div>
|
|
|
|
{/* Additional Error Info */}
|
|
{error.fileName && (
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500">File:</h3>
|
|
<p className="mt-1 font-mono text-sm">{error.fileName}</p>
|
|
</div>
|
|
)}
|
|
|
|
{error.lineNumber && (
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500">Line:</h3>
|
|
<p className="mt-1 font-mono text-sm">{error.lineNumber}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error Properties */}
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500">Additional Details:</h3>
|
|
<pre className="mt-1 overflow-auto rounded-md bg-gray-100 p-4 text-sm">
|
|
{JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}
|
|
</pre>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="mt-6 flex gap-4">
|
|
<button
|
|
onClick={resetErrorBoundary}
|
|
className="rounded bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700"
|
|
>
|
|
Try Again
|
|
</button>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="rounded border border-red-600 px-4 py-2 text-red-600 transition-colors hover:bg-red-50"
|
|
>
|
|
Reload Page
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DetailedErrorFallback;
|