Error boundaries

Error boundaries are class components (or library wrappers) implementing `getDerivedStateFromError` and/or `componentDidCatch`. They catch errors in child render, lifecycle methods, and constructors — not in event handlers, async code, or server rendering by themselves.

Place boundaries around route sections or risky widgets so one failure shows fallback UI instead of a white screen. Log errors to monitoring in `componentDidCatch`. Retry by resetting local state or navigating away.

Event handler errors need try/catch; async errors need `.catch` or error state.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Boundaries for render-time subtree failures.
• Local handling for events and async work.
• Fallback UI plus logging, not silent swallow.