Suggest an edit

Improve this article

Refine the answer for “What is Error Boundary?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

> An **Error Boundary** is a **special React component**
> that **catches errors** in its **child components**
> during rendering, in lifecycle methods, and in constructors.
>
> It stops the whole application from "crashing"
> and shows a **fallback UI** instead - for example, a *"Something went wrong"* message.

---

## An example of the problem without an Error Boundary

```javascript
function BrokenComponent() {
  throw new Error("Oops! Error!");
  return <div>OK</div>;
}

function App() {
  return (
    <div>
      <BrokenComponent />
    </div>
  );
}
```

Result: the application **crashes completely** - React unmounts the whole tree (a white screen).

---

## The solution - an Error Boundary

Let's create a "fuse":

```javascript
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

static getDerivedStateFromError(error) {
    // Update the state to show the fallback UI
    return { hasError: true };
  }

componentDidCatch(error, info) {
    // You can log the error (Sentry, GlitchTip, etc.)
    console.error("Error caught:", error, info);
  }

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

Using it:

```javascript
<ErrorBoundary>
  <BrokenComponent />
</ErrorBoundary>
```

Now the error does not break the whole application -
instead a fallback UI is shown, and the error is logged.

---

## How it works

| Step | What React does |
|---|---|
| 1 | An error occurs during the render of a child component |
| 2 | React "climbs" up the component tree |
| 3 | It finds the nearest **Error Boundary** |
| 4 | It calls its `getDerivedStateFromError` and `componentDidCatch` methods |
| 5 | It renders the fallback UI instead of the broken component |

---

## What an Error Boundary actually catches

Catches:

- Errors during **rendering** (`render`),
- Errors in class components' **lifecycle methods**,
- Errors in child components' **constructors**.

Does not catch:

- Errors in **event handlers** (`onClick`, `onChange`),
- Errors in **asynchronous functions** (`setTimeout`, `Promise`, `fetch`),
- Errors **inside the Error Boundary itself**,
- Errors on the **server** during SSR.

---

## Event handling - a separate story

```javascript
function App() {
  const handleClick = () => {
    throw new Error("Error in onClick");
  };

return (
    <ErrorBoundary>
      <button onClick={handleClick}>Click</button>
    </ErrorBoundary>
  );
}
```

Here the Error Boundary **will not fire**,
because the event runs **outside React's render phase**.

You just need `try...catch`:

```javascript
const handleClick = () => {
  try {
    throw new Error("Error");
  } catch (e) {
    console.error(e);
  }
};
```

---

## An example with a fallback component

To make the code cleaner, you can pass a fallback component:

```javascript
<ErrorBoundary fallback={<h1>Error! Please try again later.</h1>}>
  <UserProfile />
</ErrorBoundary>
```

---

## Implementation through a library

If you do not want to write the class by hand,
use the ready-made `react-error-boundary` package by Kent C. Dodds:

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

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

<ErrorBoundary
  FallbackComponent={Fallback}
  onError={(error, info) => console.log(error, info)}
>
  <DangerousComponent />
</ErrorBoundary>
```

---

## Good practice - **group Error Boundaries**

So an error does not break the whole screen:

```javascript
<App>
  <Header />
  <ErrorBoundary>
    <MainContent />
  </ErrorBoundary>
  <Footer />
</App>
```

If something breaks inside `MainContent`,
the header and footer stay untouched.

---

## Usage in React 18+

Error Boundaries are especially useful with:

- **Concurrent Rendering** (React can interrupt and resume a render);
- **Suspense** (delays while loading data and components);
- **RSC (Server Components)** - client-side errors need to be kept separate from server-side ones.

---

## For production

Add error reporting (for example, GlitchTip or Sentry):

```javascript
componentDidCatch(error, info) {
  sendToGlitchTip(error, info);
}
```

And you will be able to see where exactly and how often users run into errors.

---

## Summary:

> An **Error Boundary** is a fuse component
> that catches errors in child components
> and shows a fallback interface instead of the whole application crashing.

### Key point:

| Catches | Does not catch |
|---|---|
| Render errors | Errors in events |
| Errors in the lifecycle | Errors in async code |
| Errors in constructors | Errors during SSR |
</content>

Markdown · drag & drop images · ⌘B / ⌘I shortcuts693 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.