Error boundary
An error boundary is a React component mechanism that catches errors in descendant components and renders fallback UI to isolate the affected component tree.
React Hooks in Action: With Suspense and Concurrent Mode
ErrorBoundary is a reusable React component from react-error-boundary that catches descendant rendering errors and renders a configured fallback component.
- How it is used
- Contains descendant rendering failures and separates error fallback UI from application components.
- How deep it goes
- Explains class lifecycle mechanics, configurable fallbacks, nested Suspense placement, and recovery callbacks without detailing React internals.
- Examples
- Uses bookings routes, a deliberately throwing BookableForm, lazy calendars, Message loading, and a Try Again recovery button.
- What you can do after
- Apply it via react-error-boundary by configuring fallback components, isolating subtrees, and wiring reset-based recovery.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains error boundary →
Web Components in Action
An error boundary is a React component mechanism that confines errors from a component subtree so they do not unmount or disrupt the rest of the application.
- How it is used
- Frames error handling as a React component-lifecycle concern that protects unaffected components and application content.
- How deep it goes
- Defines the isolation goal and React’s historical motivation but stops short of implementation details or boundary code.
- Examples
- Contrasts an error confined to one React component with pre-version-16 errors that could unmount the entire application.
- What you can do after
- Evaluate how React isolates component errors and distinguish that behavior from Web Components’ decentralized error handling.
Build AI-Enhanced Web Apps
A React component pattern that catches rendering errors in descendant components and renders fallback content.
- How it is used
- Protects production React and Next.js interfaces from blank screens after rendering failures.
- How deep it goes
- Defines the production purpose and contrasts it with development overlays, while deferring implementation instructions to React documentation.
- Examples
- Uses a Next.js call-stack overlay, blank production screens, meaningful error messages, and recovery call-to-action buttons.
- What you can do after
- Configure production rendering-error handling that gives users feedback and recovery options instead of blank screens.
Read how Build AI-Enhanced Web Apps explains error boundary →
Related concepts
- class componentuses · A class component is a user-interface component implemented as a class that defines or supplies its state, behavior, rendering, or lifecycle.
- exceptionaddresses · An exception is a runtime signal or object representing an abnormal condition that interrupts ordinary program flow and may be handled or propagated.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.