React framework

Next.js observability, live in minutes.

Errors, traces and session replay for Next.js — one provider for the browser, OpenTelemetry for the server.

Create a project Full Next.js docs
Three ways in

Snippet, wizard, or manual.

Lead with the fastest path — the copy-paste snippet with your token baked in. The wizard and manual setup stay available.

  1. STEP 1
    Copy-paste the snippet

    Create a project in TracePath, paste the browser snippet into app/layout.tsx. Your project token is baked in — no config files.

  2. STEP 2
    Run the wizard

    npx tracepath-wizard detects Next.js, installs @tracepath/react, and writes instrumentation.ts for you.

  3. STEP 3
    Manual path

    Install @tracepath/react and wire the OTel NodeSDK yourself — full control, same result.

Real code

A working instrumentation.ts.

Taken from our own examples and docs — this is the actual shape of a Next.js integration.

export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { NodeSDK } = await import("@opentelemetry/sdk-node");
    const { OTLPTraceExporter } = await import(
      "@opentelemetry/exporter-trace-otlp-http",
    );
    const { OTLPMetricExporter } = await import(
      "@opentelemetry/exporter-metrics-otlp-http",
    );
    const { PeriodicExportingMetricReader } = await import(
      "@opentelemetry/sdk-metrics",
    );
    const { getNodeAutoInstrumentations } = await import(
      "@opentelemetry/auto-instrumentations-node",
    );

    const tracepathUrl = process.env.TRACEPATH_URL || "https://ingest.tracepath.dev";
    const tracepathToken = process.env.TRACEPATH_TOKEN;

    const sdk = new NodeSDK({
      traceExporter: new OTLPTraceExporter({
        url: `${tracepathUrl}/api/otel/v1/traces`,
        headers: { Authorization: `Bearer ${tracepathToken}` },
      }),
      metricReader: new PeriodicExportingMetricReader({
        exporter: new OTLPMetricExporter({
          url: `${tracepathUrl}/api/otel/v1/metrics`,
          headers: { Authorization: `Bearer ${tracepathToken}` },
        }),
        exportIntervalMillis: 10_000,
      }),
      instrumentations: [getNodeAutoInstrumentations()],
    });

    sdk.start();
  }
}

Source: examples/nextjs-otel/instrumentation.ts in the TracePath repo. TODO-verify: snippet matches the latest SDK release before publishing.

What you get

Built for Next.js.

React error boundary + uncaught error capture via @tracepath/react

Server traces, DB spans and exceptions via OpenTelemetry auto-instrumentation

Session replay for the browser, shipped with every exception

Source-map symbolication for production minified stacks

Browse everything tagged #nextjs →

Other frameworks

NestJSExpressHonoGoFlutterReactVueSvelte

Instrument Next.js today.

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

Start freeSelf-host instead