diff --git a/viz/src/App.tsx b/viz/src/App.tsx index c1905da..7c8e202 100644 --- a/viz/src/App.tsx +++ b/viz/src/App.tsx @@ -2,15 +2,18 @@ import "./App.css"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import LandingPage from "./components/LandingPage"; import SAEVisualizer from "./SAEVisualizer"; +import ErrorBoundary from "./components/ErrorBoundary"; function App() { return ( - - - } /> - } /> - - + + + + } /> + } /> + + + ); } diff --git a/viz/src/components/ErrorBoundary.tsx b/viz/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..c4cfea2 --- /dev/null +++ b/viz/src/components/ErrorBoundary.tsx @@ -0,0 +1,43 @@ +import { Component, ErrorInfo, ReactNode } from "react"; + +interface Props { + children: ReactNode; + fallback?: ReactNode; +} + +interface State { + hasError: boolean; + error?: Error; +} + +class ErrorBoundary extends Component { + public state: State = { + hasError: false, + }; + + public static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error("Error caught by boundary:", error); + console.error("Error info:", errorInfo); + } + + public render() { + if (this.state.hasError) { + return ( + this.props.fallback || ( +
+

Something went wrong

+

{this.state.error?.message}

+
+ ) + ); + } + + return this.props.children; + } +} + +export default ErrorBoundary;