ErrorManager

Centralized error reporting for ErrorBoundary components.

Setup

Sentry Integration

import { errorManager } from './ErrorBoundary';

errorManager.configure({
  enabled: true,
  sentry: {
    dsn: 'https://your-sentry-dsn@sentry.io/project-id',
    environment: 'production',
    release: '1.0.0',
    sampleRate: 1.0,
    ignoreErrors: ['ResizeObserver loop limit exceeded'],
  },
});

Custom API Integration

errorManager.configure({
  enabled: true,
  customAPI: {
    endpoint: 'https://api.yourapp.com/errors',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
    transformPayload: (report) => ({
      message: report.error.message,
      stack: report.error.stack,
      level: report.severity,
      timestamp: report.timestamp,
    }),
  },
});

Custom Reporter

errorManager.configure({
  enabled: true,
  reporters: [
    {
      name: 'CustomLogger',
      isEnabled: () => true,
      captureError: async (report) => {
        console.error('Error:', report.error);
      },
    },
  ],
});

Multiple Reporters

errorManager.configure({
  enabled: true,
  sentry: { dsn: 'your-dsn' },
  customAPI: { endpoint: 'your-endpoint' },
  reporters: [customReporter],
});

Hooks

beforeReport

errorManager.configure({
  beforeReport: (report) => {
    // Filter errors
    if (report.error.message.includes('ResizeObserver')) {
      return null; // Skip reporting
    }

    // Enrich with user data
    report.context = {
      ...report.context,
      user: { id: getCurrentUserId() },
      tags: { feature: 'checkout' },
    };

    return report;
  },
});

onReportSuccess / onReportFailure

errorManager.configure({
  onReportSuccess: (report) => {
    console.log('Error reported successfully');
  },
  onReportFailure: (error, report) => {
    console.error('Failed to report error:', error);
  },
});

Manual Reporting

try {
  riskyOperation();
} catch (error) {
  await errorManager.reportError(error as Error, null, {
    namespace: 'checkout',
    tags: { step: 'payment' },
    extra: { orderId: '123' },
  });
}

Disable/Enable

// Disable reporting
errorManager.configure({ enabled: false });

// Enable reporting
errorManager.configure({ enabled: true });

ErrorBoundary Integration

Automatic - errors caught by ReactErrorBoundary or ReactBasicErrorBoundary are automatically reported.

Manual report button in ReactErrorBoundary UI also sends to ErrorManager.

Install Sentry (optional)

npm install @sentry/react

Types

type ErrorSeverity = 'fatal' | 'error' | 'warning' | 'info' | 'debug';

interface ErrorContext {
  namespace?: string;
  componentStack?: string;
  user?: Record<string, any>;
  tags?: Record<string, string>;
  extra?: Record<string, any>;
}

interface ErrorReport {
  error: Error;
  errorInfo?: any;
  severity?: ErrorSeverity;
  context?: ErrorContext;
  timestamp?: number;
}

3.0 KiB Raw Blame History