68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { AlertTriangle, RefreshCw, Home, Bug } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
interface ErrorBoundaryProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}
|
|
|
|
export default function ErrorBoundary({ error, reset }: ErrorBoundaryProps) {
|
|
useEffect(() => {
|
|
// Log error to console for debugging
|
|
console.error("ErrorBoundary caught an error:", error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 bg-background">
|
|
<Card className="w-full max-w-lg">
|
|
<CardHeader className="text-center pb-2">
|
|
<div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
|
|
<AlertTriangle className="w-8 h-8 text-red-500" />
|
|
</div>
|
|
<CardTitle className="text-xl sm:text-2xl">Something went wrong</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<p className="text-muted-foreground text-center">
|
|
We apologize for the inconvenience. An unexpected error has occurred.
|
|
</p>
|
|
|
|
{error.message && (
|
|
<div className="bg-muted rounded-lg p-3 text-sm">
|
|
<p className="font-medium text-red-500 flex items-center gap-2">
|
|
<Bug className="w-4 h-4" />
|
|
Error details:
|
|
</p>
|
|
<p className="text-muted-foreground mt-1 break-all font-mono text-xs">
|
|
{error.message}
|
|
</p>
|
|
{error.digest && (
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Error ID: {error.digest}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2 pt-2">
|
|
<Button onClick={reset} variant="outline" className="flex-1">
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Try Again
|
|
</Button>
|
|
<Link href="/" className="flex-1">
|
|
<Button className="w-full">
|
|
<Home className="w-4 h-4 mr-2" />
|
|
Back to Dashboard
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|