@dash0/sdk-web 0.13.1 → 0.13.3

package/src/utils/debug.ts

@@ -1,25 +1,40 @@
 import { noop } from "./fn";
 
+const logLevels = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+} as const;
+
+export type LogLevel = keyof typeof logLevels;
+
+let activeLogLevel: number = logLevels.warn;
+
+/**
+ * Changes the logging verbosity of Dash0's web SDK. By default, only warnings and errors are logged.
+ */
+export function setActiveLogLevel(level: LogLevel) {
+  activeLogLevel = logLevels[level] ?? logLevels.warn;
+}
+
 type Logger = (...args: any[]) => void;
 
-export const log: Logger = createLogger("log");
 export const info: Logger = createLogger("info");
 export const warn: Logger = createLogger("warn");
 export const error: Logger = createLogger("error");
 export const debug: Logger = createLogger("debug");
 
-function createLogger(method: Extract<keyof Console, "log" | "info" | "warn" | "error" | "debug">): Logger {
-  if (typeof console === "undefined" || typeof console.log !== "function" || typeof console.log.apply !== "function") {
-    return noop;
-  }
+function createLogger(logLevel: LogLevel): Logger {
+  if (typeof console !== "undefined" && console[logLevel] && typeof console[logLevel].apply === "function") {
+    const numericLogLevel = logLevels[logLevel];
 
-  if (console[method] && typeof console[method].apply === "function") {
     return function () {
-      console[method].apply(console, arguments as any);
+      if (numericLogLevel >= activeLogLevel) {
+        console[logLevel].apply(console, arguments as any);
+      }
     };
   }
 
-  return function () {
-    console.log.apply(console, arguments as any);
-  };
+  return noop;
 }

package/src/utils/performance.ts

@@ -6,6 +6,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;
 
 export const isResourceTimingAvailable = !!(perf && perf.getEntriesByType);
 export const isPerformanceObserverAvailable =
@@ -57,6 +58,8 @@ type PerformanceObservationContoller = {
   cancel: () => void;
 };
 
+const usedResources = new WeakSet<PerformanceResourceTiming>();
+
 export function observeResourcePerformance(opts: ObserveResourcePerformanceOptions): PerformanceObservationContoller {
   if (!isPerformanceObserverAvailable) return observeWithoutPerformanceObserverSupport(opts.onEnd);
 
@@ -64,7 +67,7 @@ export function observeResourcePerformance(opts: ObserveResourcePerformanceOptio
   let startTime: number;
   let endTime: number;
 
-  let resource: PerformanceResourceTiming | undefined;
+  const resources: PerformanceResourceTiming[] = [];
 
   // Global resources that will need to be disposed
   let observer: PerformanceObserver | undefined;
@@ -100,43 +103,40 @@ export function observeResourcePerformance(opts: ObserveResourcePerformanceOptio
     endTime = perf.now();
     cancelFallbackEndNeverCalledTimer();
 
-    if (resource || !isWaitingAcceptable()) {
-      end();
-    } else {
-      addEventListener(doc!, "visibilitychange", onVisibilityChanged);
-      fallbackNoResourceFoundTimerHandle = setTimeout(end, opts.maxWaitForResourceMillis);
+    if (!isWaitingAcceptable()) {
+      return end();
     }
+
+    setTimeout(() => end(), Math.min(OBSERVER_WAIT_TIME_MS, opts.maxWaitForResourceMillis));
+    addEventListener(doc!, "visibilitychange", onVisibilityChanged);
+    fallbackNoResourceFoundTimerHandle = setTimeout(end, opts.maxWaitForResourceMillis);
   }
 
   function end() {
     disposeGlobalResources();
 
+    const resource = findBestMatchingResource();
+
     // In some old web browsers, e.g. Chrome 31, the value provided as the duration
     // can be very wrong. We have seen cases where this value is measured in years.
     // If this does seem be the case, then we will ignore the duration property and
     // instead prefer our approximation.
     if (resource?.duration && resource.duration < ONE_DAY_IN_MILLIS) {
-      opts.onEnd({ resource, duration: Math.round(resource.duration) });
+      opts.onEnd({ resource, duration: resource.duration });
     } else {
-      opts.onEnd({ resource, duration: Math.round(endTime - startTime) });
+      opts.onEnd({ resource, duration: endTime - startTime });
     }
   }
 
   function onResourceFound(list: PerformanceObserverEntryList) {
-    const r = list.getEntriesByType("resource").find((e) => {
-      // This polymorphism is not properly represented in the api types. The cast is safe since we're only accessing the resource timings.
-      const entry = e as PerformanceResourceTiming;
-      return (
-        entry.startTime >= startTime &&
-        (!endTime || endTime + opts.maxToleranceForResourceTimingsMillis >= entry.responseEnd) &&
-        opts.resourceMatcher(entry)
-      );
-    });
-
-    if (!r) return;
-
-    resource = r as PerformanceResourceTiming;
-    if (endTime) end();
+    list
+      .getEntriesByType("resource")
+      .filter((e) => {
+        // This polymorphism is not properly represented in the api types. The cast is safe since we're only accessing the resource timings.
+        const entry = e as PerformanceResourceTiming;
+        return entry.startTime >= startTime && opts.resourceMatcher(entry);
+      })
+      .forEach((entry) => resources.push(entry as PerformanceResourceTiming));
   }
 
   function onVisibilityChanged() {
@@ -179,6 +179,39 @@ export function observeResourcePerformance(opts: ObserveResourcePerformanceOptio
     if (!doc) return;
     removeEventListener(doc, "visibilitychange", onVisibilityChanged);
   }
+
+  function findBestMatchingResource(): PerformanceResourceTiming | undefined {
+    if (!resources.length) return undefined;
+
+    let bestMatch: PerformanceResourceTiming | undefined;
+    const matchingResources = resources.filter(
+      (res) => res.responseEnd <= endTime + opts.maxToleranceForResourceTimingsMillis && !usedResources.has(res)
+    );
+
+    if (!matchingResources.length) {
+      return undefined;
+    }
+
+    if (matchingResources.length === 1) {
+      bestMatch = matchingResources[0];
+    }
+
+    let bestScore: number | undefined;
+    if (!bestMatch) {
+      for (const res of matchingResources) {
+        const score = Math.abs(endTime - startTime - res.duration) + Math.abs(res.responseEnd - endTime);
+        if (bestScore === undefined || score < bestScore) {
+          bestScore = score;
+          bestMatch = res;
+        }
+      }
+    }
+
+    if (!bestMatch) return;
+
+    usedResources.add(bestMatch);
+    return bestMatch;
+  }
 }
 
 // We may only wait for resource data to arrive as long as the document is visible or in the process

package/src/vars.ts

@@ -129,7 +129,7 @@ export type Vars = {
    * applied when matching a request to its respective performance entry. A higher value might increase match frequency at
    * the cost of potential incorrect matches. Matching is performed based on request timing and url.
    *
-   * @default 3000
+   * @default 50
    */
   maxToleranceForResourceTimingsMillis: number;
 
@@ -160,7 +160,7 @@ export const vars: Vars = {
   wrapTimers: true,
   propagateTraceHeadersCorsURLs: [],
   maxWaitForResourceTimingsMillis: 10000,
-  maxToleranceForResourceTimingsMillis: 3000,
+  maxToleranceForResourceTimingsMillis: 50,
   headersToCapture: [],
   pageViewInstrumentation: {
     trackVirtualPageViews: true,