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.
npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/exporter-logs-otlp-http // 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 })
),
});
} Automatic spans for every page and route handler request with method, status, and duration.
Spans for API route handlers, with request and response metadata.
Spans for React Server Component rendering and data fetching.
Traces for Next.js middleware execution including redirects and rewrites.
Log records exported over OTLP carry the trace and span id of the request that wrote them.
Outgoing fetch requests traced with context propagation. Add database client instrumentations through the instrumentations option.
SDK를 추가하고 OTLP 익스포터를 Maple로 향하게 하면 트레이스가 도착합니다.
maple.dev: OpenTelemetry 위의 옵저버빌리티