feat: add React ErrorBoundary to prevent application crashes

frontend/src/components/shared/ErrorBoundary.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+    this.setState({ errorInfo });
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+    window.location.href = '/';
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-slate-900 text-white p-6">
+          <div className="max-w-xl w-full bg-slate-800 rounded-2xl p-8 shadow-2xl border border-slate-700 text-center">
+            <div className="w-16 h-16 bg-red-500/10 text-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
+              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+
+            <h1 className="text-2xl font-bold mb-2">Something went wrong</h1>
+            <p className="text-slate-400 mb-6 text-sm">
+              CodeLens encountered an unexpected error. Don't worry, your progress has not been lost.
+            </p>
+
+            {this.state.error && (
+              <div className="bg-slate-950/80 rounded-lg p-4 text-left mb-6 font-mono text-xs text-red-400 overflow-auto max-h-40 border border-slate-900">
+                <p className="font-semibold mb-1">{this.state.error.toString()}</p>
+                {this.state.errorInfo && (
+                  <pre className="whitespace-pre-wrap">{this.state.errorInfo.componentStack}</pre>
+                )}
+              </div>
+            )}
+
+            <div className="flex gap-4 justify-center">
+              <button
+                onClick={this.handleReset}
+                className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-lg transition duration-200"
+              >
+                Go to Homepage
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-6 py-2.5 bg-slate-700 hover:bg-slate-650 text-white font-semibold rounded-lg transition duration-200"
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/main.jsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'
+import ErrorBoundary from './components/shared/ErrorBoundary'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>,
 )