small fix, don't worry about it

app/frontend/src/shared/components/ErrorBoundary.tsx

@@ -0,0 +1,102 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    // Call optional error handler
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+
+    // Log to error tracking service (e.g., Sentry)
+    if (import.meta.env.PROD) {
+      // TODO: Send to error tracking service
+      console.error('Production error:', {
+        error: error.toString(),
+        componentStack: errorInfo.componentStack,
+      });
+    }
+  }
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen bg-[var(--bg-void)] flex items-center justify-center p-4">
+          <div className="max-w-md w-full bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg p-6 space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-xl font-semibold text-[var(--text-primary)]">
+                Something went wrong
+              </h2>
+              <p className="text-sm text-[var(--text-secondary)]">
+                An unexpected error occurred. Please try refreshing the page.
+              </p>
+            </div>
+
+            {import.meta.env.DEV && this.state.error && (
+              <div className="bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded p-3">
+                <p className="text-xs font-mono text-[var(--text-error)] break-all">
+                  {this.state.error.toString()}
+                </p>
+              </div>
+            )}
+
+            <div className="flex gap-2">
+              <button
+                onClick={this.handleReset}
+                className="flex-1 px-4 py-2 bg-[var(--bg-accent)] text-[var(--text-primary)] rounded hover:opacity-90 transition-opacity"
+              >
+                Try Again
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="flex-1 px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded hover:bg-[var(--bg-tertiary)] transition-colors"
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}