Next.js 15 OpenTelemetry traceparent 贯穿 App Router 与 Edge 路由实践 OTLP 上报

概览通过 `traceparent` 将浏览器端与服务端的请求关联起来，结合 Edge Runtime 的 Route Handlers 能实现低延迟的追踪事件上报。OTLP HTTP 上报适合多平台后端。客户端生成与透传'use client' function genTraceparent(): string { const version = '00' const traceId = crypto.randomUUID().replace(/-/g, '').slice(0, 32) const spanId = crypto.randomUUID().replace(/-/g, '').slice(0, 16) const flags = '01' return `${version}-${traceId}-${spanId}-${flags}` } export async function fetchWithTrace(url: string) { const tp = genTraceparent() return fetch(url, { headers: { traceparent: tp } }) } Edge Route 上报app/api/ingest/route.tsexport const runtime = 'edge' export async function POST(req: Request) { const tp = req.headers.get('traceparent') || undefined const payload = await req.json() await fetch(process.env.OTLP_HTTP_EXPORT!, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ traceparent: tp, payload }), }) return Response.json({ ok: true }) } App Router 透传// app/posts/[id]/route.ts export async function GET(req: Request, { params }: { params: { id: string } }) { const tp = req.headers.get('traceparent') || '' const data = await fetch(`https://api.example.com/posts/${params.id}`, { headers: { traceparent: tp } }).then(r => r.json()) return Response.json({ data }) } 治理要点保持 `traceparent` 在客户端与服务端一致传递，避免断链。使用环境变量管理 OTLP 端点，避免泄露。结合指标与日志采集，实现端到端观测面。验证与指标浏览器：Chrome 120+、Edge 120+；API 兼容Next.js：15.0+；Edge Runtime：稳定追踪链路贯通；事件与指标上报成功率稳定