React
Not available yet. TracePath does not publish a React package. There is nothing to
install, and the @tracepath scope on npm belongs to an unrelated third party — do not run
an install command against it. This page describes the planned integration. Email
[email protected] to hear when it ships.
The planned React package will wrap the browser SDK in the idioms a React app expects: one provider at the root of the tree, a hook for capturing inside components, and a declarative way to keep user context attached to every event.
What it will give you
| Piece | Role |
|---|---|
| Provider | Initializes the SDK once, and doubles as an error boundary for the whole tree |
| Hooks | Capture exceptions and messages from event handlers and async code |
| Error boundary | Opt-in component for replacing a crashed subtree with a custom fallback |
Render-time exceptions thrown anywhere below the provider will be captured and then re-thrown, so the app behaves exactly as it would without TracePath installed. Session recording will be on by default, shipping the last ~30 s of DOM events with each captured exception.
One React-specific wrinkle worth knowing in advance: StrictMode double-invokes
constructors in development, which creates two SDK clients and reports every uncaught error
twice. Production builds are unaffected. See
A note on StrictMode.
What to do today
If your React app has a server half — Next.js, Remix, or any Node backend — instrument it now with OpenTelemetry. That half is fully supported:
The browser half and the server half are two separate TracePath projects with two separate tokens either way; see Project Structure for why.
If it is a pure client-side app, synthetic monitors can watch it from the outside today with no code in the page at all.
Distributed tracing
The backend side of frontend-to-backend correlation is already implemented and is worth
adding now: your server reads a tracepath-trace-id header and puts it on its span. See
Distributed Tracing for the middleware, which is a few
lines and runs today.