Containing render failures
An error boundary is a component that catches errors thrown during rendering in the subtree below it and displays a fallback interface instead of crashing the whole page. Without one, an uncaught render error unmounts the entire app, leaving a blank screen.
- It wraps a subtree that might throw during render.
- A thrown error is caught at the nearest boundary.
- The boundary swaps in a fallback rather than crashing all.
What it does and does not catch
Boundaries catch errors during rendering, in lifecycle, and in constructors of the components below them. They do not catch errors in event handlers, asynchronous code, or the boundary itself, which you handle with ordinary try and catch.
- Place boundaries around independent sections.
- Provide a fallback that lets the user retry or navigate.
- Handle event and async errors separately in code.
Pairing boundaries with suspense lets one component declare both its loading and its error states for a section.
Key idea
An error boundary catches render errors in its subtree and shows a fallback, but it does not catch errors in event handlers or async code.