@dash0/sdk-web 0.22.0 → 0.23.0

package/src/api/init.ts

@@ -29,8 +29,8 @@ import { startWebVitalsInstrumentation } from "../instrumentations/web-vitals";
 import { startErrorInstrumentation } from "../instrumentations/errors";
 import { addAttribute } from "../utils/otel";
 import { instrumentFetch } from "../instrumentations/http/fetch";
+import { instrumentXhr } from "../instrumentations/http/xhr";
 import { startNavigationInstrumentation } from "../instrumentations/navigation";
-import { merge } from "ts-deepmerge";
 import { initializeTabId } from "../utils/tab-id";
 import { InitOptions, InstrumentationName } from "../types/options";
 import { BrowserBuildEnv, pickFirstString } from "./browser-env";
@@ -121,6 +121,9 @@ export function init(opts: InitOptions) {
   if (isInstrumentationEnabled("@dash0/fetch", opts)) {
     instrumentFetch();
   }
+  if (isInstrumentationEnabled("@dash0/xhr", opts)) {
+    instrumentXhr();
+  }
 
   hasBeenInitialised = true;
 }
@@ -285,3 +288,26 @@ function isInstrumentationEnabled(name: InstrumentationName, opts: InitOptions):
 
   return instrumentations.includes(name);
 }
+
+function merge<T extends Record<string, unknown>>(target: T, source: Partial<T>): T {
+  const result = { ...target };
+  for (const key of Object.keys(source) as Array<keyof T>) {
+    const srcVal = source[key];
+    const dstVal = target[key];
+    if (srcVal !== undefined) {
+      if (
+        srcVal !== null &&
+        typeof srcVal === "object" &&
+        !Array.isArray(srcVal) &&
+        typeof dstVal === "object" &&
+        dstVal !== null &&
+        !Array.isArray(dstVal)
+      ) {
+        result[key] = { ...dstVal, ...srcVal } as T[keyof T];
+      } else {
+        result[key] = srcVal as T[keyof T];
+      }
+    }
+  }
+  return result;
+}

package/src/api/init_test.ts

@@ -30,6 +30,10 @@ vi.mock("../instrumentations/http/fetch", () => ({
   instrumentFetch: vi.fn(),
 }));
 
+vi.mock("../instrumentations/http/xhr", () => ({
+  instrumentXhr: vi.fn(),
+}));
+
 vi.mock("../instrumentations/navigation", () => ({
   startNavigationInstrumentation: vi.fn(),
 }));
