What types of errors does an Error Boundary catch?
Errors that an Error Boundary does catch
| Error type | Where it happens | Example | Caught? |
|---|---|---|---|
| An error during rendering | during a child component's render() | return user.name; // user = undefined | Yes |
| An error in a class constructor | inside a component's constructor() | constructor() { throw new Error("fail"); } | Yes |
| An error in lifecycle methods | componentDidMount, componentDidUpdate, etc. | componentDidMount() { throw new Error(); } | Yes |
| An error in hooks (during render) | useMemo, useState, useEffect, etc. (if thrown during render) | throw new Error("error in useMemo") | Yes |
| An error in descendants (child components) | in any component inside the <ErrorBoundary> tree | Child -> Grandchild | Yes |
| An error in a Suspense fallback / lazy component | while loading a lazy component | React.lazy(() => import('./Broken')) | Yes (through the nearest Error Boundary) |
Errors that an Error Boundary does not catch
| Error type | Where it happens | Example | Caught? | What to do |
|---|---|---|---|---|
| Errors in event handlers | inside onClick, onChange, etc. | <button onClick={() => { throw new Error(); }}> | No | Use try...catch inside the handler |
| Errors in async code | setTimeout, Promise, async/await, fetch | setTimeout(() => { throw new Error(); }) | No | Catch it with try...catch or .catch() |
| Errors inside the Error Boundary itself | inside the render, componentDidCatch, fallback methods | No | Wrap the Error Boundary in another Error Boundary | |
| Errors during server-side rendering (SSR) | when running on the server | No | Log them through a server-side handler | |
| Errors in layout effects / cleanup | inside a useEffect cleanup | No (React 18 changed this partially, but do not rely on it) | try/catch inside the effect | |
| Errors outside React (external libraries, window) | for example, in addEventListener or window.onerror | No | Use global error handlers (window.onerror, window.onunhandledrejection) |
Why it does not catch events and async code
Because an Error Boundary only handles synchronous errors within React's render cycle. Errors in events and async callbacks happen after the render has already finished, outside React's call stack, so React does not even "see" that they occurred.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.