feat: add ErrorBoundary around route tree

eslint.config.js

@@ -51,6 +51,8 @@ export default tseslint.config(
       'sonarjs/no-ignored-return': 'warn',
       'sonarjs/no-ignored-exceptions': 'warn',
       'sonarjs/prefer-read-only-props': 'warn',
+      // React class render() legitimately returns JSX | ReactNode on different paths
+      'sonarjs/function-return-type': 'warn',
     },
   },
   {

packages/web/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 import { AuthProvider, useAuth } from './AuthContext';
+import ErrorBoundary from './ErrorBoundary';
 import Home from './pages/Home';
 import MovieDetail from './pages/MovieDetail';
 import SeatSelection from './pages/SeatSelection';
@@ -38,14 +39,16 @@ function App() {
       <AuthProvider>
         <Header />
         <div style={{ padding: '20px' }}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/movie/:id" element={<MovieDetail />} />
-            <Route path="/seats/:showtimeId" element={<SeatSelection />} />
-            <Route path="/booking-confirmation/:bookingId" element={<BookingConfirmation />} />
-            <Route path="/bookings" element={<MyBookings />} />
-            <Route path="/login" element={<Login />} />
-          </Routes>
+          <ErrorBoundary>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/movie/:id" element={<MovieDetail />} />
+              <Route path="/seats/:showtimeId" element={<SeatSelection />} />
+              <Route path="/booking-confirmation/:bookingId" element={<BookingConfirmation />} />
+              <Route path="/bookings" element={<MyBookings />} />
+              <Route path="/login" element={<Login />} />
+            </Routes>
+          </ErrorBoundary>
         </div>
       </AuthProvider>
     </BrowserRouter>

packages/web/src/ErrorBoundary.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import ErrorBoundary from './ErrorBoundary'
+
+function Bomb(): never {
+  throw new Error('Test explosion')
+}
+
+function Safe() {
+  return <div>All good</div>
+}
+
+// Suppress the expected console.error noise from ErrorBoundary.componentDidCatch
+beforeEach(() => {
+  vi.spyOn(console, 'error').mockImplementation(() => undefined)
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('ErrorBoundary', () => {
+  it('renders children when no error occurs', () => {
+    render(
+      <ErrorBoundary>
+        <Safe />
+      </ErrorBoundary>
+    )
+    expect(screen.getByText('All good')).toBeInTheDocument()
+  })
+
+  it('renders the fallback UI when a child throws', () => {
+    render(
+      <ErrorBoundary>
+        <Bomb />
+      </ErrorBoundary>
+    )
+    expect(screen.getByText('Something went wrong.')).toBeInTheDocument()
+    expect(screen.getByText(/unexpected error occurred/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument()
+  })
+
+  it('does not re-throw the error to the parent', () => {
+    expect(() =>
+      render(
+        <ErrorBoundary>
+          <Bomb />
+        </ErrorBoundary>
+      )
+    ).not.toThrow()
+  })
+
+  it('resets error state and re-renders children when "Try again" is clicked', async () => {
+    let shouldThrow = true
+
+    function MaybeThrow() {
+      if (shouldThrow) throw new Error('Conditional error')
+      return <div>Recovered</div>
+    }
+
+    render(
+      <ErrorBoundary>
+        <MaybeThrow />
+      </ErrorBoundary>
+    )
+
+    expect(screen.getByText('Something went wrong.')).toBeInTheDocument()
+
+    shouldThrow = false
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    expect(screen.getByText('Recovered')).toBeInTheDocument()
+  })
+})

packages/web/src/ErrorBoundary.tsx

@@ -0,0 +1,47 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    console.error('ErrorBoundary caught an error:', error, info.componentStack);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div style={{ textAlign: 'center', padding: '60px 20px' }}>
+          <h2>Something went wrong.</h2>
+          <p style={{ color: '#666', marginTop: '8px' }}>
+            An unexpected error occurred. Please refresh the page to try again.
+          </p>
+          <button
+            style={{ marginTop: '20px' }}
+            onClick={() => this.setState({ hasError: false })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;