Next.js

Server-side Instrumentation

Vercel provides a comprehensive OpenTelemetry integration through the @vercel/otel package. After following Vercel’s integration instructions, add the following environment variables to your project:

Terminal

OTEL_EXPORTER_OTLP_ENDPOINT=https://logfire-api.pydantic.dev
OTEL_EXPORTER_OTLP_HEADERS='Authorization=your-write-token'

This configuration directs the OpenTelemetry instrumentation to send data to Logfire.

Note

Vercel production deployments use a caching mechanism that may prevent configuration changes from taking effect immediately or prevent spans from being reported. If you don’t see spans appearing in Logfire, you can clear the data cache for your project.

Optionally, you can use the Logfire API package to create manual spans. Install the logfire NPM package and call the appropriate methods from your server-side code:

import * as logfire from "logfire";

export default async function Home() {
  return logfire.span(
    "A warning span",
    {},
    {
      level: logfire.Level.Warning,
    },
    async (span) => {
      logfire.info("Nested info span");
      // Call span.end() to ensure the span is properly reported
      span.end();
      return <div>Hello</div>;
    },
  );
}

A working example can be found in the examples/nextjs directory.

Client-side Instrumentation

Client-side instrumentation can be implemented using the @pydantic/logfire-browser package. To set it up, you need to complete the following steps:

• Add a proxy to the Logfire traces endpoint in proxy.ts to prevent exposing your Logfire write token.
• Wrap the browser instrumentation in a client-only React component. Use next/dynamic to ensure the component renders only in the browser (see example).

A complete working example can be found in the examples/nextjs-client-side-instrumentation directory.