// components/ErrorBoundary.tsx
import { Component } from 'react';
import type { ErrorInfo, ReactNode } from 'react';
interface Props {
children: ReactNode;
fallback?: ReactNode;
}
interface State {
hasError: boolean;
error?: Error;
}
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('[ErrorBoundary] Uncaught error:', error, errorInfo);
}
public render() {
if (this.state.hasError) {
return this.props.fallback || (
<div className="bg-red-900/20 border border-red-500/30 rounded-lg p-4 m-4">
<div className="flex items-start">
<span className="text-red-400 mr-2">⚠️</span>
<div>
<h4 className="text-red-300 font-semibold text-sm mb-1">Component Error</h4>
<p className="text-red-200 text-sm">
{this.state.error?.message || 'An unexpected error occurred'}
</p>
<button
onClick={() => this.setState({ hasError: false, error: undefined })}
className="mt-2 text-xs text-red-400 hover:text-red-300 underline"
>
Try Again
</button>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
