如何在浏览器端OpenTelemetry中为所有fetch请求添加默认Baggage头

你遇到的问题其实是因为默认Baggage的上下文没有被正确设置为全局活跃的上下文——OpenTelemetry的自动 instrumentation（比如对fetch的监控）只会从当前活跃上下文中提取Baggage来注入请求头，之前的代码只是创建了上下文，但没让它成为全局生效的环境。另外还有个小细节：createBaggage的参数格式你可能写错了，这也会导致设置不生效。

给你整理了修正后的完整配置，关键步骤我都标出来了：

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { W3CBaggagePropagator } from '@opentelemetry/core';
// 必须导入API层的context和propagation，用来操作上下文
import { context, propagation } from '@opentelemetry/api';

function initOtel() {
  const provider = new WebTracerProvider();
  
  provider.register({
    contextManager: new ZoneContextManager(),
    propagator: new W3CBaggagePropagator(),
  });

  // 1. 创建默认Baggage：注意每个键对应的值是包含value的对象（可选加metadata）
  const defaultBaggage = propagation.createBaggage({
    userId: { value: '12345' },
    transactionId: { value: 'abcdef' }
  });

  // 2. 将带默认Baggage的上下文设为活跃上下文，并让后续代码在这个环境中执行
  context.with(propagation.setBaggage(context.active(), defaultBaggage), () => {
    // 3. 在这个上下文内注册instrumentation，确保fetch监控能继承默认Baggage
    registerInstrumentations({
      instrumentations: [getWebAutoInstrumentations()],
    });

    // 把你的应用初始化代码也放在这里，确保整个应用都在这个上下文里运行
    // 比如：initYourWebApp();
  });
}

initOtel();

为什么这样能生效？ #

• ZoneContextManager是通过Zone.js来跟踪上下文的，context.with()会把回调内的所有代码绑定到指定的上下文环境中。这样后续所有的用户交互（比如点击按钮触发的fetch）都会继承这个带有默认Baggage的上下文。
• OpenTelemetry的fetch自动 instrumentation 会在发送请求时，从当前活跃上下文中提取Baggage，自动注入到请求头里，就像traceparent的逻辑一样。

验证方法 #

打开浏览器开发者工具的「网络」面板，随便触发一个fetch请求，查看请求头里是否出现了baggage: userId=12345,transactionId=abcdef，如果有就说明配置成功了。

备注：内容来源于stack exchange，提问作者Eliran