@dash0/sdk-web 0.13.1 → 0.13.2

package/dist/types/semantic-conventions.d.ts

@@ -23,6 +23,7 @@ export declare const USER_ROLES = "user.roles";
 export declare const EXCEPTION_MESSAGE = "exception.message";
 export declare const EXCEPTION_TYPE = "exception.type";
 export declare const EXCEPTION_STACKTRACE = "exception.stacktrace";
+export declare const ERROR_TYPE = "error.type";
 export declare const URL_DOMAIN = "url.domain";
 export declare const URL_FRAGMENT = "url.fragment";
 export declare const URL_FULL = "url.full";

package/dist/types/vars.d.ts

@@ -109,7 +109,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;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dash0/sdk-web",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Dash0's Web SDK to collect telemetry from end-users' web browsers",
   "type": "module",
   "main": "dist/dash0.umd.cjs",

package/src/instrumentations/http/fetch.ts

@@ -12,6 +12,7 @@ import {
   startSpan,
 } from "../../utils/otel";
 import {
+  ERROR_TYPE,
   HTTP_REQUEST_METHOD,
   HTTP_REQUEST_METHOD_ORIGINAL,
   HTTP_RESPONSE_STATUS_CODE,
@@ -166,7 +167,10 @@ function tryCaptureHttpHeaders(headers: Headers, span: InProgressSpan, getAttrib
 
 function addResponseData(span: InProgressSpan, response: Response) {
   const status = response.status;
-  setSpanStatus(span, status >= 200 && status < 400 ? SPAN_STATUS_UNSET : SPAN_STATUS_ERROR, response.statusText);
+  setSpanStatus(span, status >= 200 && status < 400 ? SPAN_STATUS_UNSET : SPAN_STATUS_ERROR);
+  if (status === 0) {
+    addAttribute(span.attributes, ERROR_TYPE, response.type);
+  }
   addAttribute(span.attributes, HTTP_RESPONSE_STATUS_CODE, String(status));
   tryCaptureHttpHeaders(response.headers, span, (k) => httpResponseHeaderKey(k));
 }

package/src/semantic-conventions.ts

@@ -31,6 +31,9 @@ export const EXCEPTION_MESSAGE = "exception.message";
 export const EXCEPTION_TYPE = "exception.type";
 export const EXCEPTION_STACKTRACE = "exception.stacktrace";
 
+// Error Attribute Keys
+export const ERROR_TYPE = "error.type";
+
 // URL Attribute Keys
 export const URL_DOMAIN = "url.domain";
 export const URL_FRAGMENT = "url.fragment";

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,