Error Boundary Catch Scope

In React, an error boundary catches certain rendering errors that occur in its descendant component tree. It does not catch errors thrown outside that subtree or errors from several other execution contexts.

An error boundary is a component that uses React's error-boundary lifecycle or the `react-error-boundary` pattern to provide fallback UI when a descendant throws during rendering. The boundary itself establishes the scope of protection: components below it are inside the protected subtree.

If a descendant component throws, React can unmount the failed subtree and render the boundary's fallback instead. A boundary therefore gives you a way to isolate failures rather than allowing one component's rendering failure to determine the UI for an entire application.

The boundary does not catch an error thrown by one of its ancestors, because that error occurs outside the boundary's subtree. To protect that ancestor or a larger portion of the application, the boundary must be placed higher in the component hierarchy.

Error boundaries also do not generally handle errors from event handlers, asynchronous callbacks such as a later `setTimeout`, server-side rendering, or errors thrown by the boundary itself. Those cases need their own handling mechanisms or architectural solutions.

Key points

• A boundary protects its descendant component tree.
• Errors thrown above or outside the boundary are outside its scope.
• Move a boundary higher to cover a larger subtree.
• Event-handler and asynchronous errors are not automatically caught by React error boundaries.

Interview questions

What does an error boundary catch?

An error boundary catches supported errors thrown while React renders components in its descendant tree. It can then render fallback UI instead of the failed subtree. Its scope is determined by where the boundary appears in the component hierarchy. It does not automatically catch every JavaScript error in the application.

Why does boundary placement matter?

Placement determines which components are descendants of the boundary. A boundary placed around a small widget can isolate that widget without replacing unrelated UI. If a component outside the boundary throws, that boundary cannot handle the error. Moving the boundary upward expands its protected subtree.

Does an error boundary catch errors from event handlers?

No, React error boundaries are not a general replacement for `try/catch`. Errors thrown directly inside event handlers should normally be handled in the event-handler code. Similarly, errors that occur later in asynchronous callbacks are not automatically caught merely because the callback originated from a descendant component. The handling strategy must match where and when the error occurs.

If a child and its parent can both fail, where would you place the boundary?

The boundary should be placed above the largest subtree whose failure should be isolated, while still preserving useful application UI outside that scope. I would balance fault isolation against the fallback experience: one large boundary may hide too much UI, while many tiny boundaries can add complexity. Feature-level boundaries are often useful when independent areas should fail independently. The correct placement depends on the desired recovery and user experience.