Error boundaries

One broken review shouldn't blank the page

Real data is messy. Here a product page lists reviews from the reviews.js tab, and the third review has no author: the shopper deleted their account. Nothing goes wrong until someone asks to see it. The result is live:

1import { useState } from "react";2import { reviews } from "./reviews.js";3 4function Reviews() {5  const [showAll, setShowAll] = useState(false);6  const shown = showAll ? reviews : reviews.slice(0, 2);7  return (8    <>9      <ul>10        {shown.map((review) => (11          <li key={review.id}>{review.author.name}: {review.text}</li>12        ))}13      </ul>14      <button onClick={() => setShowAll(true)}>Show all reviews</button>15    </>16  );17}18 19export default function App() {20  return (21    <>22      <h3>Carrot cake, $4</h3>23      <button>Add to cart</button>24      <Reviews />25    </>26  );27}

Line 6 shows the first two reviews, and line 11 reads each review's review.author.name. Click Show all reviews. Now line 11 reads null.name for the third review and throws a TypeError. Nothing catches it, so React removes the whole page from the screen, the heading and the Add to cart button included, and the preview shows the error instead. (Press Run again to get the page back.) React does this on purpose: showing a half-broken page could mislead the shopper, so it shows nothing.

An error boundary is a component that catches errors thrown while the components inside it render, and shows a fallback (a stand-in, like a short message) in their place. Here is the same page with one, from the ErrorBoundary.jsx tab:

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { reviews } from "./reviews.js";4 5function Reviews() {6  const [showAll, setShowAll] = useState(false);7  const shown = showAll ? reviews : reviews.slice(0, 2);8  return (9    <>10      <ul>11        {shown.map((review) => (12          <li key={review.id}>{review.author.name}: {review.text}</li>13        ))}14      </ul>15      <button onClick={() => setShowAll(true)}>Show all reviews</button>16    </>17  );18}19 20export default function App() {21  return (22    <>23      <h3>Carrot cake, $4</h3>24      <button>Add to cart</button>25      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>26        <Reviews />27      </ErrorBoundary>28    </>29  );30}

Lines 25 to 27 wrap Reviews in ErrorBoundary, and line 25 gives it the fallback. Click Show all reviews again: the reviews are replaced by Reviews aren't available right now., and the heading and the button stay. Open the console under the result: ErrorBoundary printed Report: Cannot read properties of null (reading 'name'), and React logged the error too.

What a boundary catches, and what it doesn't

A boundary catches errors from React's own work on the components inside it: rendering them, running their Effects, reading a promise with use, and running a transition's action. Code that runs later, on its own, isn't React's work, so the boundary never hears about its errors.

Try each place in the playground. It renders a small page with a Widget inside a boundary, throws in the place you pick, and shows who got the error: the root's onCaughtError (a boundary caught it) or its onUncaughtError (nothing caught it). The last section of this lesson explains those two options. Errors from handlers and timers aren't in the playground, because they would reach this page's own error handling; the next section shows one in a live example instead.

Read the table row by row: where the error is thrown, whether a boundary above catches it, and why.

The last row is about server rendering, where a framework turns your components into HTML before the page reaches the browser. Error boundaries don't run there. If a component throws on the server inside a Suspense boundary, React sends that boundary's fallback in the HTML and renders the component again in the browser; if it throws there too, the nearest error boundary catches it. The Server rendering and hydration lesson covers server rendering.

Hand an event handler's error to the boundary

Here a click handler throws, with a boundary right above its component:

