Plugin Setup

⚠️

Not available yet. TracePath does not publish a Vue package, so nothing on this page can be imported or run today. It documents the planned plugin. See OpenTelemetry for the integration path that works now.

The plugin is the single setup point for a Vue 3 app: it initializes the SDK, provides the client through Vue's injection system, and installs the global error handler.

Plugin 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 dropped events 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

Error handling

The plugin assigns app.config.errorHandler, which is how component render errors, watcher errors and lifecycle hook errors reach TracePath.

Vue has exactly one such slot. If your application assigns its own handler after the plugin is installed, it silently replaces TracePath's and those errors stop being reported — uncaught errors and unhandled rejections keep flowing, so the feed looks alive while a whole category of errors has gone missing. To keep both, install the plugin first and then, inside your own handler, call the package's exported capture function yourself before doing whatever else your handler does.

Environments

Use a separate TracePath project, and therefore a separate connection string, per environment. In a Vite app that means a VITE_-prefixed environment variable read at build time; the token is public by design, since it only grants ingest for that one project.

Custom attributes

App-level identifiers — userId, tenant, feature flags — will be bindable three ways:

A composable taking a getter, so it tracks reactive state, pushes only the keys that changed, and removes the keys it owns when the component unmounts. Returning null means "empty map", which is the useful state while user data loads or after logout.
A declarative component doing the same thing, rendering nothing, cleaning up on unmount.
Plain imperative functions, for code outside components.

Treat every key passed to the composable or the component as owned by it: setting the same key imperatively elsewhere means the unmount cleanup removes a value the other side still expects. When driving the scope imperatively from a watchEffect, remove keys individually rather than clearing the whole scope — clearing empties the global scope and drops keys set by unrelated parts of the app.

Layering on each event is defaults < global scope < per-call. See Sessions for the full attribute model.

Nuxt

In Nuxt 3 the plugin file must run universally — plugins/tracepath.ts, not plugins/tracepath.client.ts. A .client plugin never runs during SSR, so the injection key is missing on the server, and the first component that calls the composable fails the render with an HTTP 500.

Running universally is safe: the plugin only installs the browser handlers and the recorder when window exists, so the server pass does nothing except provide the injection key.

Composables: the in-component API
Initialization: the shared option reference

Overview Composables