~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/18react-error-boundaries

# Error Boundaries

Error boundaries catch JavaScript errors in their child component tree. They display a fallback UI instead of crashing the entire app.

## How They Work

Error boundaries are class components that implement `componentDidCatch` and `static getDerivedStateFromError`.

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

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

componentDidCatch(error, errorInfo) {
    console.error("Error caught:", error, errorInfo);
  }

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

## Using Error Boundaries

Wrap components that might fail.

```jsx
function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
      <Dashboard />
    </ErrorBoundary>
  );
}
```

If either component crashes, the boundary catches it and shows the fallback.

## Function Components and Libraries

Function components can't be error boundaries themselves. Use libraries like `react-error-boundary` for a hook-based API.

```jsx
import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>Failed to load</p>}>
  <RiskyComponent />
</ErrorBoundary>
```

## What They Catch

- Rendering errors
- Lifecycle method errors
- Constructor errors in child trees

## What They Don't Catch

- Event handler errors (use try/catch there)
- Async code (setTimeout, promises)
- Server-side rendering
- Errors in the boundary itself

## Best Practices

- Place error boundaries at logical UI boundaries (pages, widgets)
- Provide meaningful fallback UI with a retry option
- Log errors to an external service for monitoring
- Use multiple boundaries to isolate failures
- Combine with try/catch in event handlers

## Common Mistakes

- Using error boundaries for event handler errors
- Forgetting to log error details in `componentDidCatch`
- Showing a blank fallback with no way to recover
- Wrapping the entire app in one boundary (lose granularity)
- Expecting boundaries to catch async errors

No changes yet

cancel