Harden components: add ErrorBoundary, null-safe rendering

2026-03-21 17:51:07 -04:00
parent 0ce63bacd7
commit fe6ac23329
6 changed files with 109 additions and 42 deletions
--- a/web/client/src/components/ErrorBoundary.jsx
+++ b/web/client/src/components/ErrorBoundary.jsx
@@ -0,0 +1,54 @@
+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, errorInfo) {
+    console.error('ErrorBoundary caught:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          padding: '2rem',
+          background: '#1a1a2e',
+          color: '#ff6b6b',
+          borderRadius: '8px',
+          margin: '1rem',
+          fontFamily: 'monospace',
+        }}>
+          <h2>⚠️ Something went wrong</h2>
+          <p style={{ color: '#ccc' }}>
+            {this.state.error?.message || 'Unknown error'}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+            style={{
+              padding: '0.5rem 1rem',
+              background: '#4a7c59',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+            }}
+          >
+            🔄 Try Again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;