45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";
|
|
import { Button } from "./components/ui/button";
|
|
|
|
import { AlertTriangleIcon, RefreshCwIcon } from "lucide-react";
|
|
|
|
interface ErrorFallbackProps {
|
|
error: { message: string };
|
|
resetErrorBoundary: () => void;
|
|
}
|
|
|
|
export const ErrorFallback = ({ error, resetErrorBoundary }: ErrorFallbackProps) => {
|
|
// When encountering an error in the development mode, rethrow it and don't display the boundary.
|
|
// The parent UI will take care of showing a more helpful dialog.
|
|
if (process.env.NODE_ENV === 'development') throw error;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
<Alert variant="destructive" className="mb-6">
|
|
<AlertTriangleIcon />
|
|
<AlertTitle>This spark has encountered a runtime error</AlertTitle>
|
|
<AlertDescription>
|
|
Something unexpected happened while running the application. The error details are shown below. Contact the spark author and let them know about this issue.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="bg-card border rounded-lg p-4 mb-6">
|
|
<h3 className="font-semibold text-sm text-muted-foreground mb-2">Error Details:</h3>
|
|
<pre className="text-xs text-destructive bg-muted/50 p-3 rounded border overflow-auto max-h-32">
|
|
{error.message}
|
|
</pre>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={resetErrorBoundary}
|
|
className="w-full"
|
|
variant="outline"
|
|
>
|
|
<RefreshCwIcon />
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|