How do you handle runtime errors in a React tree?

Error boundaries catch errors thrown during rendering, in lifecycle methods, and in constructors below them, then render a fallback instead of unmounting the whole app. They are still class components using getDerivedStateFromError and componentDidCatch, or a wrapper library. They do not catch errors in event handlers, async callbacks or the boundary itself, so those need ordinary try and catch plus reporting.

Error boundaries catch anything thrown while rendering the subtree beneath them, and swap in a fallback so one broken widget does not take down the page. I usually use the react-error-boundary wrapper rather than writing the class myself, since it gives me a reset handler for free. The gaps are the part people forget: nothing thrown in an onClick, a setTimeout, or an unhandled promise rejection reaches a boundary, so those still need try and catch with an explicit error state. On placement, one boundary at the root is basically a nicer crash screen. What I actually do is wrap each independently useful region, so the sidebar, the main panel, and any third party embed each have their own, with a fallback that says what failed and offers a retry that resets the boundary and refetches. Every boundary reports to our error tracker with component stack and user context in componentDidCatch, and in React 19 I also set onUncaughtError at the root so nothing slips through unlogged.