Vue.js (coming soon)
Overview

Vue.js

⚠️

Not available yet. TracePath does not publish a Vue 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 Vue package will wrap the browser SDK as a Vue 3 plugin: install it on the app instance once, and capture from components through a composable.

What it will give you

PieceRole
PluginInitializes the SDK and installs app.config.errorHandler
ComposablesCapture exceptions, messages and actions inside components

Installing the plugin will register a global error handler covering component render errors, watcher errors and lifecycle hook errors, on top of the uncaught-error and unhandled-rejection handlers every TracePath JS package installs. Session recording will be on by default, shipping the last ~30 s of DOM events with each captured exception.

Two things to know before it ships, because they shape how you structure your app:

  • Vue has a single app.config.errorHandler slot. If your app assigns its own handler after the plugin, it replaces TracePath's and component errors stop being reported. The plugin page covers how to keep both.
  • In Nuxt, the plugin must run universally, not as a .client plugin, or the injection key is missing during SSR and the first component that uses the composable fails the render.

What to do today

If your Vue app has a Nuxt or Node server half, instrument it now with OpenTelemetry — that half is fully supported. See Node.js. The browser half and the server half are two separate TracePath projects with two separate tokens either way; see Project Structure.

For a pure client-side app, synthetic monitors can watch it from the outside today with no code in the page.

Distributed tracing

The backend side of frontend-to-backend correlation is already implemented and worth adding now: your server reads a tracepath-trace-id header and puts it on its span. See Distributed Tracing.