React Error Boundary Simulator

// npm install react-error-boundary
import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';

// ── Declarative wrapping ────────────────────────────────────
function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={(error, info) => logToSentry(error, info)}
      onReset={() => { /* reset app state */ }}
    >
      <MainContent />
    </ErrorBoundary>
  );
}

function ErrorFallback({ error, resetErrorBoundary }: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div role="alert">
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

// ── Trigger boundary from async code / event handlers ──────
function DataLoader() {
  const { showBoundary } = useErrorBoundary();

  async function fetchData() {
    try {
      const data = await api.getData();
      setData(data);
    } catch (error) {
      // This triggers the nearest parent ErrorBoundary
      showBoundary(error);
    }
  }

  return <button onClick={fetchData}>Load Data</button>;
}

// Error logging with Sentry + structured context
import * as Sentry from '@sentry/react';
import { ErrorInfo } from 'react';

function logErrorToBoundary(error: Error, errorInfo: ErrorInfo): void {
  // 1. Sentry with component stack
  Sentry.withScope((scope) => {
    scope.setExtra('componentStack', errorInfo.componentStack);
    scope.setLevel('error');
    Sentry.captureException(error);
  });

  // 2. Console for development
  if (process.env.NODE_ENV === 'development') {
    console.group('ErrorBoundary caught an error');
    console.error('Error:', error);
    console.error('Component Stack:', errorInfo.componentStack);
    console.groupEnd();
  }

  // 3. Custom analytics / observability
  analytics.track('error_boundary_triggered', {
    message: error.message,
    stack: error.stack?.slice(0, 500),
    component: errorInfo.componentStack?.split('\n')[1]?.trim(),
    url: window.location.href,
    timestamp: new Date().toISOString(),
  });
}

// Sentry also provides a built-in error boundary:
// import { ErrorBoundary } from '@sentry/react';
// <ErrorBoundary fallback={<p>An error has occurred</p>}>
//   <App />
// </ErrorBoundary>