web-error-handling-error-boundaries

React Error Boundaries

Quick Guide: A boundary catches errors thrown during render, in lifecycle methods and in constructors, and swaps the subtree for fallback UI. It never sees event-handler, async or server-render errors — those reach it only when something calls showBoundary(). Boundaries are class components, because getDerivedStateFromError and componentDidCatch have no hook equivalent. React 19 adds onCaughtError, onUncaughtError and onRecoverableError on createRoot, which log rather than render and are silently ignored on React 18.

Detailed Resources:

• examples/core.md — the class boundary, react-error-boundary usage, resetKeys, useErrorBoundary, granular placement
• examples/react-19-hooks.md — createRoot/hydrateRoot error options, captureOwnerStack(), error filtering
• examples/recovery.md — retry limits, exponential backoff, error classification
• examples/testing.md — what makes a boundary testable, and the fixtures that do it
• reference.md — what boundaries catch, lifecycle and prop tables, checklists

---

Which path applies

• No boundary dependency wanted — write the class yourself; getDerivedStateFromError plus componentDidCatch is the whole API, and examples/core.md has it in full.
• react-error-boundary is available — take resetKeys, useErrorBoundary and the FallbackProps type rather than reimplementing them, and follow examples/core.md.
• React 19, and the question is logging rather than UI — the three createRoot options report every error including the ones no boundary caught; see examples/react-19-hooks.md.

---

<critical_requirements>

Before writing error boundary code

Return new state from getDerivedStateFromError and put every side effect in componentDidCatch. The first runs during render, where a fetch or a log call breaks React's phase rules; the second runs at commit, where they are safe.