88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import React, { Component, ErrorInfo, ReactNode } from "react";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AlertTriangle, RefreshCw } from "lucide-react";
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error?: Error;
|
|
errorInfo?: ErrorInfo;
|
|
}
|
|
|
|
class ErrorBoundary extends Component<Props, State> {
|
|
public state: State = {
|
|
hasError: false,
|
|
};
|
|
|
|
public static getDerivedStateFromError(error: Error): State {
|
|
return { hasError: true, error };
|
|
}
|
|
|
|
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
console.error("Uncaught error:", error, errorInfo);
|
|
this.setState({ error, errorInfo });
|
|
}
|
|
|
|
private handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
private handleReset = () => {
|
|
this.setState({ hasError: false, error: undefined, errorInfo: undefined });
|
|
};
|
|
|
|
public render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 bg-background">
|
|
<div className="max-w-md w-full space-y-4">
|
|
<Alert className="border-destructive/50 text-destructive">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertDescription>
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold">Something went wrong</h3>
|
|
<p className="text-sm">
|
|
An error occurred while rendering the application. This is
|
|
usually temporary.
|
|
</p>
|
|
{this.state.error && (
|
|
<details className="text-xs opacity-70">
|
|
<summary className="cursor-pointer">
|
|
Error details
|
|
</summary>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words">
|
|
{this.state.error.message}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={this.handleReset}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
Try Again
|
|
</Button>
|
|
<Button onClick={this.handleReload} className="flex-1">
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
Reload Page
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary;
|