@dash0/sdk-web 0.22.1 → 0.23.0

package/dist/modules/api/init.js

@@ -6,6 +6,7 @@ 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 { initializeTabId } from "../utils/tab-id";
 import { pickFirstString } from "./browser-env";
@@ -77,6 +78,9 @@ export function init(opts) {
     if (isInstrumentationEnabled("@dash0/fetch", opts)) {
         instrumentFetch();
     }
+    if (isInstrumentationEnabled("@dash0/xhr", opts)) {
+        instrumentXhr();
+    }
     hasBeenInitialised = true;
 }
 function initializeResourceAttributes(opts) {

package/dist/modules/api/init_test.js

@@ -10,6 +10,9 @@ vi.mock("../instrumentations/errors", () => ({
 vi.mock("../instrumentations/http/fetch", () => ({
     instrumentFetch: vi.fn(),
 }));
+vi.mock("../instrumentations/http/xhr", () => ({
+    instrumentXhr: vi.fn(),
+}));
 vi.mock("../instrumentations/navigation", () => ({
     startNavigationInstrumentation: vi.fn(),
 }));
@@ -23,6 +26,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";
 describe("init", () => {
@@ -57,18 +61,21 @@ describe("init", () => {
             expect(startWebVitalsInstrumentation).toHaveBeenCalled();
             expect(startErrorInstrumentation).toHaveBeenCalled();
             expect(instrumentFetch).toHaveBeenCalled();
+            expect(instrumentXhr).toHaveBeenCalled();
         });
         const instrumentations = [
             "@dash0/navigation",
             "@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) => {
             it(`should enable ${instrumentation} instrumentation when present in enabledInstrumentations array`, async () => {

package/dist/modules/instrumentations/http/fetch.js

@@ -1,11 +1,11 @@
-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, recordException, startSpan, } from "../../utils/otel";
-import { ERROR_TYPE, HTTP_REQUEST_METHOD, HTTP_REQUEST_METHOD_ORIGINAL, HTTP_RESPONSE_STATUS_CODE, SPAN_STATUS_ERROR, SPAN_STATUS_UNSET, WEB_REQUEST_CANCELLED, } from "../../semantic-conventions";
+import { debug, observeResourcePerformance, perf, win, setTimeout, wrap, parseUrl, clearTimeout } from "../../utils";
+import { isUrlIgnored } from "../../utils/ignore-rules";
+import { addAttribute, endSpan, setSpanStatus, startSpan } from "../../utils/otel";
+import { ERROR_TYPE, HTTP_REQUEST_METHOD, HTTP_REQUEST_METHOD_ORIGINAL, HTTP_RESPONSE_STATUS_CODE, SPAN_STATUS_ERROR, SPAN_STATUS_UNSET, } from "../../semantic-conventions";
 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() {
     if (!win || !win.fetch || !win.Request) {
@@ -17,76 +17,43 @@ export function instrumentFetch() {
 // eslint-disable-next-line no-restricted-globals -- only used as type here
 function wrapFetch(original) {
     return async function fetchWithInstrumentation(input, init) {
-        let copyOfInit = init ? Object.assign({}, init) : init;
-        let body = 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;
-        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);
+        let fetchInput = input;
+        let request;
+        let instrumentation;
+        try {
+            let copyOfInit = init ? Object.assign({}, init) : init;
+            let body = null;
+            if (copyOfInit?.body) {
+                body = copyOfInit.body;
+                copyOfInit.body = undefined;
             }
-            else if (input instanceof Request) {
-                addTraceContextHttpHeaders(request.headers.append, request.headers, span, propagatorTypes);
+            request = new Request(input, copyOfInit);
+            if (body && copyOfInit) {
+                copyOfInit.body = body;
             }
-            else {
-                if (!copyOfInit) {
-                    copyOfInit = {};
-                }
-                copyOfInit.headers = new Headers();
-                addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span, propagatorTypes);
+            // 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);
             }
+            instrumentation = onFetchStart(input, init, request, copyOfInit);
         }
-        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();
+        catch (e) {
+            debug("failed to instrument fetch call", e);
+            return original(fetchInput, init);
+        }
+        const { copyOfInit, span, performanceObserver } = instrumentation;
         try {
-            const origResponse = await original(input instanceof Request ? request : input, copyOfInit);
+            const origResponse = await original(fetchInput, copyOfInit);
             addResponseData(span, origResponse);
             return wrapResponse(origResponse, vars.maxToleranceForResourceTimingsMillis, () => performanceObserver.end(), (e) => {
                 performanceObserver.cancel();
-                if (request.signal?.aborted) {
+                if (request?.signal?.aborted) {
                     endSpanOnAbort(span);
                 }
                 else {
@@ -96,7 +63,7 @@ function wrapFetch(original) {
         }
         catch (e) {
             performanceObserver.cancel();
-            if (request.signal?.aborted) {
+            if (request?.signal?.aborted) {
                 endSpanOnAbort(span);
             }
             else {
@@ -106,6 +73,59 @@ function wrapFetch(original) {
         }
     };
 }
+function onFetchStart(input, init, request, copyOfInit) {
+    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, init, span) {
@@ -140,8 +160,8 @@ function tryCaptureHttpHeaders(headers, span, getAttributeKey) {
             }
         });
     }
-    catch (_e) {
-        debug("unable to capture http headers due to CORS policy");
+    catch (e) {
+        debug("unable to capture http headers", e);
     }
 }
 function addResponseData(span, response) {
@@ -230,55 +250,6 @@ function wrapResponse(originalResponse, readTimeoutMs, onDone, onError) {
         headers: originalResponse.headers,
     });
 }
-function endSpanOnError(span, error) {
-    recordException(span, error);
-    sendSpan(endSpan(span, errorToSpanStatus(error), undefined));
-}
-function endSpanOnAbort(span) {
-    addAttribute(span.attributes, WEB_REQUEST_CANCELLED, true);
-    sendSpan(endSpan(span, undefined, undefined));
-}
-function determinePropagatorTypes(url) {
-    const matchingTypes = [];
-    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, ctx, span, types) {
-    for (const type of types) {
-        if (type === "xray") {
-            addXRayTraceContextHttpHeaders(fn, ctx, span);
-        }
-        else {
-            addW3CTraceContextHttpHeaders(fn, ctx, span);
-        }
-    }
-}
 function responseCanHaveBody(response) {
     const status = response.status;
     return status >= 200 && status != 204 && status != 205 && status != 304;

package/dist/modules/instrumentations/http/fetch_test.js

@@ -22,6 +22,7 @@ describe("fetch test", () => {
     afterEach(() => {
         vi.resetAllMocks();
         vars.propagators = undefined;
+        vars.ignoreUrls = [];
     });
     it("should inject traceparent header for cross-origin requests", async () => {
         vars.propagators = [
@@ -171,6 +172,27 @@ describe("fetch test", () => {
         expect(fetchHeaders.get("traceparent")).not.toBeNull();
         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"];
+        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/"] }];
+        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;
         const NativeRequest = Request;
@@ -268,6 +290,31 @@ 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/dist/modules/instrumentations/http/utils.js

@@ -1,6 +1,9 @@
-import { addAttribute, addSpanEvent } from "../../utils/otel";
-import { domHRTimestampToNanos, hasKey, PerformanceTimingNames } from "../../utils";
-import { HTTP_RESPONSE_BODY_SIZE } from "../../semantic-conventions";
+import { addAttribute, addSpanEvent, addW3CTraceContextHttpHeaders, addXRayTraceContextHttpHeaders, endSpan, errorToSpanStatus, 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 } 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"];
 export const HTTP_METHOD_OTHER = "_OTHER";
@@ -33,3 +36,64 @@ export function addResourceSize(span, resource) {
         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, error) {
+    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) {
+    addAttribute(span.attributes, WEB_REQUEST_CANCELLED, true);
+    sendSpan(endSpan(span, undefined, undefined));
+}
+export function determinePropagatorTypes(url) {
+    const matchingTypes = [];
+    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, ctx, span, types) {
+    for (const type of types) {
+        if (type === "xray") {
+            addXRayTraceContextHttpHeaders(fn, ctx, span);
+        }
+        else {
+            addW3CTraceContextHttpHeaders(fn, ctx, span);
+        }
+    }
+}