Next.js Instrumentation

Use this for Next.js apps. Instrument server-side Next telemetry separately from optional browser tracing.

Server-Side Tracing

Install in the Next.js app package:

npm install @vercel/otel logfire

Create instrumentation.ts in the project root, or src/instrumentation.ts if the app uses src:

import { registerOTel } from '@vercel/otel'

export function register() {
  registerOTel({
    serviceName: process.env.LOGFIRE_SERVICE_NAME ?? 'nextjs-app',
  })
}

Set server-only env vars in .env.local, deployment secrets, or the hosting dashboard:

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

Do not prefix write-token variables with NEXT_PUBLIC_.

Manual Server Spans

Use the runtime-agnostic logfire package in server components, route handlers, server actions, and other server-only code:

import * as logfire from 'logfire'

export default async function Page() {
  return logfire.span('render home page', {
    callback: async () => {
      logfire.info('loading homepage data')
      return <main>Hello</main>
    },
  })
}

Route handler error reporting:

import * as logfire from 'logfire'

export async function POST(request: Request) {
  try {
    return Response.json(await createOrder(await request.json()))
  } catch (error) {
    logfire.reportError('create order route failed', error)
    throw error
  }
}

Client-Side Browser Tracing

Browser tracing uses a frontend application, which supplies a restricted public token and pins the browser service identity at ingest. This is separate from the ordinary write token used by Next.js server-side tracing.

Open Frontend → Applications, create or select the browser application, and copy its generated configuration. If that page is unavailable, explain that browser setup cannot continue with an ordinary write token and direct the user to Logfire support.

Install:

npm install @pydantic/logfire-browser

Use @pydantic/logfire-browser 0.21.0 or later for configureFrontend(). It enables auto-instrumentation and Web Vitals metrics by default. Set autoInstrumentations: false to disable automatic instrumentation. Set rum: { webVitals: false } to disable Web Vitals spans and metrics, or rum: { webVitals: { metrics: false } } to keep Web Vitals spans without metrics. Nested capture options preserve unrelated defaults. Session replay remains opt-in through the optional replay integration.

Create a client-only component using the exact regional base URL and restricted token from the generated setup. The restricted token is designed to be public and may be embedded in the client bundle or supplied through the app's public build/runtime configuration. Replace both placeholders before deploying:

'use client'

import * as logfire from '@pydantic/logfire-browser'
import { useEffect, useRef } from 'react'

export function ClientInstrumentation() {
  const configured = useRef(false)

  useEffect(() => {
    if (!configured.current) {
      logfire.configureFrontend({
        baseUrl: '<generated-regional-base-url>',
        token: '<frontend-application-token>',
      })
      configured.current = true
    }
  }, [])

  return null
}

Mount this component once at the app root and do not return the asynchronous SDK cleanup from its effect. The ref prevents React Strict Mode's development-only second effect setup from configuring Logfire twice. Tests, previews, or app shells that intentionally replace the whole telemetry setup should await the cleanup returned by configureFrontend() before configuring a replacement.

Import this Client Component normally from an App Router Server Component. If the app needs next/dynamic with ssr: false, put that dynamic import in another Client Component; Next.js rejects ssr: false directly in a Server Component.

Do not set serviceName, serviceNamespace, or the environment in browser configuration; the frontend application pins those values. Never substitute the server's LOGFIRE_TOKEN or another ordinary write token for the frontend application token.

If the repository already routes browser telemetry through a backend, preserve that architecture using the lower-level configure() and follow the browser SDK guide's optional-proxy contract. Do not add a new Next.js rewrite merely to hide the restricted frontend token.

When maintaining a proxy, compare each request's Origin against an explicitly configured allowed origin, such as LOGFIRE_PROXY_ALLOWED_ORIGIN (or the application's existing equivalent). Reject requests when that configuration is absent, the Origin header is missing, or it does not match. Do not derive the allowed origin from the incoming request. Preserve the proxy's authentication and rate limits as well; an origin check alone is not authentication.

Vercel Deployment Notes

• Add server OTLP and ordinary Logfire token values to the Vercel project environment. Supply the separate frontend application configuration through the app's existing public runtime-config mechanism.
• If spans do not appear after changing tracing env vars, clear the Vercel data cache for the project and redeploy.
• Confirm server and browser data appear as distinct services; the frontend application's identity owns the browser service name.