Next.js

Next.js observability with OpenTelemetry

Add distributed tracing to your Next.js application in minutes. Capture server components, API routes, and middleware spans automatically with Vercel's built-in instrumentation hook.

Quick start

Up and running in minutes

1

Install dependencies

bash
npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/exporter-logs-otlp-http
2

Configure instrumentation

typescript
// instrumentation.ts (project root)
import { registerOTel } from "@vercel/otel";
import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
import { SimpleLogRecordProcessor } from "@opentelemetry/sdk-logs";

const MAPLE_ENDPOINT = "https://ingest.maple.dev";
const headers = { authorization: "Bearer your-api-key" };

export function register() {
  registerOTel({
    serviceName: "my-next-app",
    attributes: { "deployment.environment.name": "production" },
    traceExporter: { url: `${MAPLE_ENDPOINT}/v1/traces`, headers },
    logRecordProcessor: new SimpleLogRecordProcessor(
      new OTLPLogExporter({ url: `${MAPLE_ENDPOINT}/v1/logs`, headers })
    ),
  });
}
What you get

Automatic instrumentation for Next.js

HTTP routes

Automatic spans for every page and route handler request with method, status, and duration.

API routes

Spans for API route handlers, with request and response metadata.

Server Components

Spans for React Server Component rendering and data fetching.

Middleware

Traces for Next.js middleware execution including redirects and rewrites.

Log correlation

Log records exported over OTLP carry the trace and span id of the request that wrote them.

External API calls

Outgoing fetch requests traced with context propagation. Add database client instrumentations through the instrumentations option.

Live trace preview

See your Next.js traces

Trace: Next.js App
GET /api/users
145ms
middleware/auth
12ms
pg.query SELECT users
34ms
fetch https://api.stripe.com
89ms
Explore more

Other integrations

오늘 첫 트레이스를 확인하세요.

SDK를 추가하고 OTLP 익스포터를 Maple로 향하게 하면 트레이스가 도착합니다.

maple.dev: OpenTelemetry 위의 옵저버빌리티