Suggest an editImprove this articleRefine the answer for “What types of errors does an Error Boundary catch?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)An **Error Boundary** catches errors in rendering, in a class constructor, in lifecycle methods, in hooks during render, and in child components of the tree, but **does not catch** errors in event handlers, async code (`setTimeout`, `Promise`, `fetch`), inside itself, or during SSR. **Key point:** an Error Boundary only handles synchronous errors within React's render cycle, while errors in events and async callbacks happen outside React's call stack.Shown above the full answer for quick recall.Answer (EN)Image## 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.