Skip to main content

​
Overview

The AnalyticsErrorBoundary component catches JavaScript errors in its child component tree and automatically tracks them to your analytics. It prevents your app from crashing while giving you visibility into production errors.

​
Props

​
children
ReactNode
required
The component tree to wrap and protect with error boundary.
​
fallback
ReactNode
Component to display when an error occurs. Defaults to a simple error message.
​
onError
(error: Error, errorInfo: React.ErrorInfo) => void
Custom error handler function called when an error is caught. Receives the error object and React error info including component stack.

​
Usage

​
Basic Usage

import { AnalyticsErrorBoundary } from 'mentiq-sdk';

function App() {
  return (
    <AnalyticsErrorBoundary>
      <YourApp />
    </AnalyticsErrorBoundary>
  );
}

​
Custom Fallback UI

<AnalyticsErrorBoundary
  fallback={
    <div className="error-state">
      <h2>Oops! Something went wrong</h2>
      <p>We've been notified and are working on a fix.</p>
      <button onClick={() => window.location.reload()}>
        Reload Page
      </button>
    </div>
  }
>
  <Dashboard />
</AnalyticsErrorBoundary>

​
With Custom Error Handler

<AnalyticsErrorBoundary
  onError={(error, errorInfo) => {
    // Send to external error tracking service
    console.error('Error caught:', error);
    console.error('Component stack:', errorInfo.componentStack);
    
    // Show user notification
    showNotification('An error occurred', 'error');
  }}
  fallback={<ErrorFallback />}
>
  <ComplexFeature />
</AnalyticsErrorBoundary>

​
Nested Error Boundaries

function App() {
  return (
    <AnalyticsErrorBoundary fallback={<AppError />}>
      <Layout>
        <Sidebar />
        <AnalyticsErrorBoundary fallback={<ContentError />}>
          <MainContent />
        </AnalyticsErrorBoundary>
      </Layout>
    </AnalyticsErrorBoundary>
  );
}

​
Tracked Error Data

When an error is caught, the following data is automatically tracked:
  • Error message and stack trace
  • Component stack trace
  • error_boundary: true flag
  • Timestamp of when error occurred
  • Any additional properties from your custom handler

​
Behavior

  • Catches errors during rendering, in lifecycle methods, and in constructors
  • Does NOT catch errors in event handlers (use try-catch for those)
  • Does NOT catch errors in asynchronous code (setTimeout, promises)
  • Does NOT catch errors during server-side rendering
  • Automatically tracks error to analytics before calling custom handler
  • Displays fallback UI when error occurs
  • Prevents error from propagating to parent components

​
Best Practices

​
Strategic Placement

Place error boundaries at strategic points in your component tree: 
// Protect entire app
<AnalyticsErrorBoundary fallback={<AppCrashed />}>
  <App />
</AnalyticsErrorBoundary>

// Protect specific features
<AnalyticsErrorBoundary fallback={<FeatureUnavailable />}>
  <ExpensiveFeature />
</AnalyticsErrorBoundary>

​
Graceful Degradation

<AnalyticsErrorBoundary
  fallback={
    <div>
      <BasicVersion />  {/* Simpler version that's less likely to fail */}
    </div>
  }
>
  <AdvancedFeature />
</AnalyticsErrorBoundary>

​
Use Cases

  • Prevent entire app crashes from isolated component errors
  • Track production errors automatically
  • Provide graceful fallback UIs
  • Monitor error rates by feature or page
  • Debug issues with full component stack traces
  • Improve user experience during errors

Build docs developers (and LLMs) love

Get started for freeTalk to us