Error Boundaries and Error Handling Patterns

When a React component throws an error during rendering, by default the entire component tree unmounts, leaving the user with a blank screen. Error boundaries prevent this: they are components that catch errors in their subtree during rendering, display a fallback UI instead of crashing the whole app, and let you log the error. They are React's mechanism for graceful degradation when something goes wrong.

An error boundary catches errors thrown during rendering, in lifecycle methods, and in constructors of the components below it. Importantly, it does not catch errors in event handlers, asynchronous code, or its own code — those need ordinary try/catch or other handling. Knowing this boundary of what boundaries catch is essential to handling errors correctly.

This lesson covers what error boundaries are, how to create them (still a class-component feature, or via the popular react-error-boundary library), where to place them for resilience, what they do and do not catch, and how they combine with Suspense. The goal is an app that fails gracefully and recoverably rather than crashing entirely.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.