54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
import { Component, ErrorInfo, ReactNode } from 'react';
|
||
|
|
import { AlertCircle } from 'lucide-react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
children: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface State {
|
||
|
|
hasError: boolean;
|
||
|
|
error: Error | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export class ErrorBoundary extends Component<Props, State> {
|
||
|
|
public state: State = {
|
||
|
|
hasError: false,
|
||
|
|
error: null
|
||
|
|
};
|
||
|
|
|
||
|
|
public static getDerivedStateFromError(error: Error): State {
|
||
|
|
return { hasError: true, error };
|
||
|
|
}
|
||
|
|
|
||
|
|
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
|
|
console.error('Uncaught error:', error, errorInfo);
|
||
|
|
}
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
if (this.state.hasError) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
||
|
|
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
||
|
|
<div className="flex items-center justify-center mb-6">
|
||
|
|
<AlertCircle className="text-red-500" size={48} />
|
||
|
|
</div>
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900 text-center mb-4">
|
||
|
|
Something went wrong
|
||
|
|
</h1>
|
||
|
|
<p className="text-gray-600 text-center mb-6">
|
||
|
|
We apologize for the inconvenience. Please try refreshing the page or contact support if the problem persists.
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
onClick={() => window.location.reload()}
|
||
|
|
className="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors"
|
||
|
|
>
|
||
|
|
Refresh Page
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.props.children;
|
||
|
|
}
|
||
|
|
}
|