AnalyticsErrorBoundary

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

ReactNode

required

The component tree to wrap and protect with error boundary.

ReactNode

Component to display when an error occurs. Defaults to a simple error message.

(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

Core API

Hooks

Components

Types

Overview

Props

Usage

Basic Usage

Custom Fallback UI

With Custom Error Handler

Nested Error Boundaries

Tracked Error Data

Behavior

Best Practices

Strategic Placement

Graceful Degradation

Use Cases

​Overview

​Props

​Usage

​Basic Usage

​Custom Fallback UI

​With Custom Error Handler

​Nested Error Boundaries

​Tracked Error Data

​Behavior

​Best Practices

​Strategic Placement

​Graceful Degradation

​Use Cases

Overview

Props

Usage

Basic Usage

Custom Fallback UI

With Custom Error Handler

Nested Error Boundaries

Tracked Error Data

Behavior

Best Practices

Strategic Placement

Graceful Degradation

Use Cases