React集成OpenTelemetry透传Header缺失，Quarkus后端无Parent ID

我在React应用中集成OpenTelemetry时，控制台能正常打印Span，但HTTP请求头里缺少Trace相关透传Header，导致Quarkus后端无法保留Parent ID。以下是最初的非工作代码及修复后的工作代码：

非工作trace.ts代码 #

/* document-load.ts|js file - the code snippet is the same for both the languages */
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

// Trace provider (Main application trace)
const provider = new WebTracerProvider({
  resource: new Resource({
    "service.name": "frontend",
  })
});

const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()))

provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
});

// Registering instrumentations
registerInstrumentations({
  instrumentations: [
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
    new XMLHttpRequestInstrumentation({
      propagateTraceHeaderCorsUrls: [
        "http://localhost:8081"
      ]
    })
  ],
});

const tracer = provider.getTracer('react-tracer')

工作trace.ts代码 #

import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { W3CTraceContextPropagator, CompositePropagator, W3CBaggagePropagator } from "@opentelemetry/core";
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';

// Trace provider (Main application trace)
const provider = new WebTracerProvider({
  resource: new Resource({
    "service.name": "govi-ai-frontend",
  })
});


const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()))

provider.register({
    // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
    contextManager: new ZoneContextManager(),
    propagator: new CompositePropagator({
      propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()]
    })
});

// Registering instrumentations
registerInstrumentations({
  tracerProvider: provider,
  instrumentations: [
    getWebAutoInstrumentations({
      '@opentelemetry/instrumentation-fetch': {
        propagateTraceHeaderCorsUrls: /.*/,
        clearTimingResources: true,
        applyCustomAttributesOnSpan(span) {
          span.setAttribute("app.synthetic_request", false);
        }
      }
    }),
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
    new XMLHttpRequestInstrumentation()
  ],
});

const tracer = provider.getTracer('react-tracer')

关键修复点 #

• 显式配置Propagator：注册Trace Provider时添加CompositePropagator，整合W3C Trace Context和Baggage propagator，确保traceparent等标准Trace头被正确注入到HTTP请求中。
• 使用getWebAutoInstrumentations统一管理Fetch instrumentation：通过propagateTraceHeaderCorsUrls: /.*/允许向所有域名透传Trace头，同时添加自定义Span属性增强链路信息。
• 为registerInstrumentations指定tracerProvider：确保所有instrumentation都关联到同一个Trace Provider，避免上下文不一致导致的透传失效。
• 简化XMLHttpRequestInstrumentation配置：不再单独指定域名，交由自动 instrumentation 统一处理，减少重复配置。

内容的提问来源于stack exchange，提问作者Kavishka Madhushan