Error Boundary
A crash barrier around part of the UI that catches render failures and replaces the broken section with fallback content.
See it
What it is
An Error Boundary puts a failure wall around part of a component tree. If a descendant throws while rendering or during a lifecycle method, the boundary records the error and renders fallback UI instead of letting that whole visible tree disappear. In React, the core boundary API is still a class using getDerivedStateFromError and optionally componentDidCatch, which is why most codebases reach for Kent C. Dodds's react-error-boundary package instead of writing the class.
Place boundaries around regions that can fail independently, such as a route, editor, payment panel, or third-party widget. The fallback should explain what failed and offer a useful recovery action, while componentDidCatch reports the error and component stack to monitoring.
Gotcha: a boundary is not a universal try-catch. React boundaries do not catch errors from event handlers, arbitrary asynchronous callbacks, server rendering, or the boundary's own render. Handle expected request failures where the request happens, and put a second boundary higher up if the first boundary itself needs protection.
Ask AI for it
Wrap this React payment panel in an ErrorBoundary class using static getDerivedStateFromError for fallback state and componentDidCatch for Sentry.captureException. Render an accessible error message with a retry button that remounts the panel using a new key. Keep rejected fetches and onClick errors in their own try-catch paths because the boundary will not catch them.