Frontend framework

React observability, live in minutes.

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

Create a project Full React 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 React 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-react-app" }),
  spanProcessors: [new BatchSpanProcessor(exporter)],
});

provider.register();

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

Built for React.

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

User interaction spans, correlated with your backend traces

Source-map upload and debug-ID support for minified bundles

Render-error boundary and session replay: first-party SDK in private beta

Other frameworks

Next.jsNestJSExpressHonoGoFlutterVueSvelte

Instrument React today.

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

Start freeSee pricing