前端OpenTelemetry中Token动态更新方案问询

DevOps 小满

2026-6-14

解决React前端OTLP日志上报中Token动态更新的问题

你的思路是对的——通过重写OTLPLogExporter的send方法动态注入最新Token，下面提供两种更健壮的可行方案：

方案一：完善自定义Exporter的Token动态注入

你的自定义DynamicOTLPLogExporter方向正确，补充细节优化后可以稳定运行：

class DynamicOTLPLogExporter extends OTLPLogExporter {
  private baseHeaders: Record<string, string>;

  constructor(config: OTLPLogExporterConfig) {
    super(config);
    // 保留初始化时的基础请求头
    this.baseHeaders = config.headers ?? {};
  }

  send(
    objects: any[],
    onSuccess: () => void,
    onError: (error: any) => void
  ): void {
    // 合并基础请求头与最新Token
    const dynamicHeaders = {
      ...this.baseHeaders,
      Authorization: window.accessToken ?? "",
      concurrencyLimit: "1",
    };

    // Token为空时直接触发错误回调，避免无效请求
    if (!dynamicHeaders.Authorization) {
      onError(new Error("日志上报Token为空，无法发送请求"));
      return;
    }

    this.headers = dynamicHeaders;
    super.send(objects, onSuccess, onError);
  }
}

替换原Exporter使用：

const logExporter = new DynamicOTLPLogExporter({ 
  url: `${COLLECTOR_URL}/logs`, 
  headers: commonHeaders 
});

方案二：全局请求拦截器（无需修改Exporter）

如果OTLPLogExporter底层基于fetch发送请求，可以通过全局拦截器动态注入Token：

const originalFetch = window.fetch;
window.fetch = async (url: RequestInfo, options: RequestInit = {}) => {
  // 仅拦截Collector日志上报请求
  if (typeof url === 'string' && url.includes(`${COLLECTOR_URL}/logs`)) {
    options.headers = {
      ...options.headers,
      Authorization: window.accessToken ?? "",
      concurrencyLimit: "1",
    };
  }
  return originalFetch(url, options);
};