React (coming soon)
Error Boundary

Error Boundary

⚠️

Not available yet. TracePath does not publish a React package, so the component described here cannot be imported today. See OpenTelemetry for the integration path that works now.

The provider is itself an error boundary: it catches render errors anywhere below it, reports them, and re-throws so the app behaves as it would without TracePath. A separate error boundary component is planned for one job only — replacing a crashed subtree with a custom fallback UI instead of letting the error propagate.

Reach for it when a failure should be contained rather than fatal. A crashing sidebar can show an inline message while the rest of the page keeps working; nesting boundaries around independent regions is what makes that possible. Reach for nothing at all when you just want the error reported — the provider already did that.

Planned props

PropTypeRequiredDescription
childrenReactNodeYesThe subtree to isolate
fallbackReactNodeYesWhat to render in place of the crashed subtree
onErrorfunctionNoCalled with the error and React's error info when a crash is caught

What an error boundary catches

React error boundaries, TracePath's included, catch:

  • Errors thrown while rendering
  • Errors in lifecycle methods
  • Errors in the constructors of child components

They do not catch:

  • Errors in event handlers — use a try/catch and the hook
  • Errors in async code — same
  • Server-side rendering errors
  • Errors thrown by the boundary itself

The first two are the common surprise, and they are exactly the gap the hook exists to fill.

Resetting

An error boundary holds its error state until it is remounted. The standard React idiom applies: change its key to remount it, which is how a "Try again" button in a fallback UI clears the crash without a full page reload.