81 lines
2.5 KiB
TypeScript
81 lines
2.5 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;
|