From 79e228ce88cfe6395a96a50a44cf75edec734262 Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Thu, 31 Jul 2025 14:22:06 +0530
Subject: [PATCH] feat(analytics): add error boundary component for UI error
 tracking

- Create AnalyticsErrorBoundary component to catch and track UI errors
- Implement automatic error reporting to analytics on component failures
- Provide customizable fallback UI for error states
- Add withAnalyticsErrorBoundary HOC for easy component wrapping
- Include error recovery functionality with reset capability
- Track component stack information for debugging

This ensures all UI errors are captured and reported for better
application stability monitoring and debugging.
---
 src/components/AnalyticsErrorBoundary.tsx | 87 +++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/components/AnalyticsErrorBoundary.tsx

diff --git a/src/components/AnalyticsErrorBoundary.tsx b/src/components/AnalyticsErrorBoundary.tsx
new file mode 100644
index 0000000..41ffd4e
--- /dev/null
+++ b/src/components/AnalyticsErrorBoundary.tsx
@@ -0,0 +1,87 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { eventBuilders, analytics } from '@/lib/analytics';
+
+interface Props {
+  children: ReactNode;
+  fallback?: (error: Error, reset: () => void) => ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error boundary component that tracks UI errors to analytics
+ */
+export class AnalyticsErrorBoundary 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) {
+    // Track UI error to analytics
+    const event = eventBuilders.uiError({
+      component_name: errorInfo.componentStack?.split('\n')[0] || 'Unknown',
+      error_type: error.name || 'UnknownError',
+      user_action: undefined, // Could be enhanced with context
+    });
+    
+    analytics.track(event.event, event.properties);
+    
+    // Log to console for debugging
+    console.error('UI Error caught by boundary:', error, errorInfo);
+  }
+
+  reset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.reset);
+      }
+      
+      // Default fallback UI
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[200px] p-8 text-center">
+          <h2 className="text-lg font-semibold text-destructive mb-2">
+            Something went wrong
+          </h2>
+          <p className="text-sm text-muted-foreground mb-4">
+            {this.state.error.message}
+          </p>
+          <button
+            onClick={this.reset}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * Hook to wrap components with analytics error tracking
+ */
+export function withAnalyticsErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  fallback?: (error: Error, reset: () => void) => ReactNode
+) {
+  return (props: P) => (
+    <AnalyticsErrorBoundary fallback={fallback}>
+      <Component {...props} />
+    </AnalyticsErrorBoundary>
+  );
+}
\ No newline at end of file