@@ -45,6 +49,7 @@ vi.mock("../utils", async () => {
 
 import { startErrorInstrumentation } from "../instrumentations/errors";
 import { instrumentFetch } from "../instrumentations/http/fetch";
+import { instrumentXhr } from "../instrumentations/http/xhr";
 import { startNavigationInstrumentation } from "../instrumentations/navigation";
 import { startWebVitalsInstrumentation } from "../instrumentations/web-vitals";
 
@@ -84,6 +89,7 @@ describe("init", () => {
       expect(startWebVitalsInstrumentation).toHaveBeenCalled();
       expect(startErrorInstrumentation).toHaveBeenCalled();
       expect(instrumentFetch).toHaveBeenCalled();
+      expect(instrumentXhr).toHaveBeenCalled();
     });
 
     const instrumentations: InstrumentationName[] = [
@@ -91,12 +97,14 @@ describe("init", () => {
       "@dash0/web-vitals",
       "@dash0/error",
       "@dash0/fetch",
+      "@dash0/xhr",
     ];
     const instrumentationMocks = {
       "@dash0/navigation": startNavigationInstrumentation,
       "@dash0/web-vitals": startWebVitalsInstrumentation,
       "@dash0/error": startErrorInstrumentation,
       "@dash0/fetch": instrumentFetch,
+      "@dash0/xhr": instrumentXhr,
     };
 
     instrumentations.forEach((instrumentation) => {

package/src/instrumentations/http/fetch.ts

@@ -1,27 +1,6 @@
-import {
-  debug,
-  observeResourcePerformance,
-  perf,
-  win,
-  setTimeout,
-  isSameOrigin,
-  wrap,
-  parseUrl,
-  clearTimeout,
-} from "../../utils";
-import { isUrlIgnored, matchesAny } from "../../utils/ignore-rules";
-import {
-  addAttribute,
-  setSpanStatus,
-  addW3CTraceContextHttpHeaders,
-  addXRayTraceContextHttpHeaders,
-  endSpan,
-  errorToSpanStatus,
-  Exception,
-  InProgressSpan,
-  recordException,
-  startSpan,
-} from "../../utils/otel";
+import { debug, observeResourcePerformance, perf, win, setTimeout, wrap, parseUrl, clearTimeout } from "../../utils";
+import { isUrlIgnored } from "../../utils/ignore-rules";
+import { addAttribute, endSpan, setSpanStatus, Exception, InProgressSpan, startSpan } from "../../utils/otel";
 import {
   ERROR_TYPE,
   HTTP_REQUEST_METHOD,
@@ -29,12 +8,20 @@ import {
   HTTP_RESPONSE_STATUS_CODE,
   SPAN_STATUS_ERROR,
   SPAN_STATUS_UNSET,
-  WEB_REQUEST_CANCELLED,
 } from "../../semantic-conventions";
-import { vars, PropagatorType } from "../../vars";
+import { vars } from "../../vars";
 import { httpRequestHeaderKey, httpResponseHeaderKey } from "../../utils/otel/http";
 import { sendSpan } from "../../transport";
-import { addResourceNetworkEvents, addResourceSize, HTTP_METHOD_OTHER, isWellKnownHttpMethod } from "./utils";
+import {
+  addResourceNetworkEvents,
+  addResourceSize,
+  addTraceContextHttpHeaders,
+  determinePropagatorTypes,
+  endSpanOnAbort,
+  endSpanOnError,
+  HTTP_METHOD_OTHER,
+  isWellKnownHttpMethod,
+} from "./utils";
 import { addCommonAttributes, addUrlAttributes } from "../../attributes";
 
 export function instrumentFetch() {
@@ -45,83 +32,53 @@ export function instrumentFetch() {
   wrap(win, "fetch", wrapFetch);
 }
 
+type FetchInstrumentation = {
+  copyOfInit?: RequestInit;
+  span: InProgressSpan;
+  performanceObserver: ReturnType<typeof observeResourcePerformance>;
+};
+
 // eslint-disable-next-line no-restricted-globals -- only used as type here
 function wrapFetch(original: typeof fetch) {
   return async function fetchWithInstrumentation(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
-    let copyOfInit = init ? Object.assign({}, init) : init;
-
-    let body: BodyInit | null = null;
-    if (copyOfInit?.body) {
-      body = copyOfInit.body;
-      copyOfInit.body = undefined;
-    }
-
-    const request = new Request(input, copyOfInit);
-    if (body && copyOfInit) {
-      copyOfInit.body = body;
-    }
-
-    const url = request.url;
-    if (isUrlIgnored(url)) {
-      debug(`Not creating span for fetch call because the url is ignored, URL: ${url}`);
-      return original(input instanceof Request ? request : input, init);
-    }
-
-    // https://fetch.spec.whatwg.org/#concept-request-method
-    // We'll match methods case insensitive here to make the user experience a bit less painful
-    const originalMethod = request.method ?? "GET";
-    const isWellKnownMethod = isWellKnownHttpMethod(originalMethod);
-    const isWellKnownMethodMatchingLeniently = isWellKnownHttpMethod(originalMethod.toUpperCase());
-    const method = isWellKnownMethodMatchingLeniently ? originalMethod.toUpperCase() : HTTP_METHOD_OTHER;
+    let fetchInput: RequestInfo | URL = input;
+    let request: Request | undefined;
+    let instrumentation: FetchInstrumentation | undefined;
+    try {
+      let copyOfInit = init ? Object.assign({}, init) : init;
 
-    const span = startSpan(`HTTP ${method}`);
-    addCommonAttributes(span.attributes);
-    addUrlAttributes(span.attributes, url);
-    addGraphQlProperties(input, init, span);
-    addAttribute(span.attributes, HTTP_REQUEST_METHOD, method);
-    if (!isWellKnownMethod) {
-      addAttribute(span.attributes, HTTP_REQUEST_METHOD_ORIGINAL, originalMethod);
-    }
+      let body: BodyInit | null = null;
+      if (copyOfInit?.body) {
+        body = copyOfInit.body;
+        copyOfInit.body = undefined;
+      }
 
-    const propagatorTypes = determinePropagatorTypes(url);
-    const shouldSetCorrelationHeaders = propagatorTypes.length > 0;
-    if (shouldSetCorrelationHeaders) {
-      if (copyOfInit?.headers) {
-        // ensure we have a unified container for the headers
-        copyOfInit.headers = new Headers(copyOfInit.headers);
-        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
-      } else if (input instanceof Request) {
-        addTraceContextHttpHeaders(request.headers.append, request.headers, span, propagatorTypes);
-      } else {
-        if (!copyOfInit) {
-          copyOfInit = {};
-        }
-        copyOfInit.headers = new Headers();
-        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
+      request = new Request(input, copyOfInit);
+      if (body && copyOfInit) {
+        copyOfInit.body = body;
+      }
+      // Constructing the Request above disturbs the body of a Request input, so from here on the
+      // copy has to be handed to the original fetch in place of the input -- including on the
+      // ignored and instrumentation-failure paths below.
+      fetchInput = input instanceof Request ? request : input;
+
+      if (isUrlIgnored(request.url)) {
+        debug(`Not creating span for fetch call because the url is ignored, URL: ${request.url}`);
+        // Note: the rejection of the returned promise does not route through the catch below --
+        // only synchronous throws do, so the original fetch cannot be invoked twice.
+        return original(fetchInput, init);
       }
-    }
 
-    tryCaptureHttpHeaders(request.headers, span, (k) => httpRequestHeaderKey(k));
+      instrumentation = onFetchStart(input, init, request, copyOfInit);
+    } catch (e) {
+      debug("failed to instrument fetch call", e);
+      return original(fetchInput, init);
+    }
 
-    const performanceObserver = observeResourcePerformance({
-      // We match on both fetch and XHR here to support polyfills
-      resourceMatcher: ({ initiatorType, name }) =>
-        (initiatorType === "fetch" || initiatorType === "xmlhttprequest") && name === parseUrl(url).href,
-      maxWaitForResourceMillis: vars.maxWaitForResourceTimingsMillis,
-      maxToleranceForResourceTimingsMillis: vars.maxToleranceForResourceTimingsMillis,
-      onEnd: ({ duration, resource }) => {
-        if (resource) {
-          addResourceNetworkEvents(span, resource);
-          addResourceSize(span, resource);
-        }
-        // duration is millis we need to convert to nanos
-        sendSpan(endSpan(span, undefined, duration * 1000000));
-      },
-    });
+    const { copyOfInit, span, performanceObserver } = instrumentation;
 
-    performanceObserver.start();
     try {
-      const origResponse = await original(input instanceof Request ? request : input, copyOfInit);
+      const origResponse = await original(fetchInput, copyOfInit);
       addResponseData(span, origResponse);
 
       return wrapResponse(
@@ -130,7 +87,7 @@ function wrapFetch(original: typeof fetch) {
         () => performanceObserver.end(),
         (e) => {
           performanceObserver.cancel();
-          if (request.signal?.aborted) {
+          if (request?.signal?.aborted) {
             endSpanOnAbort(span);
           } else {
             endSpanOnError(span, e);
@@ -139,7 +96,7 @@ function wrapFetch(original: typeof fetch) {
       );
     } catch (e) {
       performanceObserver.cancel();
-      if (request.signal?.aborted) {
+      if (request?.signal?.aborted) {
         endSpanOnAbort(span);
       } else {
         endSpanOnError(span, e as Exception);
@@ -149,6 +106,71 @@ function wrapFetch(original: typeof fetch) {
   };
 }
 
+function onFetchStart(
+  input: RequestInfo | URL,
+  init: RequestInit | undefined,
+  request: Request,
+  copyOfInit: RequestInit | undefined
+): FetchInstrumentation {
+  const url = request.url;
+
+  // https://fetch.spec.whatwg.org/#concept-request-method
+  // We'll match methods case insensitive here to make the user experience a bit less painful
+  const originalMethod = request.method ?? "GET";
+  const isWellKnownMethod = isWellKnownHttpMethod(originalMethod);
+  const isWellKnownMethodMatchingLeniently = isWellKnownHttpMethod(originalMethod.toUpperCase());
+  const method = isWellKnownMethodMatchingLeniently ? originalMethod.toUpperCase() : HTTP_METHOD_OTHER;
+
+  const span = startSpan(`HTTP ${method}`);
+  addCommonAttributes(span.attributes);
+  addUrlAttributes(span.attributes, url);
+  addGraphQlProperties(input, init, span);
+  addAttribute(span.attributes, HTTP_REQUEST_METHOD, method);
+  if (!isWellKnownMethod) {
+    addAttribute(span.attributes, HTTP_REQUEST_METHOD_ORIGINAL, originalMethod);
+  }
+
+  const propagatorTypes = determinePropagatorTypes(url);
+  const shouldSetCorrelationHeaders = propagatorTypes.length > 0;
+  if (shouldSetCorrelationHeaders) {
+    if (copyOfInit?.headers) {
+      // ensure we have a unified container for the headers
+      copyOfInit.headers = new Headers(copyOfInit.headers);
+      addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
+    } else if (input instanceof Request) {
+      addTraceContextHttpHeaders(request.headers.append, request.headers, span, propagatorTypes);
+    } else {
+      if (!copyOfInit) {
+        copyOfInit = {};
+      }
+      copyOfInit.headers = new Headers();
+      addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
+    }
+  }
+
+  tryCaptureHttpHeaders(request.headers, span, (k) => httpRequestHeaderKey(k));
+
+  const performanceObserver = observeResourcePerformance({
+    // We match on both fetch and XHR here to support polyfills
+    resourceMatcher: ({ initiatorType, name }) =>
+      (initiatorType === "fetch" || initiatorType === "xmlhttprequest") && name === parseUrl(url).href,
+    maxWaitForResourceMillis: vars.maxWaitForResourceTimingsMillis,
+    maxToleranceForResourceTimingsMillis: vars.maxToleranceForResourceTimingsMillis,
+    onEnd: ({ duration, resource }) => {
+      if (resource) {
+        addResourceNetworkEvents(span, resource);
+        addResourceSize(span, resource);
+      }
+      // duration is millis we need to convert to nanos
+      sendSpan(endSpan(span, undefined, duration * 1000000));
+    },
+  });
+
+  performanceObserver.start();
+
+  return { copyOfInit, span, performanceObserver };
+}
+
 // @ts-expect-error -- WIP
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
 function addGraphQlProperties(input: RequestInfo | URL, init?: RequestInit, span: InProgressSpan) {
@@ -182,8 +204,8 @@ function tryCaptureHttpHeaders(headers: Headers, span: InProgressSpan, getAttrib
         addAttribute(span.attributes, getAttributeKey(key), value);
       }
     });
-  } catch (_e) {
-    debug("unable to capture http headers due to CORS policy");
+  } catch (e) {
+    debug("unable to capture http headers", e);
   }
 }
 
@@ -281,67 +303,6 @@ function wrapResponse(
   });
 }
 
-function endSpanOnError(span: InProgressSpan, error: Exception) {
-  recordException(span, error);
-  sendSpan(endSpan(span, errorToSpanStatus(error), undefined));
-}
-
-function endSpanOnAbort(span: InProgressSpan) {
-  addAttribute(span.attributes, WEB_REQUEST_CANCELLED, true);
-  sendSpan(endSpan(span, undefined, undefined));
-}
-
-function determinePropagatorTypes(url: string): PropagatorType[] {
-  const matchingTypes: PropagatorType[] = [];
-  const isUrlSameOrigin = isSameOrigin(url);
-
-  // For same-origin requests, always include traceparent + all configured propagators
-  if (isUrlSameOrigin) {
-    // Always add traceparent for same-origin requests
-    matchingTypes.push("traceparent");
-
-    // Add all other configured propagator types for same-origin requests
-    if (vars.propagators) {
-      for (const propagator of vars.propagators) {
-        if (propagator.type !== "traceparent" && !matchingTypes.includes(propagator.type)) {
-          matchingTypes.push(propagator.type);
-        }
-      }
-    }
-    return matchingTypes;
-  }
-
-  // For cross-origin requests, use new propagators config if available
-  if (vars.propagators) {
-    for (const propagator of vars.propagators) {
-      if (matchesAny(propagator.match, url)) {
-        // Avoid duplicates
-        if (!matchingTypes.includes(propagator.type)) {
-          matchingTypes.push(propagator.type);
-        }
-      }
-    }
-    return matchingTypes;
-  }
-
-  return [];
-}
-
-function addTraceContextHttpHeaders(
-  fn: (name: string, value: string) => void,
-  ctx: unknown,
-  span: InProgressSpan,
-  types: PropagatorType[]
-) {
-  for (const type of types) {
-    if (type === "xray") {
-      addXRayTraceContextHttpHeaders(fn, ctx, span);
-    } else {
-      addW3CTraceContextHttpHeaders(fn, ctx, span);
-    }
-  }
-}
-
 function responseCanHaveBody(response: Response) {
   const status = response.status;
   return status >= 200 && status != 204 && status != 205 && status != 304;

package/src/instrumentations/http/fetch_test.ts

@@ -27,6 +27,7 @@ describe("fetch test", () => {
   afterEach(() => {
     vi.resetAllMocks();
     vars.propagators = undefined;
+    vars.ignoreUrls = [];
   });
 
   it("should inject traceparent header for cross-origin requests", async () => {
@@ -195,6 +196,34 @@ describe("fetch test", () => {
     expect(fetchHeaders.get("X-Amzn-Trace-Id")).toBeNull();
   });
 
+  // SDK-internal errors (e.g. config typos) must degrade to an uninstrumented fetch call, never
+  // to a rejected promise the page did not cause.
+
+  it("falls back to an uninstrumented fetch when ignoreUrls contains plain strings instead of RegExps", async () => {
+    vars.ignoreUrls = ["/health"] as unknown as RegExp[];
+    instrumentFetch();
+
+    // eslint-disable-next-line no-restricted-globals
+    await expect(fetch("http://localhost:3000/health")).resolves.toBeDefined();
+
+    expect(fetchMock).toHaveBeenCalledOnce();
+    expect(fetchMock.mock.calls[0]![0]).toBe("http://localhost:3000/health");
+    expect(fetchMock.mock.calls[0]![1]).toBeUndefined();
+    expect(sendSpan).not.toHaveBeenCalled();
+  });
+
+  it("falls back to an uninstrumented fetch when a propagator match contains plain strings instead of RegExps", async () => {
+    vars.propagators = [{ type: "traceparent", match: ["http://foo.bar/"] as unknown as RegExp[] }];
+    instrumentFetch();
+
+    // eslint-disable-next-line no-restricted-globals
+    await expect(fetch("http://foo.bar/foo")).resolves.toBeDefined();
+
+    expect(fetchMock).toHaveBeenCalledOnce();
+    expect(fetchMock.mock.calls[0]![1]).toBeUndefined();
+    expect(sendSpan).not.toHaveBeenCalled();
+  });
+
   describe("aborted requests", () => {
     const sendSpanMock = sendSpan as unknown as ReturnType<typeof vi.fn>;
     const NativeRequest = Request;
@@ -309,6 +338,35 @@ describe("fetch test", () => {
       expect(span.status?.message).toBe("network down");
       expect(hasAttribute(span, "dash0.web.request.cancelled", { boolValue: true })).toBe(false);
       expect(span.events.some((e) => e.name === "exception")).toBe(true);
+      expect(hasAttribute(span, "error.type", { stringValue: "TypeError" })).toBe(true);
+    });
+
+    it("sets error.type from the exception name when reading the response body fails", async () => {
+      const body = new ReadableStream({
+        start(streamController) {
+          streamController.enqueue(new Uint8Array([0x68, 0x69]));
+        },
+        pull(streamController) {
+          streamController.error(new TypeError("network down"));
+        },
+      });
+
+      fetchMock.mockImplementation(() => Promise.resolve(new Response(body, { status: 200 })));
+
+      instrumentFetch();
+      // eslint-disable-next-line no-restricted-globals
+      const response = await fetch("http://localhost:3000/api/test");
+      const reader = response.body!.getReader();
+      await reader.read();
+      await expect(reader.read()).rejects.toBeInstanceOf(TypeError);
+
+      expect(sendSpanMock).toHaveBeenCalledTimes(1);
+      const span = lastSpan();
+      expect(span.status?.code).toBe(2);
+      expect(span.status?.message).toBe("network down");
+      expect(hasAttribute(span, "dash0.web.request.cancelled", { boolValue: true })).toBe(false);
+      expect(span.events.some((e) => e.name === "exception")).toBe(true);
+      expect(hasAttribute(span, "error.type", { stringValue: "TypeError" })).toBe(true);
     });
   });
 });

package/src/instrumentations/http/utils.ts

@@ -1,6 +1,19 @@
-import { addAttribute, addSpanEvent, InProgressSpan } from "../../utils/otel";
-import { domHRTimestampToNanos, hasKey, PerformanceTimingNames } from "../../utils";
-import { HTTP_RESPONSE_BODY_SIZE } from "../../semantic-conventions";
+import {
+  addAttribute,
+  addSpanEvent,
+  addW3CTraceContextHttpHeaders,
+  addXRayTraceContextHttpHeaders,
+  endSpan,
+  errorToSpanStatus,
+  Exception,
+  InProgressSpan,
+  recordException,
+} from "../../utils/otel";
+import { domHRTimestampToNanos, hasKey, isSameOrigin, PerformanceTimingNames } from "../../utils";
+import { matchesAny } from "../../utils/ignore-rules";
+import { ERROR_TYPE, HTTP_RESPONSE_BODY_SIZE, WEB_REQUEST_CANCELLED } from "../../semantic-conventions";
+import { vars, PropagatorType } from "../../vars";
+import { sendSpan } from "../../transport";
 
 // SEE: https://github.com/open-telemetry/semantic-conventions/blob/main/docs/attributes-registry/http.md?plain=1#L67
 const KNOWN_HTTP_METHODS = ["GET", "HEAD", "POST", "PUT", "DELETE", "CONNECT", "OPTIONS", "TRACE", "PATCH"];
@@ -47,3 +60,77 @@ export function addResourceSize(span: InProgressSpan, resource: PerformanceResou
     addAttribute(span.attributes, HTTP_RESPONSE_BODY_SIZE, encodedLength);
   }
 }
+
+// Sets error.type alongside the recorded exception so failed fetch and XHR spans are equally
+// queryable by error.type. The value is the exception name (e.g. TypeError) -- XHR's synthetic
+// failure exceptions carry their failure kind ("error"/"timeout") as the name, so both
+// instrumentations converge here. Note the shapes still differ for cases inherent to the APIs:
+// a fetch that resolves with status 0 (e.g. opaque responses) never reaches this function and
+// instead gets error.type = response.type plus http.response.status_code "0".
+export function endSpanOnError(span: InProgressSpan, error: Exception) {
+  recordException(span, error);
+  const errorType =
+    typeof error === "object" && error ? (error.name ?? (error.code != null ? String(error.code) : "error")) : "error";
+  addAttribute(span.attributes, ERROR_TYPE, errorType);
+  sendSpan(endSpan(span, errorToSpanStatus(error), undefined));
+}
+
+// Cancellations are benign: no error status, no error.type. This also covers fetch calls aborted
+// by AbortSignal.timeout() -- the signal is aborted by the time the rejection is handled, so a
+// fetch timeout surfaces as a cancellation while an XHR timeout is an ERROR span with
+// error.type = "timeout". That asymmetry is inherent to the two APIs.
+export function endSpanOnAbort(span: InProgressSpan) {
+  addAttribute(span.attributes, WEB_REQUEST_CANCELLED, true);
+  sendSpan(endSpan(span, undefined, undefined));
+}
+
+export function determinePropagatorTypes(url: string): PropagatorType[] {
+  const matchingTypes: PropagatorType[] = [];
+  const isUrlSameOrigin = isSameOrigin(url);
+
+  // For same-origin requests, always include traceparent + all configured propagators
+  if (isUrlSameOrigin) {
+    // Always add traceparent for same-origin requests
+    matchingTypes.push("traceparent");
+
+    // Add all other configured propagator types for same-origin requests
+    if (vars.propagators) {
+      for (const propagator of vars.propagators) {
+        if (propagator.type !== "traceparent" && !matchingTypes.includes(propagator.type)) {
+          matchingTypes.push(propagator.type);
+        }
+      }
+    }
+    return matchingTypes;
+  }
+
+  // For cross-origin requests, use new propagators config if available
+  if (vars.propagators) {
+    for (const propagator of vars.propagators) {
+      if (matchesAny(propagator.match, url)) {
+        // Avoid duplicates
+        if (!matchingTypes.includes(propagator.type)) {
+          matchingTypes.push(propagator.type);
+        }
+      }
+    }
+    return matchingTypes;
+  }
+
+  return [];
+}
+
+export function addTraceContextHttpHeaders(
+  fn: (name: string, value: string) => void,
+  ctx: unknown,
+  span: InProgressSpan,
+  types: PropagatorType[]
+) {
+  for (const type of types) {
+    if (type === "xray") {
+      addXRayTraceContextHttpHeaders(fn, ctx, span);
+    } else {
+      addW3CTraceContextHttpHeaders(fn, ctx, span);
+    }
+  }
+}