73Implement an error boundary with retry/reset behavior

Implement <ErrorBoundary fallback={…} onError={…} resetKeys={[…]}>. When a component inside it throws while rendering, show a fallback instead of a blank page, and let the user recover.

• fallback is a function ({ error, reset }) => ReactNode.
• onError(error, info) is called once per caught error (for logging).
• reset() clears the error and renders the children again.
• When any value in resetKeys changes (compared with Object.is), the boundary resets automatically. For example, navigating to another item should clear the previous item's error.

<ErrorBoundary
  resetKeys={[productId]}
  onError={(error) => logToSentry(error)}
  fallback={({ error, reset }) => (
    <div role="alert">
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <ProductDetails id={productId} />
</ErrorBoundary>

Requirements

• Error boundaries must be class components: use static getDerivedStateFromError and componentDidCatch.
• If the children still throw after a reset, show the fallback again.