Frontend framework

Vue observability, live in minutes.

Browser traces for Vue 3 over standard OpenTelemetry today, with a first-party error-handler and replay SDK in private beta.

Create a project Full Vue docs
Three steps

Standard OpenTelemetry, pointed at us.

No proprietary agent, no vendor SDK required on the server. If your service already exports OTLP, step two is the whole integration.

Private beta. The first-party SDK for this framework is in private beta and is not published to a public registry yet. Email [email protected] for access. Everything on this page that uses the OpenTelemetry SDKs works today.
  1. STEP 1
    Create a project

    Sign up, create a project, and copy its ingest token. Nothing to install on our side.

  2. STEP 2
    Point your exporter at us

    Set OTEL_EXPORTER_OTLP_ENDPOINT to https://ingest.tracepath.dev/api/otel and OTEL_EXPORTER_OTLP_HEADERS to "Authorization=Bearer <token>". If you already emit OpenTelemetry, that is the whole integration.

  3. STEP 3
    Or wire the SDK explicitly

    Prefer code over environment variables? Configure the OTLP exporters yourself, exactly as in the sample below. Standard OpenTelemetry packages only — nothing TracePath-specific.

Real code

A working instrumentation.ts.

Standard OpenTelemetry packages only — this is the actual shape of a Vue integration against TracePath.

import {
  WebTracerProvider,
  BatchSpanProcessor,
} from "@opentelemetry/sdk-trace-web";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { registerInstrumentations } from "@opentelemetry/instrumentation";
import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
import { resourceFromAttributes } from "@opentelemetry/resources";

const exporter = new OTLPTraceExporter({
  url: "https://ingest.tracepath.dev/api/otel/v1/traces",
  headers: { Authorization: `Bearer ${import.meta.env.VITE_TRACEPATH_TOKEN}` },
});

const provider = new WebTracerProvider({
  resource: resourceFromAttributes({ "service.name": "my-vue-app" }),
  spanProcessors: [new BatchSpanProcessor(exporter)],
});

provider.register();

registerInstrumentations({
  instrumentations: [getWebAutoInstrumentations()],
});
What you get

Built for Vue.

Document load, navigation and fetch/XHR spans via the OpenTelemetry Web SDK

Vue Router navigations show up as spans on the same trace

Source-map upload for minified production bundles

Global error handler and session recording: first-party plugin in private beta

Other frameworks

Next.jsNestJSExpressHonoGoFlutterReactSvelte

Instrument Vue today.

Free plan, no credit card. First event in under five minutes.

Start freeSee pricing