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：稳定追踪链路贯通；事件与指标上报成功率稳定