@dash0/sdk-web 0.16.0 → 0.16.2

package/src/instrumentations/http/fetch.ts

@@ -1,4 +1,4 @@
-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,
@@ -20,7 +20,6 @@ import {
   SPAN_STATUS_ERROR,
   SPAN_STATUS_UNSET,
 } from "../../semantic-conventions";
-import { isSameOrigin, wrap, parseUrl } from "../../utils";
 import { vars, PropagatorType } from "../../vars";
 import { httpRequestHeaderKey, httpResponseHeaderKey } from "../../utils/otel/http";
 import { sendSpan } from "../../transport";
@@ -111,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);
@@ -177,20 +176,87 @@ 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;
+
+  // For some reason browsers return a response body on responses that can't be constructed with one. In that case we can't wrap the body stream
+  if (!body || !responseCanHaveBody(originalResponse)) {
+    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,
   });
 }
 
@@ -249,3 +315,8 @@ function addTraceContextHttpHeaders(
     }
   }
 }
+
+function responseCanHaveBody(response: Response) {
+  const status = response.status;
+  return status >= 200 && status != 204 && status != 205 && status != 304;
+}

package/src/transport/index.ts

@@ -47,7 +47,9 @@ function sendLogs(logs: LogRecord[]): void {
   });
 }
 
-export function sendSpan(span: Span): void {
+export function sendSpan(span: Span | undefined): void {
+  if (!span) return;
+
   if (isRateLimited()) {
     debug("Transport rate limit. Will not send item.", span);
     return;

package/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from "./local-storage";
 export * from "./performance";
 export * from "./rate-limit";
 export * from "./time";
+export * from "./timers";
 export * from "./constants";
 export * from "./math";
 export * from "./origin";

package/src/utils/otel/span.ts

@@ -5,6 +5,7 @@ import { generateTraceId } from "../trace-id";
 import { generateSpanId } from "../span-id";
 import { addAttribute } from "./attributes";
 import { KeyValue, Span, SpanStatus } from "../../types/otlp";
+import { debug } from "../debug";
 
 export type InProgressSpan = Omit<Span, "endTimeUnixNano">;
 
@@ -30,9 +31,23 @@ export function startSpan(name: string): InProgressSpan {
   };
 }
 
-export function endSpan(span: InProgressSpan, status: SpanStatus | undefined, durationNano: number | undefined): Span {
+/**
+ * Ends the span by setting status and endTimeUnixNano on it. If the spand was already previously ended, this returns undefined
+ * to prevent the span from being ended multiple times on accident.
+ */
+export function endSpan(
+  span: InProgressSpan,
+  status: SpanStatus | undefined,
+  durationNano: number | undefined
+): Span | undefined {
   // We cast here to avoid having to instantiate a copy of the span
   const s = span as Span;
+
+  if (s.endTimeUnixNano) {
+    debug("Attempting to end already ended span. Dropping...", s);
+    return undefined;
+  }
+
   if (status) {
     s.status = status;
   }

package/src/utils/performance.ts

@@ -7,6 +7,7 @@ import { addEventListener, removeEventListener } from "./listeners";
 const TEN_MINUTES_IN_MILLIS = 1000 * 60 * 10;
 const ONE_DAY_IN_MILLIS = 1000 * 60 * 60 * 24;
 const OBSERVER_WAIT_TIME_MS = 300;
+const MAX_RESOURCES_ENTRIES = 100;
 
 export const isResourceTimingAvailable = !!(perf && perf.getEntriesByType);
 export const isPerformanceObserverAvailable =
@@ -54,7 +55,11 @@ type ObserveResourcePerformanceOptions = {
 
 type PerformanceObservationContoller = {
   start: () => void;
-  end: () => void;
+  /**
+   * Ends performance observation and starts matching the observed resources.
+   * @param endTs End performance timing timestamp to use for the end of the resource, instead of the current time when end is called. Useful when calling end from a timeout handler
+   */
+  end: (endTs?: number) => void;
   cancel: () => void;
 };
 
@@ -99,8 +104,11 @@ export function observeResourcePerformance(opts: ObserveResourcePerformanceOptio
     fallbackEndNeverCalledTimerHandle = setTimeout(disposeGlobalResources, TEN_MINUTES_IN_MILLIS);
   }
 
-  function onEnd() {
-    endTime = perf.now();
+  function onEnd(endTs?: number) {
+    // If endTime is already set, we are already terminating and should not do so again
+    if (endTime) return;
+
+    endTime = endTs ?? perf.now();
     cancelFallbackEndNeverCalledTimer();
 
     if (!isWaitingAcceptable()) {
@@ -136,7 +144,16 @@ export function observeResourcePerformance(opts: ObserveResourcePerformanceOptio
         const entry = e as PerformanceResourceTiming;
         return entry.startTime >= startTime && opts.resourceMatcher(entry);
       })
-      .forEach((entry) => resources.push(entry as PerformanceResourceTiming));
+      .forEach((entry) => {
+        // Limit array size to prevent memory leaks on high-traffic pages
+        if (resources.length >= MAX_RESOURCES_ENTRIES) {
+          // Remove oldest entry (FIFO)
+          // Timings are only reported once the resource is fully recorded (i.e. the request has ended), so timings ending
+          // way before the `onEnd` is called are less likely to be good matches and we can ignore them.
+          resources.shift();
+        }
+        resources.push(entry as PerformanceResourceTiming);
+      });
   }
 
   function onVisibilityChanged() {