+ );
+};
+
+// --- Error Boundary Class ---
+
+export class ErrorBoundary extends Component {
+ 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) {
+ console.error("Uncaught error:", error, errorInfo);
+ }
+
+ handleReset = () => {
+ this.setState({ hasError: false, error: null });
+ // Optional: Only reload if strictly necessary, but resetting state is often enough for React
+ // If the error persists, the user can refresh the browser.
+ // For now, let's just reset the state to try re-rendering.
+ // However, if the error is in the initial render of the component tree, it might loop.
+ // A safe bet for a "global" error boundary is often a full reload if simple reset fails.
+ // Let's stick to state reset first.
+ window.location.reload();
+ };
+
+ render() {
+ if (this.state.hasError) {
+ // We need to render the Fallback wrapped in a Theme consumer equivalent
+ // Since ErrorFallback is a functional component using hooks, we can just render it.
+ // But ErrorBoundary is inside ThemeProvider in App.tsx, so the context is available.
+ return ;
+ }
+
+ return this.props.children;
+ }
+}