Root error callbacks: caught, recoverable and uncaught
Each callback receives the error and an info object. The recoverable error wraps the original one in error.cause. After the uncaught error, React unmounts the whole root: the screen is empty. Because the callbacks are passed, React's default console messages are not printed.
An error boundary is a class component with static getDerivedStateFromError (show a fallback) and componentDidCatch (log), that catches errors thrown while rendering its children; it doesn't catch errors in event handlers or async code, it's reset with a key or a reset function, and React 19 adds root-level onCaughtError, onUncaughtError and onRecoverableError callbacks.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a reusable ErrorBoundary that takes a fallback render function (error, reset) => JSX and use it around a component that throws when a prop is negative.
A DeleteButton calls await api.delete(id) in its click handler. Make a failure show in the nearest error boundary.
Configure createRoot so that caught errors are logged with console.warn and uncaught ones with console.error, each with the component stack.
Explain it without notes
What is an error boundary and how do you write one?
What's the difference between getDerivedStateFromError and componentDidCatch?
Which errors do error boundaries not catch, and how do you handle those?
How do you reset an error boundary? Compare a Try again button, reset keys and the key prop.
What are onCaughtError, onUncaughtError and onRecoverableError, and when would you use them?
Preview
Console
Nothing logged yet.Expected console output
onCaughtError: caught boom | boundary: Boundary | has stack: string
onRecoverableError: There was an error during concurrent rendering but React was able to recover by instead synchronously rendering the entire root. | cause: flaky first render
onUncaughtError: uncaught boom | keys: componentStack
screen: (empty)