Provider
Not available yet. TracePath does not publish a React package, so nothing on this page can be imported or run today. It documents the planned component. See OpenTelemetry for the integration path that works now.
The provider is the single setup point for a React app: it initializes the SDK, supplies context to the hooks below it, and acts as an error boundary for the tree it wraps.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
connectionString | string | Yes | Project token and ingest endpoint |
options | object | No | SDK configuration, see below |
children | ReactNode | Yes | The tree to wrap |
Options
| Option | Type | Default | Description |
|---|---|---|---|
debug | boolean | false | Log SDK problems to the console: failed uploads, a beforeCapture that threw, and errors dropped by ignoreErrors / beforeCapture. Captured events themselves are not logged |
debounceMs | number | 1500 | Batch delay in milliseconds |
retryDelayMs | number | 10000 | Retry delay for failed uploads |
version | string | undefined | Your application version |
ignoreErrors | Array<string | RegExp> | built-in defaults | Error patterns to suppress. An empty array captures everything. See Error Filtering |
beforeCapture | (exception) => boolean | undefined | Return false to suppress an error |
sessionRecording | boolean | true | Enable the rrweb session recorder |
sessionRecordingSegmentDuration | number | 30000 | Segment length in ms |
recordAllSessions | boolean | false | Always-on session recording. See Sessions |
captureLogs | boolean | true | Mirror console.* calls into the rolling log buffer |
captureNetwork | boolean | true | Record fetch / XHR calls as network actions |
captureNavigation | boolean | true | Record History API push / replace / pop transitions |
eventsWindowMs | number | 10000 (30000 with recordAllSessions) | Rolling log/action buffer window |
eventsMaxCount | number | 200 (600 with recordAllSessions) | Hard cap on log/action buffer entries |
captureHttpServerErrors | boolean | false | Report every fetch response with status >= 500 as a synthetic exception. 4xx is never included, and it is wired into the fetch wrapper only, so XMLHttpRequest (including browser Axios) does not trigger it |
Placement
The provider goes as high in the tree as you can put it — the root App component or the
entry file — because it only captures render errors thrown below itself, and because the
SDK should be initialized before any other code has a chance to throw.
Each environment should use its own TracePath project and therefore its own connection string, selected from an environment variable at build time.
A note on StrictMode
The provider initializes the SDK in its constructor, and React's StrictMode double-invokes
constructors in development. Two clients get created, so every uncaught error is reported
twice and two batches are uploaded. Production builds do not double-invoke, so live counts
are correct. If the doubled counts get in the way while you develop, mount the provider
outside <StrictMode> rather than inside it.
Custom attributes
App-level identifiers — userId, tenant, feature flags — will be bindable two ways:
- Declaratively, as a component or a hook taking a map of attributes. Each render diffs
against the previous map and pushes only the deltas; on unmount, every key it owns is
removed.
nullandundefinedare accepted as "empty map", which is the useful state while user data is loading or after logout. - Imperatively, as plain functions for code outside a component tree: background workers, auth listeners, init scripts.
Treat a key as owned by whichever mechanism set it. Setting the same key from both means the declarative cleanup on unmount removes a value the imperative side still expects.
Layering on each event is defaults < global scope < per-call. See Sessions for the full attribute model.
Context access
The context the provider supplies is exported directly for class components and other advanced cases, but the hook is the intended interface.