ErrorBoundary Error Boundary
Last updated: 2026-11-02
ErrorBoundary Error Boundary
An ErrorBoundary is a component-level safety net: it catches errors in the child tree and renders fallback UI instead of a blank page. It is a class component (getDerivedStateFromError / componentDidCatch) — no hook equivalent before React 19.
| Group | Data & Engineering |
|---|---|
| Kind | Pattern |
| Since | React 16 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
class ErrorBoundary extends Component {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
componentDidCatch(error, info) { /* report */ }
render() { return this.state.hasError ? <Fallback/> : this.props.children }
}⚙️ Parameters
| children | The protected child tree — any render error inside is caught. |
|---|---|
| fallback (custom) | Fallback UI: pass via a prop (fallback={<UI/>}) or keep it in boundary state. |
Returns：Nothing (class component). Renders children when healthy; fallback UI when a child throws.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
No blank page: the fallback "Something broke, but the page lives" shows — Bomb's render error was caught by the boundary.💡 Key Points
⚠️ Warning Boundaries do NOT catch: event handlers, async callbacks, SSR errors, or errors thrown by themselves. Use try/catch in handlers.
💡 Tip Production apps usually use the react-error-boundary package (hook-style API) instead of hand-writing the class.
ℹ️ Info Boundaries work by position in the tree: at route level they save the page; at card level only one card is sacrificed.
🏷️ More Data & Engineering
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
Error Boundaries & Debugging
Lesson 25: generic boundary component, Profiler and Sentry integration.
❓ FAQ
Q Why must an error boundary be a class component?
A Because getDerivedStateFromError / componentDidCatch have no hook form yet; the React team recommends the react-error-boundary package.
Q Will an error boundary catch errors thrown in an event handler?
A No. Handlers run outside rendering — use try/catch there; boundaries only cover render & lifecycle errors.
Q At which level should the boundary be placed?
A Place by blast radius: route level saves the page; widget level saves a region. Wrap critical areas (like kanban columns) individually.
