patternjavascriptreactMajor

Error boundaries catch render errors and prevent full app crashes

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

React 16+ for error boundaries

error boundarygetDerivedStateFromErrorcomponentDidCatchreact-error-boundaryfallback UIcrash recovery

browser

Error Messages

The above error occurred in the <ComponentName> component.

Consider adding an error boundary to your tree to customize error handling behavior.

Problem

An unhandled JavaScript error during rendering, in a lifecycle method, or in a constructor causes the entire React tree to unmount. In production this means users see a blank page with no explanation. React 16+ has no default fallback UI.

Solution

Create an Error Boundary class component and wrap sections of your UI:

class ErrorBoundary extends React.Component {
state = { hasError: false, error: null };

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

componentDidCatch(error, info) {
// Log to error tracking service
logErrorToService(error, info.componentStack);
}

render() {
if (this.state.hasError) {
return this.props.fallback || <h2>Something went wrong.</h2>;
}
return this.props.children;
}
}

// Usage — isolate sections
<ErrorBoundary fallback={<ErrorPage />}>
<DangerousWidget />
</ErrorBoundary>

// react-error-boundary library (recommended)
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
FallbackComponent={ErrorFallback}
onError={(error, info) => reportToSentry(error)}
onReset={() => resetAppState()}
>
<App />
</ErrorBoundary>

Why

Error boundaries use getDerivedStateFromError to catch errors during render and update state to show a fallback. Without a boundary, React removes the entire component tree. Boundaries let you isolate failures — a broken widget doesn't crash the header.

Gotchas

Error boundaries do NOT catch errors in event handlers — use try/catch there
Error boundaries do NOT catch async errors (setTimeout, promises) — use global error handlers
Only class components can be error boundaries — function components cannot (as of React 18)
React 19 will add a new onCaughtError / onUncaughtError API for global error handling

Code Snippets

react-error-boundary with reset

// Using react-error-boundary (simplest approach)
import { ErrorBoundary } from 'react-error-boundary';

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

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <RiskyComponent />
</ErrorBoundary>

Context

When any section of your app renders user-generated content or depends on external data that might cause render errors

Revisions (0)

No revisions yet.