A Simple Guide to React Error Boundaries

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
  return (
    <div
      role="alert"
      style={{ padding: '20px', border: '1px solid red', borderRadius: '8px' }}
    >
      <h2>Something went wrong!</h2>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <YourComponent />
    </ErrorBoundary>
  );
}

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root')!, {
  // Fired for errors that an error boundary caught
  onCaughtError: (error, errorInfo) => {
    console.error('Caught by a boundary:', error, errorInfo.componentStack);
  },
  // Fired for errors no boundary caught
  onUncaughtError: (error, errorInfo) => {
    console.error('Not caught by any boundary:', error, errorInfo.componentStack);
  }
});

root.render(<App />);

import * as React from 'react';
import ErrorBoundary from './ErrorBoundary';

function BuggyComponent() {
  // This will throw an error
  throw new Error('I crashed!');

  return <div>This will never render</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

import * as React from 'react';
import ErrorBoundary from './ErrorBoundary';

function Sidebar() {
  return <div>Sidebar Content</div>;
}

function MainContent() {
  // This component might crash
  throw new Error('Main content crashed!');
  return <div>Main Content</div>;
}

function Header() {
  return <div>Header</div>;
}

function App() {
  return (
    <div>
      {/* Header has its own error boundary */}
      <ErrorBoundary fallback={<div>Header Error</div>}>
        <Header />
      </ErrorBoundary>

      <div style={{ display: 'flex' }}>
        {/* Sidebar is protected separately */}
        <ErrorBoundary fallback={<div>Sidebar Error</div>}>
          <Sidebar />
        </ErrorBoundary>

        {/* Main content is protected separately */}
        <ErrorBoundary fallback={<div>Main Content Error</div>}>
          <MainContent />
        </ErrorBoundary>
      </div>
    </div>
  );
}

import * as React from 'react';
import ErrorBoundary from './ErrorBoundary';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = React.useState<User | null>(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => {
        if (!res.ok) throw new Error('User not found');
        return res.json();
      })
      .then((data) => {
        setUser(data);
        setLoading(false);
      })
      .catch((error) => {
        setLoading(false);
        throw error; // This will be caught by the error boundary
      });
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return null;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div>
          <h2>Failed to load user profile</h2>
          <p>{error.message}</p>
          <button onClick={reset}>Retry</button>
        </div>
      )}
    >
      <UserProfile userId={1} />
    </ErrorBoundary>
  );
}

import * as React from 'react';
import ErrorBoundary from './ErrorBoundary';

interface FormData {
  name: string;
  email: string;
}

function ComplexForm() {
  const [formData, setFormData] = React.useState<FormData>({
    name: '',
    email: ''
  });

  // Simulating a complex form that might have rendering issues
  const validateEmail = (email: string) => {
    if (!email.includes('@')) {
      throw new Error('Invalid email format');
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    try {
      validateEmail(formData.email);
      // Submit form data
    } catch (error) {
      // Handle error in event handler (won't be caught by boundary)
      alert((error as Error).message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Name"
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

function App() {
  return (
    <ErrorBoundary
      fallback={
        <div>
          <h2>Form Error</h2>
          <p>Please refresh the page and try again.</p>
        </div>
      }
    >
      <ComplexForm />
    </ErrorBoundary>
  );
}

import * as React from 'react';
import UnstableThirdPartyComponent from 'some-library';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <h1>My App</h1>

      {/* Protect the entire app from third-party component errors */}
      <ErrorBoundary
        fallback={
          <div>
            <h2>Third-party component failed</h2>
            <p>The component encountered an error. Please try again later.</p>
          </div>
        }
      >
        <UnstableThirdPartyComponent />
      </ErrorBoundary>
    </div>
  );
}

import * as React from 'react';
import * as Sentry from '@sentry/react';

interface LoggingErrorBoundaryProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

interface LoggingErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

/**
 * Logging Error Boundary
 * NOTE: Error boundaries must be class components in every React version.
 * The react-error-boundary library exposes the same idea via an onError callback.
 */
class LoggingErrorBoundary extends React.Component<LoggingErrorBoundaryProps, LoggingErrorBoundaryState> {
  constructor(props: LoggingErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): LoggingErrorBoundaryState {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    // Log to Sentry
    Sentry.captureException(error, {
      contexts: {
        react: {
          componentStack: errorInfo.componentStack
        }
      }
    });

    // Or log to your own service
    // logErrorToService({
    //   error: error.toString(),
    //   errorInfo: errorInfo.componentStack,
    //   timestamp: new Date().toISOString()
    // });
  }

  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <div>
            <h1>Something went wrong.</h1>
            <p>The error has been logged. We'll look into it!</p>
          </div>
        )
      );
    }

    return this.props.children;
  }
}