Skip to content

feat: Integrate ErrorBoundary with Analytics Client #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fehranbit merged 1 commit into from
Dec 17, 2025
Merged

feat: Integrate ErrorBoundary with Analytics Client #129

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/common/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { BasicAlert } from './BasicAlert';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import { IoIosArrowDown } from 'react-icons/io';
import { recordAnalyticsEvent } from '@/lib/analytics-client';

interface ErrorBoundaryProps {
children: React.ReactNode;
Expand All @@ -27,6 +28,11 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
console.error('ErrorBoundary caught an error:', error, errorInfo);
recordAnalyticsEvent('error_boundary_catch', {
message: error.message,
stack: error.stack,
componentStack: errorInfo.componentStack,
});
Comment on lines +31 to +35

@coderabbitai coderabbitai Bot Dec 17, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

PII and sensitive data may be logged without sanitization.

Error messages, stack traces, and component stacks can contain personally identifiable information (user input, email addresses, internal file paths, component props with sensitive data). Logging these details to an analytics service without scrubbing or user consent poses compliance risks under GDPR, CCPA, and similar regulations.

Consider sanitizing or redacting sensitive data before sending to analytics, or ensure your analytics pipeline has appropriate safeguards in place.

🤖 Prompt for AI Agents 
In src/components/common/ErrorBoundary.tsx around lines 31-35, the code sends
raw error.message, error.stack and errorInfo.componentStack to analytics which
may contain PII; create and call a sanitizeErrorData utility before logging that
redacts emails, IPs, file paths, long strings and component prop values (or
strips component props entirely), truncates and/or hashes identifiers, and
removes or masks any matched sensitive patterns; ensure only allowlisted fields
(error name, truncated message, sanitized stack/componentStack or boolean flags)
are sent and gate logging behind user consent/opt-out where applicable, then
pass the sanitized object to recordAnalyticsEvent.

🛠️ Refactor suggestion | 🟠 Major

Wrap analytics call in try-catch for defensive error handling.

While recordAnalyticsEvent appears to handle errors internally, componentDidCatch is a critical error-handling path and should never throw. Wrap the analytics call in a try-catch block to ensure that any unexpected failure in the analytics layer does not break the error boundary itself.

Apply this diff:

   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error('ErrorBoundary caught an error:', error, errorInfo);
-    recordAnalyticsEvent('error_boundary_catch', {
-      message: error.message,
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-    });
+    try {
+      recordAnalyticsEvent('error_boundary_catch', {
+        message: error.message,
+        stack: error.stack,
+        componentStack: errorInfo.componentStack,
+      });
+    } catch (analyticsError) {
+      console.error('Failed to record error boundary analytics:', analyticsError);
+    }
   }
🤖 Prompt for AI Agents 
In src/components/common/ErrorBoundary.tsx around lines 31 to 35, wrap the call
to recordAnalyticsEvent(...) in a try-catch so that any exceptions thrown by the
analytics layer cannot propagate from componentDidCatch; inside the try call
recordAnalyticsEvent with the same payload (message, stack, componentStack) and
in the catch block swallow the error or minimally log it (e.g., console.error)
so the error boundary remains stable.

}

render() {
Expand Down
Loading