import { Component, type ReactNode, type ErrorInfo } from 'react';
interface ErrorBoundaryProps {
children: ReactNode;
fallback?: ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
error: Error | null;
}
/**
* Error boundary component to catch and display errors in child components
*/
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
console.error('ErrorBoundary caught an error:', error, errorInfo);
}
render(): ReactNode {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return (
<div className="df-error-boundary">
<div className="df-error-boundary-content">
<h3 className="df-error-boundary-title">Something went wrong</h3>
<p className="df-error-boundary-message">
{this.state.error?.message || 'An unexpected error occurred'}
</p>
<button
className="df-error-boundary-button"
onClick={() => this.setState({ hasError: false, error: null })}
>
Try again
</button>
</div>
</div>
);
}
return this.props.children;
}
}