What is Error Boundary?

ReactJunior~2 min read

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.