Error Boundaries

Learning objectives#

• Explain what error boundaries catch
• Write a class error boundary
• Use react-error-boundary with reset
• Place boundaries at sensible levels

Explanation#

If a component throws while rendering, React unmounts the whole tree — users see a blank page. An error boundary stops that at a chosen point.

An error boundary is a class component with static getDerivedStateFromError (to show the fallback) and componentDidCatch (to log the error). There is no hook equivalent yet.

Most projects use the react-error-boundary package: <ErrorBoundary FallbackComponent={...} onReset={...}> with a resetErrorBoundary function for “Try again”.

Boundaries catch errors in rendering, lifecycle methods and constructors below them. They do NOT catch errors in event handlers, async code (setTimeout, fetch promises) or the boundary itself — handle those with try/catch and error state.

Place one boundary around the whole app (last resort) and others around independent widgets and routes, so a broken chart does not take down navigation.

Syntax#

1class ErrorBoundary extends Component {
2  state = { error: null };
3  static getDerivedStateFromError(error) { return { error }; }
4  componentDidCatch(error, info) { logError(error, info.componentStack); }
5  render() { return this.state.error ? this.props.fallback : this.props.children; }
6}

Code example: A broken widget that does not break the page#

1import { Component, useState } from 'react';
2

3class ErrorBoundary extends Component {
4  state = { error: null };
5

6  static getDerivedStateFromError(error) {
7    return { error };                                   // switch to the fallback
8  }
9

10  componentDidCatch(error, info) {
11    console.error('Widget crashed:', error.message, info.componentStack);   // send to logging here
12  }
13

14  reset = () => this.setState({ error: null });
15

16  render() {
17    if (this.state.error) {
18      return (
19        <div role="alert" style={{ border: '1px solid #dc2626', padding: 8 }}>
20          <p>{this.props.title} could not be displayed.</p>
21          <button onClick={this.reset}>Try again</button>
22        </div>
23      );
24    }
25    return this.props.children;
26  }
27}
28

29function RevenueWidget({ data }) {
30  // Bug: crashes when data is missing
31  return <p>Revenue: ₹{data.total.toLocaleString('en-IN')}</p>;
32}
33

34export default function Dashboard() {
35  const [broken, setBroken] = useState(true);
36  return (
37    <>
38      <nav>Home · Orders · Reports</nav>
39      <ErrorBoundary title="Revenue">
40        <RevenueWidget data={broken ? null : { total: 125000 }} />
41      </ErrorBoundary>
42      <ErrorBoundary title="Orders">
43        <p>Orders today: 42</p>
44      </ErrorBoundary>
45      <button onClick={() => setBroken(false)}>Fix the data</button>
46    </>
47  );
48}

The navigation and “Orders today: 42” render normally. The revenue widget shows a red box “Revenue could not be displayed.” and the console logs “Widget crashed: Cannot read properties of null (reading ‘total’)”. Clicking “Fix the data” then “Try again” shows “Revenue: ₹1,25,000”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. RevenueWidget throws while rendering because data is null.
2. getDerivedStateFromError stores the error, so the boundary renders its fallback.
3. componentDidCatch logs the error and component stack.
4. Only the Revenue boundary is affected; navigation and the Orders widget keep working.
5. reset clears the error so the children render again once the data is fixed.

Real-world use case#

Common mistakes#

Best practices#

• A top-level boundary plus boundaries per widget or route
• Log errors to a monitoring service
• Offer a retry or reload
• Use react-error-boundary in real projects

Remember this#

Practice exercise#

1import { Component } from 'react';
2

3class Boundary extends Component {
4  state = { failed: false };
5  static getDerivedStateFromError() { return { failed: true }; }
6  render() { return this.state.failed ? <p role="alert">{this.props.fallback}</p> : this.props.children; }
7}
8

9function Profile({ user }) {
10  if (!user.name) throw new Error('User has no name');
11  return <h2>{user.name}</h2>;
12}
13

14export default function App() {
15  return (
16    <Boundary fallback="Profile unavailable">
17      <Profile user={{}} />
18    </Boundary>
19  );
20}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.