77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface ErrorBoundaryState {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
}
|
|
|
|
interface ErrorBoundaryProps {
|
|
children: React.ReactNode;
|
|
fallback?: React.ReactNode;
|
|
onReset?: () => void;
|
|
}
|
|
|
|
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
constructor(props: ErrorBoundaryProps) {
|
|
super(props);
|
|
this.state = { hasError: false, error: null };
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
|
return { hasError: true, error };
|
|
}
|
|
|
|
handleReset = () => {
|
|
this.setState({ hasError: false, error: null });
|
|
this.props.onReset?.();
|
|
};
|
|
|
|
override render() {
|
|
if (this.state.hasError) {
|
|
if (this.props.fallback) return this.props.fallback;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-layout-page p-6 text-center animate-fade-in">
|
|
{/* Animated icon */}
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 bg-destructive/20 rounded-full blur-2xl animate-pulse" />
|
|
<div className="relative bg-destructive/10 rounded-full p-6">
|
|
<AlertTriangle className="h-12 w-12 text-destructive" />
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-heading-2 mb-2">Something went wrong</h2>
|
|
<p className="text-muted-foreground max-w-md mb-6">
|
|
An unexpected error occurred. This has been logged and we'll look into it.
|
|
</p>
|
|
|
|
{/* Error details (collapsible) */}
|
|
{this.state.error && (
|
|
<details className="mb-6 w-full max-w-md text-left">
|
|
<summary className="text-caption cursor-pointer hover:text-foreground transition-colors">
|
|
Technical details
|
|
</summary>
|
|
<pre className="mt-2 p-3 rounded-lg bg-muted text-xs text-muted-foreground overflow-auto max-h-32">
|
|
{this.state.error.message}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3">
|
|
<Button onClick={this.handleReset} className="gap-2">
|
|
<RefreshCw className="h-4 w-4" /> Try again
|
|
</Button>
|
|
<Button variant="outline" onClick={() => window.location.href = '/'} className="gap-2">
|
|
<Home className="h-4 w-4" /> Go home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|