Give one broken widget an error boundary

One bad API response from a single widget just wiped out my entire page.

IntermediateRead 3 minDoing: under an hour6 steps

▶ Start

What you'll have at the end

A crash in one widget that shows a fallback message instead of blanking the whole page

Before you start

You need

A widget already rendering on a page next to other, unrelated widgets, where bad or missing data in its own response can make it throw while it draws.

Not covered

An error thrown inside an event handler or an awaited call: those never reach a render-time boundary and still need their own catch, same as an error the boundary's own fallback throws while rendering.

Leans on

React Frontend Framework Cheat SheetIts Error Handling table names the two lifecycle methods a boundary needs and spells out what a boundary does and doesn't catch, right beside where its DevTools and Debugging table places boundaries next to source maps and strict mode.
Chrome DevTools Cheat SheetIts Console Panel table covers the call that puts a caught error's real message and stack trace on your own screen while you build and test the boundary.

6 steps

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook