diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..4e0c8ac --- /dev/null +++ b/frontend/src/components/ErrorBoundary.tsx @@ -0,0 +1,44 @@ +import { Component, type ErrorInfo, type ReactNode } from 'react'; + +interface Props { + children: ReactNode; +} + +interface State { + hasError: boolean; + error: Error | null; +} + +export class ErrorBoundary extends Component { + state: State = { hasError: false, error: null }; + + static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error('ErrorBoundary caught:', error, errorInfo); + } + + render() { + if (this.state.hasError) { + return ( +
+
+

Something went wrong

+

+ {this.state.error?.message ?? 'An unexpected error occurred.'} +

+ +
+
+ ); + } + return this.props.children; + } +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index b93818c..f3bab93 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -2,6 +2,7 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App.tsx'; +import { ErrorBoundary } from './components/ErrorBoundary.tsx'; import './index.css'; import { AuthProvider } from "react-oidc-context"; @@ -12,10 +13,12 @@ startCollector(); createRoot(document.getElementById('root')!).render( - - - - - + + + + + + + , )