feat: Integrate ErrorBoundary with Analytics Client

[akhun-web3]

Overview: This change integrates the ErrorBoundary component with the analytics client to report caught JavaScript errors, improving error visibility.

Changes

• Imports recordAnalyticsEvent from src/lib/analytics-client.ts.
• Calls recordAnalyticsEvent within componentDidCatch in src/components/common/ErrorBoundary.tsx.
• Error details (message, stack, component stack) are sent as a payload to the analytics service.
• Ensures error reporting is non-blocking, preserving existing user experience.

Summary by CodeRabbit

• Chores
  • Enhanced error diagnostics to capture additional information (error messages, stack traces, and component details) when errors occur in the application.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The change adds runtime analytics instrumentation to the ErrorBoundary component. When an error is caught, the componentDidCatch method now logs error details (message, stack, componentStack) via a recordAnalyticsEvent call. No modifications to error handling or rendering logic.

Changes

Cohort / File(s)	Summary
ErrorBoundary analytics instrumentation src/components/common/ErrorBoundary.tsx	Imports recordAnalyticsEvent and invokes it in componentDidCatch to capture and log error metadata when exceptions are caught

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Areas for attention:
  • Verify that recordAnalyticsEvent is correctly implemented and available (related to PR #104)
  • Confirm the error details being logged (message, stack, componentStack) are appropriate and non-sensitive
  • Check that the analytics call does not introduce performance overhead or delay error handling

Possibly related PRs

• Feat: Batch and debounce analytics events #104: Introduces the recordAnalyticsEvent implementation that this PR directly depends on and calls
• feat: Improve ErrorBoundary with logging and user-friendly alerts #77: Also modifies ErrorBoundary.tsx with additional error logging and debug UI, potentially overlapping scope
• feat: Implement global ErrorBoundary for app root #65: Wires the ErrorBoundary into the app root, establishing the context where this analytics instrumentation will execute

Suggested reviewers

• fehranbit

Poem

🐰 A little rabbit hops with glee,
Analytics in errors, now we see!
When crashes tumble through the night,
We'll log each stack with shining light! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'feat: Integrate ErrorBoundary with Analytics Client' directly and clearly summarizes the main change: integrating the ErrorBoundary component with analytics functionality to report caught errors.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/error-boundary-analytics

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d86a12 and 4f06bb7.

📒 Files selected for processing (1)

• src/components/common/ErrorBoundary.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/common/ErrorBoundary.tsx (1)

src/lib/analytics-client.ts (1)

• recordAnalyticsEvent (17-73)

[coderabbitai]

⚠️ 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.