1import ErrorBoundary from "./ErrorBoundary.jsx";2 3function Coupon() {4  function handleApply() {5    throw new Error("The coupon CAKE50 has expired.");6  }7  return <button onClick={handleApply}>Apply coupon CAKE50</button>;8}9 10export default function App() {11  return (12    <ErrorBoundary fallback={<p>Coupons can't be used right now.</p>}>13      <Coupon />14    </ErrorBoundary>15  );16}

Line 5 throws when the handler runs. Click Apply coupon CAKE50: the boundary's fallback on line 12 never shows. React wasn't rendering when the handler ran, so the error went past the boundary to the browser as an uncaught error, and the preview reports it in place of the result. (Press Run again to get the button back.)

You can catch a handler's error yourself with try...catch. Often you'll show a message right there. When the right answer is the boundary's fallback, keep the error in state and throw it while rendering:

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { applyCoupon } from "./api.js";4 5function Coupon() {6  const [error, setError] = useState(null);7  if (error) throw error;8 9  function handleApply() {10    try {11      applyCoupon("CAKE50");12    } catch (caught) {13      setError(caught);14    }15  }16 17  return <button onClick={handleApply}>Apply coupon CAKE50</button>;18}19 20export default function App() {21  return (22    <ErrorBoundary fallback={<p>Coupons can't be used right now.</p>}>23      <Coupon />24    </ErrorBoundary>25  );26}

Line 11 calls applyCoupon from the api.js tab, which throws because the coupon has expired. Line 12 catches it in the handler, and line 13 saves it in state. Saving state renders Coupon again, and now line 7 throws the saved error while rendering, where the boundary on line 22 can catch it. Click Apply coupon CAKE50: the button is replaced by Coupons can't be used right now.

In React 19 there's a shorter way for work that happens after a click: run it as a transition with useTransition. An error thrown in the function you pass to its startTransition, even after an await, goes to the nearest boundary. (The Transitions lesson covers them in full.)

1import { useTransition } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { placeOrder } from "./api.js";4 5function PlaceOrder() {6  const [isPending, startTransition] = useTransition();7 8  function handleClick() {9    startTransition(async () => {10      await placeOrder();11    });12  }13 14  return (15    <button onClick={handleClick} disabled={isPending}>16      {isPending ? "Placing the order…" : "Place order"}17    </button>18  );19}20 21export default function App() {22  return (23    <ErrorBoundary fallback={<p>Your order didn't go through. Nothing was charged.</p>}>24      <PlaceOrder />25    </ErrorBoundary>26  );27}

Line 6 gets isPending and startTransition. Lines 9 to 11 place the order inside a transition. Click Place order: line 16 shows Placing the order… while it waits, then placeOrder rejects after half a second, the await on line 10 throws, and the boundary on line 23 shows its fallback. This works only with the startTransition that useTransition returns. The startTransition you import from react isn't tied to a component, so its errors reach no boundary.

Write an error boundary as a class

Every component so far has been a function. An error boundary has to be a class component: a JavaScript class that extends React's Component. React has no hook for catching errors, so there's no function version. You write one boundary class and use it all over your app. Here is the ErrorBoundary.jsx tab from the examples, which runs in each of them:

import { Component } from "react";

export default class ErrorBoundary extends Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    // A reporting service would get info.componentStack too.
    console.log(`Report: ${error.message}`);
  }

  render() {
    if (this.state.error) return this.props.fallback;
    return this.props.children;
  }
}

• Line 3 makes a class that extends Component. A class component keeps its state in this.state, reads its props from this.props, and returns what to show from a render method.
• Line 4 starts the state with no error: { error: null }.
• Lines 6 to 8: when a component inside throws, React calls getDerivedStateFromError with the error, while it's rendering. It returns the new state, { error }. It's static, so it belongs to the class and can't touch this: it only returns state.
• Lines 10 to 13: once the fallback is on screen, React calls componentDidCatch with the error and an info object. info.componentStack lists the components the error came through, starting with the one that threw. This is the place to send a report, with the error and that list; here it logs one line.
• Lines 15 to 18: render shows this.props.fallback when there's an error, and the children otherwise.

Why two methods? getDerivedStateFromError runs during rendering, and rendering must be pure: React may call it more than once (in development, StrictMode calls it twice on purpose). componentDidCatch runs once, after the commit, so side effects like reporting belong there. In the reviews example, the console shows one Report line per caught error.

Try again: reset the boundary

Once a boundary has caught an error, it keeps showing its fallback: its state still says error. To try again, something has to reset it. The simplest way is a new key. When a component's key changes, React throws the old one away, with its state, and makes a new one. Here the first stock check in api.js fails, like a busy server:

1import { Suspense, use, useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { fetchStock, refetchStock } from "./api.js";4 5function Stock() {6  const left = use(fetchStock("cake"));7  return <p>Carrot cake: {left} left</p>;8}9 10export default function App() {11  const [attempt, setAttempt] = useState(1);12 13  function tryAgain() {14    refetchStock("cake");15    setAttempt(attempt + 1);16  }17 18  return (19    <ErrorBoundary20      key={attempt}21      fallback={<p>Couldn't check the stock. <button onClick={tryAgain}>Try again</button></p>}22    >23      <Suspense fallback={<p>Checking the stock…</p>}>24        <Stock />25      </Suspense>26    </ErrorBoundary>27  );28}

Line 6 reads the stock with use, and the request fails after 0.6 seconds, so the boundary shows Couldn't check the stock. and a Try again button. Click it. Line 14 drops the failed promise from the cache, and line 15 changes attempt, the boundary's key on line 20. React makes a fresh boundary with no error, Stock asks again, and this time the answer is Carrot cake: 3 left.

A boundary can also reset itself. This version passes a reset function to its fallback:

import { Component } from "react";

export default class ErrorBoundary extends Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error) {
    console.log(`Report: ${error.message}`);
  }

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

  render() {
    if (this.state.error) return this.props.fallback(this.state.error, this.reset);
    return this.props.children;
  }
}

Lines 14 to 16 set the state back to { error: null }, and line 19 calls the fallback as a function, with the error and reset. It runs in the example below, where the cause is still there:

1import ErrorBoundary from "./ErrorBoundary.jsx";2import { reviews } from "./reviews.js";3 4function Reviews() {5  return (6    <ul>7      {reviews.map((review) => (8        <li key={review.id}>{review.author.name}: {review.text}</li>9      ))}10    </ul>11  );12}13 14export default function App() {15  return (16    <ErrorBoundary17      fallback={(error, reset) => (18        <p>Reviews failed: {error.message} <button onClick={reset}>Try again</button></p>19      )}20    >21      <Reviews />22    </ErrorBoundary>23  );24}

Line 8 renders every review, so the bad one throws at once, and lines 17 to 19 show the fallback with the message. Click Try again a few times. Each click resets the boundary, the reviews render again, the same review throws again, and the console gets another Report line. Resetting only helps when something has changed: a new request, new data, or a fixed bug.

Read the table row by row: the question, then the answer for each way to reset.

Where to put error boundaries

You don't need a boundary around every component. Put them where a fallback makes sense to the reader: around a part of the page that can fail on its own and still leave the rest useful, like a widget, a sidebar, or a list of comments. A message where a single avatar should be would mean nothing; a page with one broken widget can still sell cake. Most apps also keep one boundary near the top, so even an unexpected error shows a friendly page instead of nothing.

Move the boundaries in the playground, then break the recommendations and see what the shopper still has:

import ErrorBoundary from "./ErrorBoundary.jsx";
import { Cart, Header, Products, Recommendations, Reviews } from "./widgets.jsx";

export default function App() {
  return (
    <>
      <Header />
      <Cart />
      <main>
        <ErrorBoundary fallback={<p>Products couldn't load.</p>}>
          <Products />
        </ErrorBoundary>
        <ErrorBoundary fallback={<p>Reviews couldn't load.</p>}>
          <Reviews />
        </ErrorBoundary>
        <ErrorBoundary fallback={<p>Recommendations couldn't load.</p>}>
          <Recommendations />
        </ErrorBoundary>
      </main>
    </>
  );
}

Report errors from the root

Every React app starts with createRoot (Setting up a React project shows the main.jsx file that calls it). React 19 added two options to it, onCaughtError and onUncaughtError, next to the older onRecoverableError. They tell you about every error in one place, which is where you send errors to a reporting service. This example calls createRoot itself, so it runs as it is:

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3import ErrorBoundary from "./ErrorBoundary.jsx";4 5function Header() {6  const [broken, setBroken] = useState(false);7  if (broken) throw new Error("The header broke.");8  return <button onClick={() => setBroken(true)}>Break the header</button>;9}10 11function Reviews() {12  const [broken, setBroken] = useState(false);13  if (broken) throw new Error("The reviews broke.");14  return <button onClick={() => setBroken(true)}>Break the reviews</button>;15}16 17function App() {18  return (19    <>20      <Header />21      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>22        <Reviews />23      </ErrorBoundary>24    </>25  );26}27 28const root = createRoot(document.getElementById("root"), {29  onCaughtError(error, errorInfo) {30    console.log(`Caught by a boundary: ${error.message}`);31  },32  onUncaughtError(error, errorInfo) {33    console.log(`Not caught, so the app is gone: ${error.message}`);34  },35  onRecoverableError(error, errorInfo) {36    console.log(`React recovered: ${error.cause?.message}`);37  },38});39 40root.render(41  <StrictMode>42    <App />43  </StrictMode>,44);

Lines 28 to 38 create the root with three options. Each gets the error and an errorInfo object, whose componentStack says where it happened. Click Break the reviews: the boundary on line 21 catches the error, and the console shows Caught by a boundary: The reviews broke. from line 30, then the boundary's own Report line. Now click Break the header. Header sits outside every boundary, so React removes the whole app and line 33 prints Not caught, so the app is gone: The header broke.

onRecoverableError is for errors React fixed by itself. When a render throws, React tries the render once more before it goes to a boundary. If the second try works, nothing is shown to the reader, and React tells this option:

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3 4let tries = 0;5 6function GiftNote() {7  tries += 1;8  // Fails only the first time it renders, like a value that wasn't ready yet.9  if (tries === 1) throw new Error("The gift note wasn't ready.");10  return <p>Gift note: Happy birthday!</p>;11}12 13function App() {14  const [gift, setGift] = useState(false);15  return (16    <>17      <button onClick={() => setGift(true)}>Add a gift note</button>18      {gift && <GiftNote />}19    </>20  );21}22 23createRoot(document.getElementById("root"), {24  onRecoverableError(error) {25    console.log(`React recovered: ${error.cause?.message}`);26  },27}).render(28  <StrictMode>29    <App />30  </StrictMode>,31);

Line 9 throws on the first render of GiftNote only. Click Add a gift note: the note appears, and the console shows React recovered: The gift note wasn't ready. React wraps the original error in its own, so line 25 reads error.cause. In real apps, this option mostly reports pages whose server HTML didn't match what the browser rendered.

Read the table row by row: the option, when React calls it, and what React does when you leave it out.

You can read those defaults in React's source: defaultOnCaughtError, defaultOnUncaughtError, and defaultOnRecoverableError, in ReactFiberErrorLogger.js. In development, the default for caught errors adds React will try to recreate this component tree from scratch using the error boundary you provided to the log.

The react-error-boundary package

Most apps don't write their own boundary class. The react-error-boundary package gives you a ready ErrorBoundary and a hook to go with it. It isn't part of these examples, so this code doesn't run here. (Checked in October 2026: its current version, 6.1.6, works with React 18 and 19.)

import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";

function Coupon() {
  const { showBoundary } = useErrorBoundary();
  function handleApply() {
    try {
      applyCoupon("CAKE50");
    } catch (error) {
      showBoundary(error);
    }
  }
  return <button onClick={handleApply}>Apply coupon CAKE50</button>;
}

export default function App() {
  return (
    <ErrorBoundary
      fallbackRender={({ error, resetErrorBoundary }) => (
        <p>{error.message} <button onClick={resetErrorBoundary}>Try again</button></p>
      )}
      onError={(error, info) => reportToServer(error, info.componentStack)}
    >
      <Coupon />
    </ErrorBoundary>
  );
}

• Line 4: useErrorBoundary gives showBoundary. Line 9 hands the handler's error to the nearest boundary with it, the same job the state and throw did in the coupon example.
• Lines 18 to 20: fallbackRender gets the error and resetErrorBoundary, the package's reset.
• Line 21: onError plays the part of componentDidCatch, for reports.

It also takes resetKeys, a list of values that reset the boundary when one of them changes, like a key that only resets the boundary. The package is built on the same class methods you wrote above, so it catches exactly what they catch.

A product page that keeps working

Here the page from the overview gets a boundary per widget: the stock check can fail and be retried, and the reviews can break, and the heading and Add to cart stay through all of it.

1import { Suspense, use, useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { fetchStock, refetchStock } from "./api.js";4import { reviews } from "./reviews.js";5 6function Stock() {7  const left = use(fetchStock("cake"));8  return <p>Carrot cake: {left} left</p>;9}10 11function Reviews() {12  const [showAll, setShowAll] = useState(false);13  const shown = showAll ? reviews : reviews.slice(0, 2);14  return (15    <>16      <ul>17        {shown.map((review) => (18          <li key={review.id}>{review.author.name}: {review.text}</li>19        ))}20      </ul>21      <button onClick={() => setShowAll(true)}>Show all reviews</button>22    </>23  );24}25 26export default function App() {27  const [stockTry, setStockTry] = useState(1);28 29  function checkAgain() {30    refetchStock("cake");31    setStockTry(stockTry + 1);32  }33 34  return (35    <>36      <h3>Carrot cake, $4</h3>37      <button>Add to cart</button>38      <ErrorBoundary39        key={stockTry}40        fallback={<p>Stock unknown. <button onClick={checkAgain}>Check again</button></p>}41      >42        <Suspense fallback={<p>Checking the stock…</p>}>43          <Stock />44        </Suspense>45      </ErrorBoundary>46      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>47        <Reviews />48      </ErrorBoundary>49    </>50  );51}

• Lines 38 to 45: the stock has its own boundary, keyed by stockTry on line 39. When the first check fails, line 40 shows Stock unknown. and Check again.
• Lines 29 to 32: checkAgain drops the failed answer and changes the key, so a fresh boundary asks again and shows Carrot cake: 3 left.
• Lines 46 to 48: the reviews have a boundary of their own, so Show all reviews replaces only them.

Wait for the stock check to fail, click Check again, then Show all reviews. The console shows a Report line for each of the two caught errors.

Common mix-ups

• "An error boundary catches every error in the components inside it." No. It catches errors from rendering, Effects, use, and useTransition actions. Errors in event handlers, timers, and promise callbacks go past it.
• "A boundary replaces only the component that threw." No. It replaces everything inside it with its fallback. Wrap smaller parts to lose less.
• "I can write an error boundary as a function component." No. React 19 has no hook for it, so a boundary is a class. Write one, or use react-error-boundary.
• "A boundary tries again by itself." No. It keeps its fallback until you reset its state or give it a new key, and resetting helps only if the cause changed.
• "getDerivedStateFromError is a good place to send the report." No. It runs while rendering and may run more than once. Report from componentDidCatch or the root's onCaughtError.
• "A boundary catches its own errors." No. An error in the boundary or its fallback goes to the next boundary up.

Practice exercises

Each exercise has a live result: click in it, change the code with Edit & run, and open the console to see the reports.

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3import ErrorBoundary from "./ErrorBoundary.jsx";4 5function Header() {6  const [broken, setBroken] = useState(false);7  if (broken) throw new Error("The header broke.");8  return <button onClick={() => setBroken(true)}>Break the header</button>;9}10 11function Reviews() {12  const [broken, setBroken] = useState(false);13  if (broken) throw new Error("The reviews broke.");14  return <button onClick={() => setBroken(true)}>Break the reviews</button>;15}16 17function App() {18  return (19    <>20      <Header />21      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>22        <Reviews />23      </ErrorBoundary>24    </>25  );26}27 28const root = createRoot(document.getElementById("root"), {29  onCaughtError(error, errorInfo) {30    console.log(`Caught by a boundary: ${error.message}`);31  },32  onUncaughtError(error, errorInfo) {33    console.log(`Not caught, so the app is gone: ${error.message}`);34  },35  onRecoverableError(error, errorInfo) {36    console.log(`React recovered: ${error.cause?.message}`);37  },38});39 40root.render(41  <StrictMode>42    <App />43  </StrictMode>,44);

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3import ErrorBoundary from "./ErrorBoundary.jsx";4 5function Header() {6  const [broken, setBroken] = useState(false);7  if (broken) throw new Error("The header broke.");8  return <button onClick={() => setBroken(true)}>Break the header</button>;9}10 11function Reviews() {12  const [broken, setBroken] = useState(false);13  if (broken) throw new Error("The reviews broke.");14  return <button onClick={() => setBroken(true)}>Break the reviews</button>;15}16 17function App() {18  return (19    <>20      <Header />21      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>22        <Reviews />23      </ErrorBoundary>24    </>25  );26}27 28const root = createRoot(document.getElementById("root"), {29  onCaughtError(error, errorInfo) {30    console.log(`Caught by a boundary: ${error.message}`);31  },32  onUncaughtError(error, errorInfo) {33    console.log(`Not caught, so the app is gone: ${error.message}`);34  },35  onRecoverableError(error, errorInfo) {36    console.log(`React recovered: ${error.cause?.message}`);37  },38});39 40root.render(41  <StrictMode>42    <App />43  </StrictMode>,44);

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { reviews } from "./reviews.js";4 5function Reviews() {6  const [showAll, setShowAll] = useState(false);7  const shown = showAll ? reviews : reviews.slice(0, 2);8  return (9    <>10      <ul>11        {shown.map((review) => (12          <li key={review.id}>{review.author.name}: {review.text}</li>13        ))}14      </ul>15      <button onClick={() => setShowAll(true)}>Show all reviews</button>16    </>17  );18}19 20export default function App() {21  return (22    <>23      <h3>Carrot cake, $4</h3>24      <button>Add to cart</button>25      <Reviews />26    </>27  );28}

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { reviews } from "./reviews.js";4 5function Reviews() {6  const [showAll, setShowAll] = useState(false);7  const shown = showAll ? reviews : reviews.slice(0, 2);8  return (9    <>10      <ul>11        {shown.map((review) => (12          <li key={review.id}>{review.author.name}: {review.text}</li>13        ))}14      </ul>15      <button onClick={() => setShowAll(true)}>Show all reviews</button>16    </>17  );18}19 20export default function App() {21  return (22    <>23      <h3>Carrot cake, $4</h3>24      <button>Add to cart</button>25      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>26        <Reviews />27      </ErrorBoundary>28    </>29  );30}

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { reviews } from "./reviews.js";4 5function Reviews() {6  const [showAll, setShowAll] = useState(false);7  const shown = showAll ? reviews : reviews.slice(0, 2);8  return (9    <>10      <ul>11        {shown.map((review) => (12          <li key={review.id}>{review.author.name}: {review.text}</li>13        ))}14      </ul>15      <button onClick={() => setShowAll(true)}>Show all reviews</button>16    </>17  );18}19 20export default function App() {21  return (22    <>23      <h3>Carrot cake, $4</h3>24      <button>Add to cart</button>25      <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>26        <Reviews />27      </ErrorBoundary>28    </>29  );30}

1import { Component } from "react";2 3export default class ErrorBoundary extends Component {4  state = { error: null };5 6  static getDerivedStateFromError(error) {7    return { error };8  }9 10  componentDidCatch(error, info) {11    // A reporting service would get info.componentStack too.12    console.log(`Report: ${error.message}`);13  }14 15  render() {16    if (this.state.error) return this.props.fallback;17    return this.props.children;18  }19}

1import { Suspense, use, useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { fetchStock, refetchStock } from "./api.js";4 5function Stock() {6  const left = use(fetchStock("cake"));7  return <p>Carrot cake: {left} left</p>;8}9 10export default function App() {11  const [attempt, setAttempt] = useState(1);12 13  function tryAgain() {14    refetchStock("cake");15    setAttempt(attempt + 1);16  }17 18  return (19    <ErrorBoundary20      fallback={<p>Couldn't check the stock. <button onClick={tryAgain}>Try again</button></p>}21    >22      <Suspense fallback={<p>Checking the stock…</p>}>23        <Stock />24      </Suspense>25    </ErrorBoundary>26  );27}

1import { Suspense, use, useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { fetchStock, refetchStock } from "./api.js";4 5function Stock() {6  const left = use(fetchStock("cake"));7  return <p>Carrot cake: {left} left</p>;8}9 10export default function App() {11  const [attempt, setAttempt] = useState(1);12 13  function tryAgain() {14    refetchStock("cake");15    setAttempt(attempt + 1);16  }17 18  return (19    <ErrorBoundary20      key={attempt}21      fallback={<p>Couldn't check the stock. <button onClick={tryAgain}>Try again</button></p>}22    >23      <Suspense fallback={<p>Checking the stock…</p>}>24        <Stock />25      </Suspense>26    </ErrorBoundary>27  );28}

1import ErrorBoundary from "./ErrorBoundary.jsx";2import { applyCoupon } from "./api.js";3 4function Coupon() {5  function handleApply() {6    try {7      applyCoupon("CAKE50");8    } catch (caught) {9      console.log(`Lost: ${caught.message}`);10    }11  }12 13  return <button onClick={handleApply}>Apply coupon CAKE50</button>;14}15 16export default function App() {17  return (18    <ErrorBoundary fallback={<p>Coupons can't be used right now.</p>}>19      <Coupon />20    </ErrorBoundary>21  );22}

1import { useState } from "react";2import ErrorBoundary from "./ErrorBoundary.jsx";3import { applyCoupon } from "./api.js";4 5function Coupon() {6  const [error, setError] = useState(null);7  if (error) throw error;8 9  function handleApply() {10    try {11      applyCoupon("CAKE50");12    } catch (caught) {13      setError(caught);14    }15  }16 17  return <button onClick={handleApply}>Apply coupon CAKE50</button>;18}19 20export default function App() {21  return (22    <ErrorBoundary fallback={<p>Coupons can't be used right now.</p>}>23      <Coupon />24    </ErrorBoundary>25  );26}

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3import ErrorBoundary from "./ErrorBoundary.jsx";4 5function Reviews() {6  const [broken, setBroken] = useState(false);7  if (broken) throw new Error("The reviews broke.");8  return <button onClick={() => setBroken(true)}>Break the reviews</button>;9}10 11const root = createRoot(document.getElementById("root"));12 13root.render(14  <StrictMode>15    <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>16      <Reviews />17    </ErrorBoundary>18  </StrictMode>,19);

1import { StrictMode, useState } from "react";2import { createRoot } from "react-dom/client";3import ErrorBoundary from "./ErrorBoundary.jsx";4 5function Reviews() {6  const [broken, setBroken] = useState(false);7  if (broken) throw new Error("The reviews broke.");8  return <button onClick={() => setBroken(true)}>Break the reviews</button>;9}10 11const root = createRoot(document.getElementById("root"), {12  onCaughtError(error) {13    console.log(`Reported: ${error.message}`);14  },15});16 17root.render(18  <StrictMode>19    <ErrorBoundary fallback={<p>Reviews aren't available right now.</p>}>20      <Reviews />21    </ErrorBoundary>22  </StrictMode>,23);

Check your understanding

Key takeaways

• Without an error boundary, an error while rendering removes the whole app from the screen.
• A boundary catches errors from rendering, Effects, use, and useTransition actions below it, and shows its fallback instead.
• It doesn't catch errors in event handlers, timers, promise callbacks, itself, or server rendering. Hand a handler's error over through state, or use a transition.
• A boundary is a class: getDerivedStateFromError returns the new state while rendering, and componentDidCatch reports after the commit.
• To try again, reset its state or give it a new key, after fixing the cause.
• Put boundaries around parts that make sense on their own, plus one near the top.
• The root's onCaughtError, onUncaughtError, and onRecoverableError report every error in one place.

Coming next: Data fetching libraries. It shows what libraries like TanStack Query and SWR add on top of the cache you used with use: caching, fresh data, retries, and mutations.