@dash0/sdk-web 0.15.0 → 0.16.1

package/src/api/init.ts

@@ -73,6 +73,8 @@ export function init(opts: InitOptions) {
     )
   );
 
+  initializePropagators(opts);
+
   initializeResourceAttributes(opts);
   initializeSignalAttributes(opts);
   initializeTabId();
@@ -185,6 +187,38 @@ function detectDeploymentId(opts: InitOptions): string | undefined {
   }
 }
 
+function initializePropagators(opts: InitOptions) {
+  if (opts.propagators) {
+    if (opts.propagateTraceHeadersCorsURLs) {
+      warn(
+        "Both 'propagators' and deprecated 'propagateTraceHeadersCorsURLs' were provided. Using 'propagators' configuration. Please migrate to the new 'propagators' config."
+      );
+    }
+    vars.propagators = opts.propagators;
+  }
+  // Handle legacy configuration
+  else if (opts.propagateTraceHeadersCorsURLs && opts.propagateTraceHeadersCorsURLs.length > 0) {
+    warn("'propagateTraceHeadersCorsURLs' is deprecated. Please use the new 'propagators' configuration.");
+    // Convert legacy config to new format - only include cross-origin URLs since same-origin is automatic
+    vars.propagators = [
+      {
+        type: "traceparent",
+        match: [...opts.propagateTraceHeadersCorsURLs],
+      },
+    ];
+  }
+  // Default configuration - traceparent with empty match array
+  // Same-origin requests get ALL configured propagators, so this ensures traceparent for same-origin
+  else {
+    vars.propagators = [
+      {
+        type: "traceparent",
+        match: [],
+      },
+    ];
+  }
+}
+
 function isInstrumentationEnabled(name: InstrumentationName, opts: InitOptions): boolean {
   const instrumentations = opts.enabledInstrumentations;
 

package/src/api/init_test.ts

@@ -1,5 +1,7 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { InitOptions, InstrumentationName } from "../types/options";
+import { PropagatorConfig, Vars } from "../vars";
+import { init as initFun } from "./init";
 
 // Mock all the instrumentation modules
 vi.mock("../instrumentations/web-vitals", () => ({
@@ -18,21 +20,30 @@ vi.mock("../instrumentations/navigation", () => ({
   startNavigationInstrumentation: vi.fn(),
 }));
 
-import { startWebVitalsInstrumentation } from "../instrumentations/web-vitals";
 import { startErrorInstrumentation } from "../instrumentations/errors";
 import { instrumentFetch } from "../instrumentations/http/fetch";
 import { startNavigationInstrumentation } from "../instrumentations/navigation";
+import { startWebVitalsInstrumentation } from "../instrumentations/web-vitals";
 
 describe("init", () => {
   const baseOptions: InitOptions = {
     serviceName: "test-service",
     endpoint: { url: "https://test-endpoint.com", authToken: "invalid" },
   };
+  let vars: Vars;
+  let init: typeof initFun;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     vi.clearAllMocks();
     // Reset the hasBeenInitialised flag by re-importing the module
     vi.resetModules();
+    // Reset vars state after module reset
+    // since init itself needs vars, this needs to imported again as well.
+    // Otherwise the tests that make assumptions on the vars fail because they use a different reference.
+    const { vars: importedVars } = await import("../vars");
+    const { init: importedInit } = await import("./init");
+    vars = importedVars;
+    init = importedInit;
   });
 
   afterEach(() => {
@@ -41,8 +52,6 @@ describe("init", () => {
 
   describe("instrumentation enablement", () => {
     it("should enable all instrumentations when enabledInstrumentations is undefined", async () => {
-      const { init } = await import("./init");
-
       init({
         ...baseOptions,
         enabledInstrumentations: undefined,
@@ -69,8 +78,6 @@ describe("init", () => {
 
     instrumentations.forEach((instrumentation) => {
       it(`should enable ${instrumentation} instrumentation when present in enabledInstrumentations array`, async () => {
-        const { init } = await import("./init");
-
         init({
           ...baseOptions,
           enabledInstrumentations: [instrumentation],
@@ -87,8 +94,6 @@ describe("init", () => {
       });
 
       it(`should not enable ${instrumentation} instrumentation when not present in enabledInstrumentations array`, async () => {
-        const { init } = await import("./init");
-
         const otherInstrumentations = instrumentations.filter((i) => i !== instrumentation);
 
         init({
@@ -105,4 +110,120 @@ describe("init", () => {
       });
     });
   });
+
+  describe("propagator configuration", () => {
+    it("should set propagators configuration when provided", async () => {
+      const propagators: PropagatorConfig[] = [
+        { type: "traceparent" as const, match: [/.*\/api\/.*/] },
+        { type: "xray" as const, match: [/.*\.amazonaws\.com.*/] },
+      ];
+
+      init({
+        ...baseOptions,
+        propagators,
+      });
+
+      expect(vars.propagators).toEqual(propagators);
+    });
+
+    it("should warn when both propagators and legacy config are provided", async () => {
+      const spyOnWarn = vi.spyOn(console, "warn");
+      const propagators: PropagatorConfig[] = [{ type: "traceparent" as const, match: [/.*\/api\/.*/] }];
+
+      init({
+        ...baseOptions,
+        propagators,
+        propagateTraceHeadersCorsURLs: [/.*\.example\.com.*/],
+      });
+
+      expect(spyOnWarn).toHaveBeenCalledWith(
+        "Both 'propagators' and deprecated 'propagateTraceHeadersCorsURLs' were provided. Using 'propagators' configuration. Please migrate to the new 'propagators' config."
+      );
+      expect(vars.propagators).toEqual(propagators);
+    });
+
+    it("should convert legacy config to new format with deprecation warning", async () => {
+      const spyOnWarn = vi.spyOn(console, "warn");
+      const legacyConfig = [/.*\.example\.com.*/, /.*\.test\.com.*/];
+
+      init({
+        ...baseOptions,
+        propagateTraceHeadersCorsURLs: legacyConfig,
+      });
+
+      expect(spyOnWarn).toHaveBeenCalledWith(
+        "'propagateTraceHeadersCorsURLs' is deprecated. Please use the new 'propagators' configuration."
+      );
+
+      expect(vars.propagators).toEqual([
+        {
+          type: "traceparent",
+          match: [...legacyConfig],
+        },
+      ]);
+    });
+
+    it("should set default propagators when no configuration is provided", async () => {
+      init(baseOptions);
+
+      expect(vars.propagators).toEqual([
+        {
+          type: "traceparent",
+          match: [],
+        },
+      ]);
+    });
+
+    it("should not convert empty legacy config", async () => {
+      const spyOnWarn = vi.spyOn(console, "warn");
+
+      init({
+        ...baseOptions,
+        propagateTraceHeadersCorsURLs: [],
+      });
+
+      expect(spyOnWarn).not.toHaveBeenCalled();
+      expect(vars.propagators).toEqual([
+        {
+          type: "traceparent",
+          match: [],
+        },
+      ]);
+    });
+
+    it("should handle mixed pattern types in propagators", async () => {
+      const spyOnWarn = vi.spyOn(console, "warn");
+
+      const propagators: PropagatorConfig[] = [
+        {
+          type: "traceparent" as const,
+          match: [/.*\/api\/.*/],
+        },
+        {
+          type: "xray" as const,
+          match: [/.*\.amazonaws\.com.*/, /.*\.aws\.com.*/],
+        },
+      ];
+
+      init({
+        ...baseOptions,
+        propagators,
+      });
+
+      expect(vars.propagators).toEqual(propagators);
+      expect(spyOnWarn).not.toHaveBeenCalled();
+    });
+
+    it("should handle empty propagators array", async () => {
+      const spyOnWarn = vi.spyOn(console, "warn");
+
+      init({
+        ...baseOptions,
+        propagators: [],
+      });
+
+      expect(vars.propagators).toEqual([]);
+      expect(spyOnWarn).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/api/report-error.ts

@@ -1,4 +1,4 @@
-import { reportError as reportErrorInternal } from "../instrumentations/errors/unhandled-error";
+import { reportUnhandledError as reportErrorInternal } from "../instrumentations/errors/unhandled-error";
 import { ReportErrorOpts, ErrorLike } from "../types/errors";
 
 export function reportError(error: string | ErrorLike, opts?: ReportErrorOpts) {

package/src/entrypoint/npm-package.ts

@@ -13,7 +13,7 @@ export { reportError } from "../api/report-error";
 // Additional utility types
 export type { AttributeValueType } from "../utils/otel";
 export type { AnyValue } from "../types/otlp";
-export type { PageViewMeta } from "../vars";
+export type { PageViewMeta, PropagatorConfig, PropagatorType } from "../vars";
 export type { UrlAttributeScrubber, UrlAttributeRecord } from "../attributes/url";
 
 export function init(opts: InitOptions): void {

package/src/instrumentations/errors/event-handlers.ts

@@ -5,7 +5,7 @@ import {
   EventListenerOptionsOrUseCapture,
   popWrappedDomEventListener,
 } from "./async-function-wrapping";
-import { ignoreNextOnErrorEvent } from "./unhandled-error";
+import { ignoreNextOnErrorEvent, reportUnhandledError } from "./unhandled-error";
 
 export function startEventHandlerInstrumentation() {
   if (vars.wrapEventHandlers) {
@@ -44,7 +44,7 @@ function wrapEventTarget(EventTarget: WindowType["EventTarget"] | undefined) {
       try {
         return fn.apply(this, arguments as any);
       } catch (e) {
-        reportError(e as any);
+        reportUnhandledError(e as any);
         ignoreNextOnErrorEvent();
         throw e;
       }

package/src/instrumentations/errors/unhandled-error.ts

@@ -75,7 +75,7 @@ export function startOnErrorInstrumentation() {
   };
 }
 
-export function reportError(error: string | ErrorLike, opts?: ReportErrorOpts) {
+export function reportUnhandledError(error: string | ErrorLike, opts?: ReportErrorOpts) {
   if (!error) {
     return;
   }

package/src/instrumentations/errors/unhandled-promise-rejection.ts

@@ -1,5 +1,5 @@
 import { win } from "../../utils";
-import { reportError } from "./unhandled-error";
+import { reportUnhandledError } from "./unhandled-error";
 
 const MESSAGE_PREFIX = "Unhandled promise rejection: ";
 const STACK_UNAVAILABLE_MESSAGE = "<unavailable because Promise wasn't rejected with an Error object>";
@@ -12,17 +12,17 @@ export function startUnhandledRejectionInstrumentation() {
 
 export function onUnhandledRejection(event: PromiseRejectionEvent) {
   if (event.reason == null) {
-    reportError({
+    reportUnhandledError({
       message: MESSAGE_PREFIX + "<no reason defined>",
       stack: STACK_UNAVAILABLE_MESSAGE,
     });
   } else if (typeof event.reason.message === "string") {
-    reportError({
+    reportUnhandledError({
       message: MESSAGE_PREFIX + event.reason.message,
       stack: typeof event.reason.stack === "string" ? event.reason.stack : STACK_UNAVAILABLE_MESSAGE,
     });
   } else if (typeof event.reason !== "object") {
-    reportError({
+    reportUnhandledError({
       message: MESSAGE_PREFIX + event.reason,
       stack: STACK_UNAVAILABLE_MESSAGE,
     });

package/src/instrumentations/http/fetch.ts

@@ -1,9 +1,10 @@
-import { debug, observeResourcePerformance, win } from "../../utils";
+import { debug, observeResourcePerformance, perf, win, setTimeout, isSameOrigin, wrap, parseUrl } from "../../utils";
 import { isUrlIgnored, matchesAny } from "../../utils/ignore-rules";
 import {
   addAttribute,
   setSpanStatus,
-  addTraceContextHttpHeaders,
+  addW3CTraceContextHttpHeaders,
+  addXRayTraceContextHttpHeaders,
   endSpan,
   errorToSpanStatus,
   Exception,
@@ -19,8 +20,7 @@ import {
   SPAN_STATUS_ERROR,
   SPAN_STATUS_UNSET,
 } from "../../semantic-conventions";
-import { isSameOrigin, wrap, parseUrl } from "../../utils";
-import { vars } from "../../vars";
+import { vars, PropagatorType } from "../../vars";
 import { httpRequestHeaderKey, httpResponseHeaderKey } from "../../utils/otel/http";
 import { sendSpan } from "../../transport";
 import { addResourceNetworkEvents, addResourceSize, HTTP_METHOD_OTHER, isWellKnownHttpMethod } from "./utils";
@@ -72,20 +72,21 @@ function wrapFetch(original: typeof fetch) {
       addAttribute(span.attributes, HTTP_REQUEST_METHOD_ORIGINAL, originalMethod);
     }
 
-    const shouldSetCorrelationHeaders = isSameOrigin(url) || matchesAny(vars.propagateTraceHeadersCorsURLs, url);
+    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);
+        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
       } else if (input instanceof Request) {
-        addTraceContextHttpHeaders(request.headers.append, request.headers, span);
+        addTraceContextHttpHeaders(request.headers.append, request.headers, span, propagatorTypes);
       } else {
         if (!copyOfInit) {
           copyOfInit = {};
         }
         copyOfInit.headers = new Headers();
-        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span);
+        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
       }
     }
 
@@ -109,18 +110,18 @@ function wrapFetch(original: typeof fetch) {
 
     performanceObserver.start();
     try {
-      const response = await original(input instanceof Request ? request : input, copyOfInit);
-      addResponseData(span, response);
+      const origResponse = await original(input instanceof Request ? request : input, copyOfInit);
+      addResponseData(span, origResponse);
 
-      // We use a separate promise here because this needs to happen in parallel to application code consuming the response
-      waitForFullResponse(response)
-        .then(() => performanceObserver.end())
-        .catch((e) => {
+      return wrapResponse(
+        origResponse,
+        vars.maxToleranceForResourceTimingsMillis,
+        () => performanceObserver.end(),
+        (e) => {
           performanceObserver.cancel();
-          endSpanOnError(span, e as Exception);
-        });
-
-      return response;
+          endSpanOnError(span, e);
+        }
+      );
     } catch (e) {
       performanceObserver.cancel();
       endSpanOnError(span, e as Exception);
@@ -175,20 +176,86 @@ function addResponseData(span: InProgressSpan, response: Response) {
   tryCaptureHttpHeaders(response.headers, span, (k) => httpResponseHeaderKey(k));
 }
 
-function waitForFullResponse(response: Response): Promise<void> {
-  return new Promise((resolve) => {
-    const clonedResponse = response.clone();
-    const body = clonedResponse.body;
+/**
+ * Wraps the response to be able to detect when it is fully read
+ * @param originalResponse
+ * @param readTimeoutMs Timeout applied between reading of response chunks, if exceeded the response is considered abandoned and onDone is called.
+ * @param onDone Called when the response is completely read or with "fallbackEndTs" when reading timed out.
+ * @param onError
+ */
+function wrapResponse(
+  originalResponse: Response,
+  readTimeoutMs: number,
+  onDone: (fallbackEndTs?: number) => void,
+  onError: (e: Exception) => void
+): Response {
+  // When the response was wrapped (i.e. first available to js) we use this to replace or find the actual end timestamp
+  // in case the response body is never read by js
+  let fallbackTs: number = perf.now();
+  const body = originalResponse.body;
+
+  if (!body) {
+    onDone();
+    return originalResponse;
+  }
+
+  let cbCalled: boolean = false;
+  const handleDone = (fallbackEndTs?: number) => {
+    if (cbCalled) return;
+    onDone(fallbackEndTs);
+    cbCalled = true;
+  };
+  const handleError = (e: Exception) => {
+    if (cbCalled) return;
+    onError(e);
+    cbCalled = true;
+  };
+
+  let bodyNeverCompletelyReadTimeout = setTimeout(() => handleDone(fallbackTs), readTimeoutMs);
 
-    if (!body) return resolve();
+  const reader = body.getReader();
+  const stream = new ReadableStream({
+    async pull(controller) {
+      try {
+        clearTimeout(bodyNeverCompletelyReadTimeout);
+        const { value, done } = await reader.read();
+        if (done) {
+          reader.releaseLock();
+          controller.close();
+          handleDone();
+        } else {
+          fallbackTs = perf.now();
+          bodyNeverCompletelyReadTimeout = setTimeout(() => handleDone(fallbackTs), readTimeoutMs);
+          controller.enqueue(value);
+        }
+      } catch (e) {
+        handleError(e as Exception);
+        controller.error(e);
+
+        try {
+          reader.releaseLock();
+        } catch {
+          // Spec reference:
+          // https://streams.spec.whatwg.org/#default-reader-release-lock
+          //
+          // releaseLock() only throws if called on an invalid reader
+          // (i.e. reader.[[stream]] is undefined, meaning the lock is already released
+          // or the reader was never associated). In normal use this cannot happen.
+          // This catch is defensive only.
+        }
+      }
+    },
+    cancel(reason) {
+      clearTimeout(bodyNeverCompletelyReadTimeout);
+      handleDone();
+      return reader.cancel(reason);
+    },
+  });
 
-    const reader = body.getReader();
-    const read = async () => {
-      const { done } = await reader.read();
-      if (done) return resolve();
-      return read();
-    };
-    return read();
+  return new Response(stream, {
+    status: originalResponse.status,
+    statusText: originalResponse.statusText,
+    headers: originalResponse.headers,
   });
 }
 
@@ -196,3 +263,54 @@ function endSpanOnError(span: InProgressSpan, error: Exception) {
   recordException(span, error);
   sendSpan(endSpan(span, errorToSpanStatus(error), 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);
+    }
+  }
+}