Context Setup
Not available yet. TracePath does not publish a Svelte package, so nothing on this page can be imported or run today. It documents the planned integration. See OpenTelemetry for the integration path that works now.
The Svelte package will use Svelte's context API rather than a wrapper component: a setup call in the root layout initializes the SDK and puts the capture functions into context, and a getter retrieves them in any component below.
Setup call
The setup call must run during component initialization, not inside an event handler or
onMount. It calls the SDK's initialization synchronously, so everything captured after that
point is recorded — including captures in a child component's setup code that runs before
onMount. There is no pre-initialization buffer: a capture made before the setup call is
dropped.
Do not wrap it in an if (browser) guard. The call is what puts the capture functions
into context, so skipping it during SSR makes every child component's getter throw and the
page return a 500. Running it on the server is safe: the recorder and the fetch/XHR
instrumentation only start where window exists.
Options
| Option | Type | Required | Description |
|---|---|---|---|
connectionString | string | Yes | Project token and ingest endpoint |
options | object | No | SDK configuration, see below |
SDK options
| Option | Type | Default | Description |
|---|---|---|---|
debug | boolean | false | Log suppressed exceptions and failed uploads to the console |
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 |
In components
The context getter will return the same four functions every TracePath JS package exposes:
| Function | Description |
|---|---|
captureException(error) | Capture an error with its stack trace |
captureExceptionWithAttributes(error, attributes) | Capture an error with extra context attached |
captureMessage(message) | Send a non-error event |
recordAction(category, name, data) | Drop a breadcrumb into the rolling action buffer that ships with the next exception |
Attribute values must be strings: the ingest endpoint types them as a string map and rejects
the whole upload with 400 Bad Request otherwise, and the SDK re-queues a rejected batch, so
one bad value blocks every later event from that page.
SvelteKit error handling
handleError in src/hooks.client.js is where SvelteKit hands you the real error from a
failed load or a render crash during client-side navigation. Svelte context is not
available inside a hook, so the package will also export the capture functions directly for
this case — they are the same functions the context getter returns.
Do not capture from +error.svelte. That page only receives $page.error, which
SvelteKit has already reduced to a plain { message } object. Capturing it produces an issue
titled Object: Internal Error with no stack trace and no original message. Use the page for
display and let handleError do the reporting.
Render errors in Svelte 5
Svelte 5's <svelte:boundary> catches errors thrown while its children render and hands them
to an onerror callback. The package will export a ready-made callback for that slot, so a
boundary reports to TracePath without any wrapper code of its own.
Custom attributes
App-level identifiers — userId, tenant, feature flags — will be bindable two ways:
- A factory, called once during component setup, returning a setter you invoke from
$effectin Svelte 5 or a reactive statement in Svelte 4. The setter diffs against the last map and pushes only the deltas; the component's teardown removes every key it owns.nullandundefinedare accepted as "empty map", which is the useful state while user data loads or after logout. - Plain imperative functions, for load functions, hooks and anything outside a component.
Layering on each event is defaults < global scope < per-call. See Sessions for the full attribute model.
Environment variables
Use a separate TracePath project per environment and read its connection string from a
PUBLIC_-prefixed SvelteKit environment variable. The token is public by design: it only
grants ingest for that one project.