From 8df3af2408b5906ad0c68581160771bf6adb5c74 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 6 Aug 2025 02:24:12 +0000
Subject: [PATCH] Add error boundary for better error handling

cgen-f1de5e4d92a74cdea2ba31b82a07c3c1
---
 client/components/ErrorBoundary.tsx | 81 +++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 client/components/ErrorBoundary.tsx

diff --git a/client/components/ErrorBoundary.tsx b/client/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..8d4a6379
--- /dev/null
+++ b/client/components/ErrorBoundary.tsx
@@ -0,0 +1,81 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+    this.setState({ error, errorInfo });
+  }
+
+  private handleReload = () => {
+    window.location.reload();
+  };
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4 bg-background">
+          <div className="max-w-md w-full space-y-4">
+            <Alert className="border-destructive/50 text-destructive">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-2">
+                  <h3 className="font-semibold">Something went wrong</h3>
+                  <p className="text-sm">
+                    An error occurred while rendering the application. This is usually temporary.
+                  </p>
+                  {this.state.error && (
+                    <details className="text-xs opacity-70">
+                      <summary className="cursor-pointer">Error details</summary>
+                      <pre className="mt-2 whitespace-pre-wrap break-words">
+                        {this.state.error.message}
+                      </pre>
+                    </details>
+                  )}
+                </div>
+              </AlertDescription>
+            </Alert>
+            
+            <div className="flex gap-2">
+              <Button onClick={this.handleReset} variant="outline" className="flex-1">
+                Try Again
+              </Button>
+              <Button onClick={this.handleReload} className="flex-1">
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Reload Page
+              </Button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;