Which headers does propagateTraceHeaderCorsUrls enables with FetchInstrumentation class and how to have tracestate propagated?

[alioshr]

Hello

I am currently integrating our Frontend with faro-sdk and for now we need to override the sdk config to enable traces propagation.

This is the link to the discussion for context

My doubt is which headers will get propagated by using the property propagateTraceHeaderCorsUrls?

import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';

// .....
          new FetchInstrumentation({
            ignoreUrls,
            propagateTraceHeaderCorsUrls,
          }),
          new XMLHttpRequestInstrumentation({
            ignoreUrls,
            propagateTraceHeaderCorsUrls,
          }),
// ......

I have noticed that the traceparent header is successfully propagated, but I also need the tracestate header. How can I achieve this using OTEL, or is it already supposed to add this header as well?

I did not find anything at all documenting these classes and their usage.

Thanks in advance!

[LarryHu0217]

propagateTraceHeaderCorsUrls does not choose individual header names. It only decides which cross-origin request URLs are allowed to receive propagation headers. For an allowed URL, the fetch instrumentation calls propagation.inject(context.active(), headers); the registered global propagator determines what is injected.

With the default W3C trace-context propagator, the possible fields are traceparent and tracestate. However, tracestate is emitted only when the active SpanContext actually has a traceState. A root span created in the browser normally has no trace state, so seeing only traceparent is expected. If the browser is continuing an extracted W3C context that contains tracestate, it should be forwarded automatically.

You can verify the active value immediately before the request:

const spanContext = trace.getSpanContext(context.active());
console.log(spanContext?.traceState?.serialize());

For a cross-origin request, also make sure the server's CORS preflight response allows both traceparent and tracestate in Access-Control-Allow-Headers. If the data is application metadata rather than vendor trace state, W3C baggage is the appropriate mechanism instead of manually constructing tracestate.

Relevant implementation:

• Fetch instrumentation injection
• W3C trace-context propagator