fix: add route-level error boundary fallback (#120)

src/App.js

@@ -27,12 +27,14 @@ function App() {
         },
       }}></Toaster>
       <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-        <Routes>
-          <Route path='/' element={<LandingPage />}></Route>
-<Route path='/join' element={<Home />}></Route>
-          <Route path='/editor/:roomId' element={<EditorPage />}></Route>
-          <Route path='*' element={<NotFound/>}></Route>
-        </Routes>
+        <ErrorBoundary>
+          <Routes>
+            <Route path='/' element={<LandingPage />}></Route>
+            <Route path='/join' element={<Home />}></Route>
+            <Route path='/editor/:roomId' element={<EditorPage />}></Route>
+            <Route path='*' element={<NotFound/>}></Route>
+          </Routes>
+        </ErrorBoundary>
       </BrowserRouter>
     </ErrorBoundary>
   );

src/App.test.js

@@ -1,8 +1,29 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import ErrorBoundary from './components/ErrorBoundary';
 
 test('renders landing page call to action', () => {
   render(<App />);
   const buttonElement = screen.getByText(/Get Started/i);
   expect(buttonElement).toBeInTheDocument();
 });
+
+test('renders the error boundary fallback UI when a child throws', () => {
+  const Thrower = () => {
+    throw new Error('Boom');
+  };
+
+  const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  render(
+    <ErrorBoundary>
+      <Thrower />
+    </ErrorBoundary>
+  );
+
+  expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument();
+  expect(screen.getByText(/Boom/i)).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: /Go Home/i })).toBeInTheDocument();
+
+  consoleErrorSpy.mockRestore();
+});

src/components/ErrorBoundary.js

@@ -14,28 +14,35 @@ class ErrorBoundary extends React.Component {
     console.error('ErrorBoundary caught:', error, errorInfo);
   }
 
+  handleGoHome = () => {
+    window.location.href = '/';
+  };
+
   render() {
     if (this.state.hasError) {
       return (
         <div
           style={{
+            minHeight: '100vh',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            height: '100vh',
-            fontFamily: 'monospace',
             gap: '1rem',
-            textAlign: 'center',
             padding: '2rem',
+            textAlign: 'center',
+            fontFamily: 'monospace',
+            background: '#0f172a',
+            color: '#e5e7eb',
           }}
         >
           <h2>Something went wrong</h2>
-          <p style={{ color: '#666', maxWidth: '500px' }}>
+          <p style={{ maxWidth: '32rem', color: '#9ca3af' }}>
             {this.state.error?.message || 'An unexpected error occurred.'}
           </p>
           <button
-            onClick={() => (window.location.href = '/')}
+            type="button"
+            onClick={this.handleGoHome}
             style={{
               padding: '0.75rem 1.5rem',
               background: '#4aed88',
@@ -44,6 +51,7 @@ class ErrorBoundary extends React.Component {
               cursor: 'pointer',
               fontSize: '1rem',
               fontWeight: 600,
+              color: '#052e16',
             }}
           >
             Go Home