Rollbar.js Tracing 指南如何快速打通前后端分布式追踪链路【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene后端突然 500日志里只剩报错堆栈用户当时点了哪个按钮、走了哪段流程无从确认。Rollbar.js Tracing 把浏览器里的一次操作和服务端错误挂到同一个 traceId 下让这条前后端错误链路变得可查。 它解决什么问题Trace、Span、Context 三个概念传统错误追踪只告诉你哪里报错了却不告诉你整个请求经历了什么。把浏览器到服务端的完整请求串起来就是分布式追踪要干的事而 Rollbar.js Tracing 基于OpenTelemetryOTel业界通用的可观测性数据模型实现你只需记住三件事Trace一次完整请求的生命周期用全局唯一的 traceId 标识Span请求中的某一段操作一次接口调用、一个业务函数用 spanId 标识可挂在父 Span 之下Context装着 traceId 的容器会沿着调用链自动带到下一层代码前端和后端上报的 Span 只要携带同一个 traceIdRollbar 就能把它们拼装成一条端到端链路。⚡ 最快启用一行配置 withSpan 创建第一个追踪 Span打开总开关Tracing 默认是关闭的初始化时打开tracing.enabled即可。此时 Rollbar 会自动创建 Tracer、SpanProcessor并基于 sessionStorage 建一个 Session会话标识随之持久化同一次访问期间的多个 Span 都共享它实现见 src/tracing/tracing.js 与 src/tracing/session.jsconst rollbar new Rollbar({ accessToken: YOUR_POST_CLIENT_ITEM_TOKEN, tracing: { enabled: true }, });它做了什么开启 Tracing 模块并自动创建会话后续 Span 都会自动共享这个会话标识。用 withSpan 包裹关键业务主推写法是withSpan回调执行期间它把当前 Span 设为活跃 Span回调结束后自动恢复上下文不需要你手动清理rollbar.tracing.withSpan(checkout-payment, { attributes: { orderId: 123 }, }, () { callPaymentAPI(); rollbar.error(new Error(支付失败)); });它做了什么回调内上报的rollbar.error()会自动附带 trace_id、span_id、session_id不用手写任何关联逻辑。若 Span 要跨多个异步步骤可改用startSpan手动创建、最后调span.end()src/tracing/span.js还支持setAttribute加业务属性、addEvent记录关键事件。 一个 traceId 的旅程上下文传播与 Span 上报前端内部子 Span 自动继承 traceId在已有 Span 的上下文里再创建 Span 时Tracer 会自动继承父级的 traceId并生成新的 spanId 作为父引用实现见 src/tracing/tracer.js。维护当前活跃的是哪个上下文的是 ContextManager支持进入/退出任意上下文src/tracing/contextManager.js所以嵌套的业务代码不用手动传 ID。跨到后端traceparent 头传递前端请求后端时会在请求头里带上 OTel 标准的traceparentW3C Trace Context 格式内容就是 traceId 加当前 spanIdtraceparent: 00-traceId-spanId-01它做了什么把上下文写进请求头服务端 SDK 读取后继续以同一个 traceId 创建 Span——这样即使错误最终抛在服务端你也能回溯到前端触发它的操作。上报监听结束事件按 OTLP 批量导出SpanProcessor监听 Span 的onStart/onEnd事件配置tracing.transformSpan可以在导出前修改 Spansrc/tracing/spanProcessor.jsSpanExporter把 Span 转成 OTLPOpenTelemetry 标准传输格式按 instrumentation scopeSDK 模块标识分组经api.postSpans批量上报到 session 端点默认端点在 src/tracing/defaults.js换成自建 OTel 收集器只需改这里src/tracing/exporter.js 在控制台验证链路附 3 个常见坑触发一次带 Span 的错误后打开 Rollbar 控制台的 Items 页面错误条目会带频率统计与 Traceback 详情其中 Trace 信息可点击一键跳转查看完整调用链。完整的错误与 Span 关联断言见 test/browser.rollbar.test.ts。三个常见坑没开总开关tracing.enabled默认 false不写这一项就不会有任何 Span 上报控制台自然是空的Session 依赖 sessionStorage开新标签页或清除站点数据都会产生新会话别期待跨端共享会话 ID错误报在回调外withSpan回调之外的rollbar.error()拿不到活跃上下文错误不会关联到任何 Span Rollbar.js Tracing 配置速查配置项作用说明tracing.enabled总开关默认falsesrc/tracing/defaults.jstracing.endpointSpan 上报地址默认 session 端点可替换自建收集器tracing.transformSpan导出前自定义修改 Spansrc/tracing/spanProcessor.jspayload.environment环境名自动写入 Resource 属性src/tracing/tracing.js✅ 下一步从单点 Span 到全链路把全局 fetch / axios 的请求拦截器统一用withSpan包一层让每个出站请求自动携带traceparent服务端 SDK 读取traceparent创建子 Span补上端到端这一段之后即可按 traceId 查询整条链路用transformSpan在导出前过滤敏感属性或把endpoint指向自建 OTel 收集器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考