Client: add ErrorBoundary to avoid blank screen and surface errors; rebuild

client/src/ErrorBoundary.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    // Log to console; could later POST to /api if needed
+    // eslint-disable-next-line no-console
+    console.error('App error:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
+          <h2>Something went wrong.</h2>
+          <p>Please check the browser console for details.</p>
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <pre style={{ whiteSpace: 'pre-wrap', color: '#b71c1c' }}>
+              {String(this.state.error)}
+            </pre>
+          )}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

client/src/index.js

@@ -2,12 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import ErrorBoundary from './ErrorBoundary';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );