@sentry/browser-utils 11.0.0-alpha.0 → 11.0.0-alpha.2

package/build/esm/{metrics/browserMetrics.js → performance/entries.js}

@@ -1,54 +1,29 @@
-import { browserPerformanceTimeOrigin, spanToJSON, setMeasurement, getActiveSpan, parseUrl, filterCollectedUrl, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, debug, getComponentName } from '@sentry/core';
-import { htmlTreeAsString } from '../htmlTreeAsString.js';
+import { browserPerformanceTimeOrigin, spanToJSON, getActiveSpan, parseUrl, filterCollectedUrl, RESOURCE_SPAN_NAME_FALLBACK, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, setMeasurement } from '@sentry/core';
+import { SENTRY_OP, CODE_FILE_PATH, CODE_FUNCTION_NAME, NETWORK_CONNECTION_EFFECTIVE_TYPE, NETWORK_CONNECTION_TYPE, NETWORK_CONNECTION_RTT, URL_SCHEME, SERVER_ADDRESS, URL_DOMAIN, HTTP_REQUEST_SAME_ORIGIN, URL_FULL, HTTP_RESPONSE_STATUS_CODE, HTTP_RESPONSE_SIZE, HTTP_RESPONSE_BODY_SIZE } from '@sentry/conventions/attributes';
+import { UI_LONG_ANIMATION_FRAME, BROWSER_PAINT, UI_LONG_TASK } from '@sentry/conventions/op';
+import { addPerformanceInstrumentationHandler } from '../instrumentation/performanceObserver.js';
 import { WINDOW } from '../types.js';
-import { addPerformanceInstrumentationHandler, addLcpInstrumentationHandler, addClsInstrumentationHandler, addTtfbInstrumentationHandler } from './instrument.js';
-import { isValidLcpMetric } from './lcp.js';
 import { resourceTimingToSpanAttributes } from './resourceTiming.js';
 import { getBrowserPerformanceAPI, msToSec, startAndEndSpan, isMeasurementValue } from './utils.js';
-import { getActivationStart } from './web-vitals/lib/getActivationStart.js';
-import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry.js';
-import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher.js';
-import { DEBUG_BUILD } from '../debug-build.js';
-import { URL_FULL, SENTRY_OP } from '@sentry/conventions/attributes';
-import { BROWSER_BROWSER_PAINT_SPAN_OP } from '@sentry/conventions/op';
 
 const MAX_INT_AS_BYTES = 2147483647;
 let _performanceCursor = 0;
-let _measurements = {};
-let _lcpEntry;
-let _clsEntry;
-function startTrackingWebVitals({ trackCls, trackLcp }) {
-  const performance = getBrowserPerformanceAPI();
-  if (performance && browserPerformanceTimeOrigin()) {
-    const lcpCleanupCallback = trackLcp ? _trackLCP() : void 0;
-    const clsCleanupCallback = trackCls ? _trackCLS() : void 0;
-    const ttfbCleanupCallback = _trackTtfb();
-    const fpFcpCleanupCallback = _trackFpFcp();
-    return () => {
-      ttfbCleanupCallback();
-      fpFcpCleanupCallback();
-      lcpCleanupCallback?.();
-      clsCleanupCallback?.();
-    };
-  }
-  return () => void 0;
-}
 function startTrackingLongTasks() {
   addPerformanceInstrumentationHandler("longtask", ({ entries }) => {
     const parent = getActiveSpan();
     if (!parent) {
       return;
     }
-    const { op: parentOp, start_timestamp: parentStartTimestamp } = spanToJSON(parent);
+    const { attributes: parentAttributes, start_timestamp: parentStartTimestamp } = spanToJSON(parent);
     for (const entry of entries) {
       const startTime = msToSec(browserPerformanceTimeOrigin() + entry.startTime);
       const duration = msToSec(entry.duration);
-      if (parentOp === "navigation" && parentStartTimestamp && startTime < parentStartTimestamp) {
+      if (parentAttributes[SENTRY_OP] === "navigation" && parentStartTimestamp && startTime < parentStartTimestamp) {
         continue;
       }
       startAndEndSpan(parent, startTime, startTime + duration, {
         name: "Main UI thread blocked",
-        op: "ui.long_task",
+        op: UI_LONG_TASK,
         attributes: {
           [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.ui.browser.metrics"
         }
@@ -67,7 +42,10 @@ function startTrackingLongAnimationFrames() {
         continue;
       }
       const startTime = msToSec(browserPerformanceTimeOrigin() + entry.startTime);
-      const { start_timestamp: parentStartTimestamp, op: parentOp } = spanToJSON(parent);
+      const {
+        start_timestamp: parentStartTimestamp,
+        attributes: { [SENTRY_OP]: parentOp }
+      } = spanToJSON(parent);
       if (parentOp === "navigation" && parentStartTimestamp && startTime < parentStartTimestamp) {
         continue;
       }
@@ -80,93 +58,23 @@ function startTrackingLongAnimationFrames() {
       attributes["browser.script.invoker"] = invoker;
       attributes["browser.script.invoker_type"] = invokerType;
       if (sourceURL) {
-        attributes["code.filepath"] = sourceURL;
+        attributes[CODE_FILE_PATH] = sourceURL;
       }
       if (sourceFunctionName) {
-        attributes["code.function"] = sourceFunctionName;
+        attributes[CODE_FUNCTION_NAME] = sourceFunctionName;
       }
       if (sourceCharPosition !== -1) {
         attributes["browser.script.source_char_position"] = sourceCharPosition;
       }
       startAndEndSpan(parent, startTime, startTime + duration, {
         name: "Main UI thread blocked",
-        op: "ui.long_animation_frame",
+        op: UI_LONG_ANIMATION_FRAME,
         attributes
       });
     }
   });
   observer.observe({ type: "long-animation-frame", buffered: true });
 }
-function startTrackingInteractions() {
-  addPerformanceInstrumentationHandler("event", ({ entries }) => {
-    const parent = getActiveSpan();
-    if (!parent) {
-      return;
-    }
-    for (const entry of entries) {
-      if (entry.name === "click") {
-        const startTime = msToSec(browserPerformanceTimeOrigin() + entry.startTime);
-        const duration = msToSec(entry.duration);
-        const spanOptions = {
-          name: htmlTreeAsString(entry.target),
-          op: `ui.interaction.${entry.name}`,
-          startTime,
-          attributes: {
-            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.ui.browser.metrics"
-          }
-        };
-        const componentName = getComponentName(entry.target);
-        if (componentName) {
-          spanOptions.attributes["ui.component_name"] = componentName;
-        }
-        startAndEndSpan(parent, startTime, startTime + duration, spanOptions);
-      }
-    }
-  });
-}
-function _trackCLS() {
-  return addClsInstrumentationHandler(({ metric }) => {
-    const entry = metric.entries[metric.entries.length - 1];
-    if (!entry) {
-      return;
-    }
-    _measurements["cls"] = { value: metric.value, unit: "" };
-    _clsEntry = entry;
-  }, true);
-}
-function _trackLCP() {
-  return addLcpInstrumentationHandler(({ metric }) => {
-    const entry = metric.entries[metric.entries.length - 1];
-    if (!entry || !isValidLcpMetric(metric.value)) {
-      return;
-    }
-    _measurements["lcp"] = { value: metric.value, unit: "millisecond" };
-    _lcpEntry = entry;
-  }, true);
-}
-function _trackTtfb() {
-  return addTtfbInstrumentationHandler(({ metric }) => {
-    const entry = metric.entries[metric.entries.length - 1];
-    if (!entry) {
-      return;
-    }
-    _measurements["ttfb"] = { value: metric.value, unit: "millisecond" };
-  });
-}
-function _trackFpFcp() {
-  return addPerformanceInstrumentationHandler("paint", ({ entries }) => {
-    const firstHidden = getVisibilityWatcher();
-    for (const entry of entries) {
-      const shouldRecord = entry.startTime < firstHidden.firstHiddenTime;
-      if (entry.name === "first-paint" && shouldRecord) {
-        _measurements["fp"] = { value: entry.startTime, unit: "millisecond" };
-      }
-      if (entry.name === "first-contentful-paint" && shouldRecord) {
-        _measurements["fcp"] = { value: entry.startTime, unit: "millisecond" };
-      }
-    }
-  });
-}
 function addPerformanceEntries(span, options) {
   const performance = getBrowserPerformanceAPI();
   const origin = browserPerformanceTimeOrigin();
@@ -176,7 +84,7 @@ function addPerformanceEntries(span, options) {
   const { spanStreamingEnabled, ignoreResourceSpans } = options;
   const timeOrigin = msToSec(origin);
   const performanceEntries = performance.getEntries();
-  const { op, start_timestamp: transactionStartTime } = spanToJSON(span);
+  const { attributes, start_timestamp: transactionStartTime } = spanToJSON(span);
   performanceEntries.slice(_performanceCursor).forEach((entry) => {
     const startTime = msToSec(entry.startTime);
     const duration = msToSec(
@@ -186,7 +94,7 @@ function addPerformanceEntries(span, options) {
       // TODO: Investigate why this happens and how to properly mitigate. For now, this is a workaround to prevent transactions being dropped due to negative duration spans.
       Math.max(0, entry.duration)
     );
-    if (op === "navigation" && transactionStartTime && timeOrigin + startTime < transactionStartTime) {
+    if (attributes[SENTRY_OP] === "navigation" && transactionStartTime && timeOrigin + startTime < transactionStartTime) {
       return;
     }
     switch (entry.entryType) {
@@ -206,7 +114,8 @@ function addPerformanceEntries(span, options) {
           startTime,
           duration,
           timeOrigin,
-          ignoreResourceSpans
+          ignoreResourceSpans,
+          spanStreamingEnabled
         );
         break;
       }
@@ -215,61 +124,12 @@ function addPerformanceEntries(span, options) {
   _performanceCursor = Math.max(performanceEntries.length - 1, 0);
   _trackNavigator(span, spanStreamingEnabled);
 }
-function addWebVitalsToSpan(span, options) {
-  const origin = browserPerformanceTimeOrigin();
-  if (!getBrowserPerformanceAPI()?.getEntries || !origin) {
-    resetWebVitalState();
-    return;
-  }
-  const { spanStreamingEnabled, recordClsOnPageloadSpan, recordLcpOnPageloadSpan } = options;
-  const timeOrigin = msToSec(origin);
-  if (spanToJSON(span).op === "pageload") {
-    _addTtfbRequestTimeToMeasurements(_measurements);
-    if (spanStreamingEnabled) {
-      const setAttr = (shortWebVitalName, value, customAttrName) => {
-        const attrKey = customAttrName ?? `browser.web_vital.${shortWebVitalName}.value`;
-        span.setAttribute(attrKey, value);
-        DEBUG_BUILD && debug.log("Setting web vital attribute", { [attrKey]: value }, "on pageload span");
-      };
-      ["ttfb", "fp", "fcp"].forEach((measurementName) => {
-        if (_measurements[measurementName]) {
-          setAttr(measurementName, _measurements[measurementName].value);
-        }
-      });
-      if (_measurements["ttfb.requestTime"]) {
-        setAttr("ttfb.requestTime", _measurements["ttfb.requestTime"].value, "browser.web_vital.ttfb.request_time");
-      }
-    } else {
-      if (!recordClsOnPageloadSpan) {
-        delete _measurements.cls;
-      }
-      if (!recordLcpOnPageloadSpan) {
-        delete _measurements.lcp;
-      }
-      Object.entries(_measurements).forEach(([measurementName, measurement]) => {
-        setMeasurement(measurementName, measurement.value, measurement.unit, span);
-      });
-      _setWebVitalAttributes(span, options);
-    }
-    span.setAttribute(spanStreamingEnabled ? "browser.performance.time_origin" : "performance.timeOrigin", timeOrigin);
-    span.setAttribute(
-      spanStreamingEnabled ? "browser.performance.navigation.activation_start" : "performance.activationStart",
-      getActivationStart()
-    );
-  }
-  resetWebVitalState();
-}
-function resetWebVitalState() {
-  _lcpEntry = void 0;
-  _clsEntry = void 0;
-  _measurements = {};
-}
 function _addPaintSpan(span, entry, startTime, duration, timeOrigin) {
   const startTimestamp = timeOrigin + startTime;
   startAndEndSpan(span, startTimestamp, startTimestamp + duration, {
     name: entry.name,
     attributes: {
-      [SENTRY_OP]: BROWSER_BROWSER_PAINT_SPAN_OP,
+      [SENTRY_OP]: BROWSER_PAINT,
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.resource.browser.metrics"
     }
   });
@@ -331,7 +191,7 @@ function _addRequest(span, entry, timeOrigin) {
     });
   }
 }
-function _addResourceSpans(span, entry, resourceUrl, startTime, duration, timeOrigin, ignoredResourceSpanOps) {
+function _addResourceSpans(span, entry, resourceUrl, startTime, duration, timeOrigin, ignoredResourceSpanOps, spanStreamingEnabled) {
   if (entry.initiatorType === "xmlhttprequest" || entry.initiatorType === "fetch") {
     return;
   }
@@ -344,19 +204,24 @@ function _addResourceSpans(span, entry, resourceUrl, startTime, duration, timeOr
   };
   const parsedUrl = parseUrl(resourceUrl);
   if (parsedUrl.protocol) {
-    attributes["url.scheme"] = parsedUrl.protocol.split(":").pop();
+    attributes[URL_SCHEME] = parsedUrl.protocol.split(":").pop();
+  }
+  const host = parsedUrl.host?.replace(/^.*@/, "");
+  if (host) {
+    attributes[SERVER_ADDRESS] = host;
   }
-  if (parsedUrl.host) {
-    attributes["server.address"] = parsedUrl.host;
+  const domain = host?.replace(/:\d+$/, "");
+  if (domain) {
+    attributes[URL_DOMAIN] = domain;
   }
-  attributes["url.same_origin"] = resourceUrl.includes(WINDOW.location.origin);
+  attributes[HTTP_REQUEST_SAME_ORIGIN] = resourceUrl.includes(WINDOW.location.origin);
   attributes[URL_FULL] = filterCollectedUrl(resourceUrl);
   _setResourceRequestAttributes(entry, attributes, [
     // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus
-    ["responseStatus", "http.response.status_code"],
-    ["transferSize", "http.response_transfer_size"],
-    ["encodedBodySize", "http.response_content_length"],
-    ["decodedBodySize", "http.decoded_response_content_length"],
+    ["responseStatus", HTTP_RESPONSE_STATUS_CODE],
+    ["transferSize", HTTP_RESPONSE_SIZE],
+    ["encodedBodySize", HTTP_RESPONSE_BODY_SIZE],
+    ["decodedBodySize", "http.response.body.decoded_size"],
     // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus
     ["renderBlockingStatus", "resource.render_blocking_status"],
     // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
@@ -366,7 +231,8 @@ function _addResourceSpans(span, entry, resourceUrl, startTime, duration, timeOr
   const startTimestamp = timeOrigin + startTime;
   const endTimestamp = startTimestamp + duration;
   startAndEndSpan(span, startTimestamp, endTimestamp, {
-    name: resourceUrl.replace(WINDOW.location.origin, ""),
+    // With span streaming, span names have to be low cardinality, so we can't fall back to the URL.
+    name: spanStreamingEnabled ? domain || RESOURCE_SPAN_NAME_FALLBACK : resourceUrl.replace(WINDOW.location.origin, ""),
     op,
     attributes: attributesWithResourceTiming
   });
@@ -380,17 +246,17 @@ function _trackNavigator(span, spanStreamingEnabled) {
   if (connection) {
     if (connection.effectiveType) {
       span.setAttribute(
-        spanStreamingEnabled ? "network.connection.effective_type" : "effectiveConnectionType",
+        spanStreamingEnabled ? NETWORK_CONNECTION_EFFECTIVE_TYPE : "effectiveConnectionType",
         connection.effectiveType
       );
     }
     if (connection.type) {
-      span.setAttribute(spanStreamingEnabled ? "network.connection.type" : "connectionType", connection.type);
+      span.setAttribute(spanStreamingEnabled ? NETWORK_CONNECTION_TYPE : "connectionType", connection.type);
     }
     if (isMeasurementValue(connection.rtt)) {
       if (spanStreamingEnabled) {
-        span.setAttribute("network.connection.rtt", connection.rtt);
-      } else if (spanToJSON(span).op === "pageload") {
+        span.setAttribute(NETWORK_CONNECTION_RTT, connection.rtt);
+      } else if (spanToJSON(span).attributes[SENTRY_OP] === "pageload") {
         setMeasurement("connection.rtt", connection.rtt, "millisecond");
       }
     }
@@ -410,31 +276,6 @@ function _trackNavigator(span, spanStreamingEnabled) {
     }
   }
 }
-function _setWebVitalAttributes(span, options) {
-  if (_lcpEntry && options.recordLcpOnPageloadSpan) {
-    if (_lcpEntry.element) {
-      span.setAttribute("lcp.element", htmlTreeAsString(_lcpEntry.element));
-    }
-    if (_lcpEntry.id) {
-      span.setAttribute("lcp.id", _lcpEntry.id);
-    }
-    if (_lcpEntry.url) {
-      span.setAttribute("lcp.url", _lcpEntry.url.trim().slice(0, 200));
-    }
-    if (_lcpEntry.loadTime != null) {
-      span.setAttribute("lcp.loadTime", _lcpEntry.loadTime);
-    }
-    if (_lcpEntry.renderTime != null) {
-      span.setAttribute("lcp.renderTime", _lcpEntry.renderTime);
-    }
-    span.setAttribute("lcp.size", _lcpEntry.size);
-  }
-  if (_clsEntry?.sources && options.recordClsOnPageloadSpan) {
-    _clsEntry.sources.forEach(
-      (source, index) => span.setAttribute(`cls.source.${index + 1}`, htmlTreeAsString(source.node))
-    );
-  }
-}
 function _setResourceRequestAttributes(entry, attributes, properties) {
   properties.forEach(([entryKey, attributeKey]) => {
     const entryVal = entry[entryKey];
@@ -443,19 +284,6 @@ function _setResourceRequestAttributes(entry, attributes, properties) {
     }
   });
 }
-function _addTtfbRequestTimeToMeasurements(_measurements2) {
-  const navEntry = getNavigationEntry(false);
-  if (!navEntry) {
-    return;
-  }
-  const { responseStart, requestStart } = navEntry;
-  if (requestStart <= responseStart) {
-    _measurements2["ttfb.requestTime"] = {
-      value: responseStart - requestStart,
-      unit: "millisecond"
-    };
-  }
-}
 
-export { _addNavigationSpans, _addResourceSpans, _setResourceRequestAttributes, addPerformanceEntries, addWebVitalsToSpan, startTrackingInteractions, startTrackingLongAnimationFrames, startTrackingLongTasks, startTrackingWebVitals };
-//# sourceMappingURL=browserMetrics.js.map
+export { _addNavigationSpans, _addResourceSpans, _setResourceRequestAttributes, addPerformanceEntries, startTrackingLongAnimationFrames, startTrackingLongTasks };
+//# sourceMappingURL=entries.js.map

package/build/esm/performance/entries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entries.js","sources":["../../../src/performance/entries.ts"],"sourcesContent":["/* eslint-disable max-lines */\nimport type { Span, SpanAttributes } from '@sentry/core';\nimport {\n  browserPerformanceTimeOrigin,\n  getActiveSpan,\n  parseUrl,\n  RESOURCE_SPAN_NAME_FALLBACK,\n  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,\n  setMeasurement,\n  spanToJSON,\n  filterCollectedUrl,\n} from '@sentry/core';\nimport {\n  CODE_FILE_PATH,\n  CODE_FUNCTION_NAME,\n  HTTP_REQUEST_SAME_ORIGIN,\n  HTTP_RESPONSE_BODY_SIZE,\n  HTTP_RESPONSE_SIZE,\n  HTTP_RESPONSE_STATUS_CODE,\n  NETWORK_CONNECTION_EFFECTIVE_TYPE,\n  NETWORK_CONNECTION_RTT,\n  NETWORK_CONNECTION_TYPE,\n  SENTRY_OP,\n  SERVER_ADDRESS,\n  URL_DOMAIN,\n  URL_FULL,\n  URL_SCHEME,\n} from '@sentry/conventions/attributes';\nimport { BROWSER_PAINT, UI_LONG_ANIMATION_FRAME, UI_LONG_TASK } from '@sentry/conventions/op';\nimport {\n  addPerformanceInstrumentationHandler,\n  type PerformanceLongAnimationFrameTiming,\n} from '../instrumentation/performanceObserver';\nimport { WINDOW } from '../types';\nimport { resourceTimingToSpanAttributes } from './resourceTiming';\nimport { getBrowserPerformanceAPI, isMeasurementValue, msToSec, startAndEndSpan } from './utils';\n\ninterface NavigatorNetworkInformation {\n  readonly connection?: NetworkInformation;\n}\n\n// http://wicg.github.io/netinfo/#connection-types\ntype ConnectionType = 'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax';\n\n// http://wicg.github.io/netinfo/#effectiveconnectiontype-enum\ntype EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g';\n\n// http://wicg.github.io/netinfo/#dom-megabit\ntype Megabit = number;\n// http://wicg.github.io/netinfo/#dom-millisecond\ntype Millisecond = number;\n\n// http://wicg.github.io/netinfo/#networkinformation-interface\ninterface NetworkInformation extends EventTarget {\n  // http://wicg.github.io/netinfo/#type-attribute\n  readonly type?: ConnectionType;\n  // http://wicg.github.io/netinfo/#effectivetype-attribute\n  readonly effectiveType?: EffectiveConnectionType;\n  // http://wicg.github.io/netinfo/#downlinkmax-attribute\n  readonly downlinkMax?: Megabit;\n  // http://wicg.github.io/netinfo/#downlink-attribute\n  readonly downlink?: Megabit;\n  // http://wicg.github.io/netinfo/#rtt-attribute\n  readonly rtt?: Millisecond;\n  // http://wicg.github.io/netinfo/#savedata-attribute\n  readonly saveData?: boolean;\n  // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection\n  onchange?: EventListener;\n}\n\n// https://w3c.github.io/device-memory/#sec-device-memory-js-api\ninterface NavigatorDeviceMemory {\n  readonly deviceMemory?: number;\n}\n\nconst MAX_INT_AS_BYTES = 2147483647;\n\nlet _performanceCursor: number = 0;\n\n/**\n * Start tracking long tasks.\n */\nexport function startTrackingLongTasks(): void {\n  addPerformanceInstrumentationHandler('longtask', ({ entries }) => {\n    const parent = getActiveSpan();\n    if (!parent) {\n      return;\n    }\n\n    const { attributes: parentAttributes, start_timestamp: parentStartTimestamp } = spanToJSON(parent);\n\n    for (const entry of entries) {\n      const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);\n      const duration = msToSec(entry.duration);\n\n      if (parentAttributes[SENTRY_OP] === 'navigation' && parentStartTimestamp && startTime < parentStartTimestamp) {\n        // Skip adding a span if the long task started before the navigation started.\n        // `startAndEndSpan` will otherwise adjust the parent's start time to the span's start\n        // time, potentially skewing the duration of the actual navigation as reported via our\n        // routing instrumentations\n        continue;\n      }\n\n      startAndEndSpan(parent, startTime, startTime + duration, {\n        name: 'Main UI thread blocked',\n        op: UI_LONG_TASK,\n        attributes: {\n          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',\n        },\n      });\n    }\n  });\n}\n\n/**\n * Start tracking long animation frames.\n */\nexport function startTrackingLongAnimationFrames(): void {\n  // NOTE: the current web-vitals version (3.5.2) does not support long-animation-frame, so\n  // we directly observe `long-animation-frame` events instead of through the web-vitals\n  // `observe` helper function.\n  const observer = new PerformanceObserver(list => {\n    const parent = getActiveSpan();\n    if (!parent) {\n      return;\n    }\n    for (const entry of list.getEntries() as PerformanceLongAnimationFrameTiming[]) {\n      if (!entry.scripts[0]) {\n        continue;\n      }\n\n      const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);\n\n      const {\n        start_timestamp: parentStartTimestamp,\n        attributes: { [SENTRY_OP]: parentOp },\n      } = spanToJSON(parent);\n\n      if (parentOp === 'navigation' && parentStartTimestamp && startTime < parentStartTimestamp) {\n        // Skip adding the span if the long animation frame started before the navigation started.\n        // `startAndEndSpan` will otherwise adjust the parent's start time to the span's start\n        // time, potentially skewing the duration of the actual navigation as reported via our\n        // routing instrumentations\n        continue;\n      }\n      const duration = msToSec(entry.duration);\n\n      const attributes: SpanAttributes = {\n        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',\n      };\n\n      const initialScript = entry.scripts[0];\n      const { invoker, invokerType, sourceURL, sourceFunctionName, sourceCharPosition } = initialScript;\n      attributes['browser.script.invoker'] = invoker;\n      attributes['browser.script.invoker_type'] = invokerType;\n      if (sourceURL) {\n        attributes[CODE_FILE_PATH] = sourceURL;\n      }\n      if (sourceFunctionName) {\n        attributes[CODE_FUNCTION_NAME] = sourceFunctionName;\n      }\n      if (sourceCharPosition !== -1) {\n        attributes['browser.script.source_char_position'] = sourceCharPosition;\n      }\n\n      startAndEndSpan(parent, startTime, startTime + duration, {\n        name: 'Main UI thread blocked',\n        op: UI_LONG_ANIMATION_FRAME,\n        attributes,\n      });\n    }\n  });\n\n  observer.observe({ type: 'long-animation-frame', buffered: true });\n}\n\ninterface AddPerformanceEntriesOptions {\n  /**\n   * Resource spans with `op`s matching strings in the array will not be emitted.\n   *\n   * Default: []\n   */\n  ignoreResourceSpans: Array<'resource.script' | 'resource.css' | 'resource.img' | 'resource.other' | string>;\n\n  /**\n   * Whether span streaming is enabled.\n   */\n  spanStreamingEnabled?: boolean;\n}\n\n/** Add performance related spans to a transaction */\nexport function addPerformanceEntries(span: Span, options: AddPerformanceEntriesOptions): void {\n  const performance = getBrowserPerformanceAPI();\n  const origin = browserPerformanceTimeOrigin();\n  if (!performance?.getEntries || !origin) {\n    // Gatekeeper if performance API not available\n    return;\n  }\n\n  const { spanStreamingEnabled, ignoreResourceSpans } = options;\n\n  const timeOrigin = msToSec(origin);\n\n  const performanceEntries = performance.getEntries();\n\n  const { attributes, start_timestamp: transactionStartTime } = spanToJSON(span);\n\n  performanceEntries.slice(_performanceCursor).forEach(entry => {\n    const startTime = msToSec(entry.startTime);\n    const duration = msToSec(\n      // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.\n      // There is a SO post attempting to explain this, but it leaves one with open questions: https://stackoverflow.com/questions/23191918/peformance-getentries-and-negative-duration-display\n      // The way we clamp the value is probably not accurate, since we have observed this happen for things that may take a while to load, like for example the replay worker.\n      // TODO: Investigate why this happens and how to properly mitigate. For now, this is a workaround to prevent transactions being dropped due to negative duration spans.\n      Math.max(0, entry.duration),\n    );\n\n    if (\n      attributes[SENTRY_OP] === 'navigation' &&\n      transactionStartTime &&\n      timeOrigin + startTime < transactionStartTime\n    ) {\n      return;\n    }\n\n    switch (entry.entryType) {\n      case 'navigation': {\n        _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);\n        break;\n      }\n      case 'paint': {\n        _addPaintSpan(span, entry, startTime, duration, timeOrigin);\n        break;\n      }\n      case 'resource': {\n        _addResourceSpans(\n          span,\n          entry as PerformanceResourceTiming,\n          entry.name,\n          startTime,\n          duration,\n          timeOrigin,\n          ignoreResourceSpans,\n          spanStreamingEnabled,\n        );\n        break;\n      }\n      // Ignore other entry types.\n    }\n  });\n\n  _performanceCursor = Math.max(performanceEntries.length - 1, 0);\n\n  _trackNavigator(span, spanStreamingEnabled);\n}\n\n/** Create a span for a browser paint performance entry. */\nfunction _addPaintSpan(\n  span: Span,\n  entry: PerformanceEntry,\n  startTime: number,\n  duration: number,\n  timeOrigin: number,\n): void {\n  const startTimestamp = timeOrigin + startTime;\n\n  startAndEndSpan(span, startTimestamp, startTimestamp + duration, {\n    name: entry.name,\n    attributes: {\n      [SENTRY_OP]: BROWSER_PAINT,\n      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.resource.browser.metrics',\n    },\n  });\n}\n\n/**\n * Instrument navigation entries\n * exported only for tests\n */\nexport function _addNavigationSpans(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {\n  _addPerformanceNavigationTiming(span, entry, 'unloadEvent', timeOrigin, 'unload_event');\n  _addPerformanceNavigationTiming(span, entry, 'redirect', timeOrigin, 'redirect');\n  _addPerformanceNavigationTiming(span, entry, 'domContentLoadedEvent', timeOrigin, 'dom_content_loaded_event');\n  _addPerformanceNavigationTiming(span, entry, 'loadEvent', timeOrigin, 'load_event');\n  _addPerformanceNavigationTiming(span, entry, 'connect', timeOrigin, 'connect');\n  _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'tls_ssl');\n  _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');\n  _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'dns');\n\n  _addRequest(span, entry, timeOrigin);\n}\n\ntype StartEventName =\n  | 'secureConnection'\n  | 'fetch'\n  | 'domainLookup'\n  | 'unloadEvent'\n  | 'redirect'\n  | 'connect'\n  | 'domContentLoadedEvent'\n  | 'loadEvent';\n\ntype EndEventName =\n  | 'domainLookupStart'\n  | 'domainLookupEnd'\n  | 'unloadEventEnd'\n  | 'redirectEnd'\n  | 'connectEnd'\n  | 'domContentLoadedEventEnd'\n  | 'loadEventEnd';\n\n/** Create performance navigation related spans */\nfunction _addPerformanceNavigationTiming(\n  span: Span,\n  entry: PerformanceNavigationTiming,\n  event: StartEventName,\n  timeOrigin: number,\n  name: string = event,\n): void {\n  const eventEnd = _getEndPropertyNameForNavigationTiming(event) satisfies keyof PerformanceNavigationTiming;\n  const end = entry[eventEnd];\n  const start = entry[`${event}Start`];\n  if (!start || !end) {\n    return;\n  }\n  startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {\n    op: `browser.${name}`,\n    name: entry.name,\n    attributes: {\n      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',\n      ...(event === 'redirect' && entry.redirectCount != null ? { 'http.redirect_count': entry.redirectCount } : {}),\n    },\n  });\n}\n\nfunction _getEndPropertyNameForNavigationTiming(event: StartEventName): EndEventName {\n  if (event === 'secureConnection') {\n    return 'connectEnd';\n  }\n  if (event === 'fetch') {\n    return 'domainLookupStart';\n  }\n  return `${event}End`;\n}\n\n/** Create request and response related spans */\nfunction _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {\n  const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart);\n  const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd);\n  const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart);\n  if (entry.responseEnd) {\n    // It is possible that we are collecting these metrics when the page hasn't finished loading yet, for example when the HTML slowly streams in.\n    // In this case, ie. when the document request hasn't finished yet, `entry.responseEnd` will be 0.\n    // In order not to produce faulty spans, where the end timestamp is before the start timestamp, we will only collect\n    // these spans when the responseEnd value is available. The backend (Relay) would drop the entire span if it contained faulty spans.\n    startAndEndSpan(span, requestStartTimestamp, responseEndTimestamp, {\n      op: 'browser.request',\n      name: entry.name,\n      attributes: {\n        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',\n      },\n    });\n\n    startAndEndSpan(span, responseStartTimestamp, responseEndTimestamp, {\n      op: 'browser.response',\n      name: entry.name,\n      attributes: {\n        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',\n      },\n    });\n  }\n}\n\n/**\n * Create resource-related spans.\n * Exported only for tests.\n */\nexport function _addResourceSpans(\n  span: Span,\n  entry: PerformanceResourceTiming,\n  resourceUrl: string,\n  startTime: number,\n  duration: number,\n  timeOrigin: number,\n  ignoredResourceSpanOps?: Array<string>,\n  spanStreamingEnabled?: boolean,\n): void {\n  // we already instrument based on fetch and xhr, so we don't need to\n  // duplicate spans here.\n  if (entry.initiatorType === 'xmlhttprequest' || entry.initiatorType === 'fetch') {\n    return;\n  }\n\n  const op = entry.initiatorType ? `resource.${entry.initiatorType}` : 'resource.other';\n  if (ignoredResourceSpanOps?.includes(op)) {\n    return;\n  }\n\n  const attributes: SpanAttributes = {\n    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.resource.browser.metrics',\n  };\n\n  const parsedUrl = parseUrl(resourceUrl);\n\n  if (parsedUrl.protocol) {\n    attributes[URL_SCHEME] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.\n  }\n\n  // `host` is the URL authority, so it can carry userinfo, which doesn't belong on either attribute.\n  const host = parsedUrl.host?.replace(/^.*@/, '');\n\n  if (host) {\n    attributes[SERVER_ADDRESS] = host;\n  }\n\n  // Unlike `server.address`, `url.domain` excludes the port.\n  const domain = host?.replace(/:\\d+$/, '');\n\n  if (domain) {\n    attributes[URL_DOMAIN] = domain;\n  }\n\n  attributes[HTTP_REQUEST_SAME_ORIGIN] = resourceUrl.includes(WINDOW.location.origin);\n\n  attributes[URL_FULL] = filterCollectedUrl(resourceUrl);\n\n  _setResourceRequestAttributes(entry, attributes, [\n    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus\n    ['responseStatus', HTTP_RESPONSE_STATUS_CODE],\n\n    ['transferSize', HTTP_RESPONSE_SIZE],\n    ['encodedBodySize', HTTP_RESPONSE_BODY_SIZE],\n    ['decodedBodySize', 'http.response.body.decoded_size'],\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus\n    ['renderBlockingStatus', 'resource.render_blocking_status'],\n\n    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType\n    ['deliveryType', 'http.response_delivery_type'],\n  ]);\n\n  const attributesWithResourceTiming: SpanAttributes = { ...attributes, ...resourceTimingToSpanAttributes(entry) };\n\n  const startTimestamp = timeOrigin + startTime;\n  const endTimestamp = startTimestamp + duration;\n\n  startAndEndSpan(span, startTimestamp, endTimestamp, {\n    // With span streaming, span names have to be low cardinality, so we can't fall back to the URL.\n    name: spanStreamingEnabled\n      ? domain || RESOURCE_SPAN_NAME_FALLBACK\n      : resourceUrl.replace(WINDOW.location.origin, ''),\n    op,\n    attributes: attributesWithResourceTiming,\n  });\n}\n\n/**\n * Capture the information of the user agent.\n * TODO v11: Remove non-span-streaming attributes and measurements once we removed transactions\n */\nfunction _trackNavigator(span: Span, spanStreamingEnabled: boolean | undefined): void {\n  const navigator = WINDOW.navigator as null | (Navigator & NavigatorNetworkInformation & NavigatorDeviceMemory);\n  if (!navigator) {\n    return;\n  }\n\n  // track network connectivity\n  const connection = navigator.connection;\n  if (connection) {\n    if (connection.effectiveType) {\n      span.setAttribute(\n        spanStreamingEnabled ? NETWORK_CONNECTION_EFFECTIVE_TYPE : 'effectiveConnectionType',\n        connection.effectiveType,\n      );\n    }\n\n    if (connection.type) {\n      span.setAttribute(spanStreamingEnabled ? NETWORK_CONNECTION_TYPE : 'connectionType', connection.type);\n    }\n\n    if (isMeasurementValue(connection.rtt)) {\n      if (spanStreamingEnabled) {\n        span.setAttribute(NETWORK_CONNECTION_RTT, connection.rtt);\n      } else if (spanToJSON(span).attributes[SENTRY_OP] === 'pageload') {\n        // Measurements are only recorded on the pageload span, matching the historical\n        // behavior where `connection.rtt` was only flushed for pageload transactions.\n        setMeasurement('connection.rtt', connection.rtt, 'millisecond');\n      }\n    }\n  }\n\n  if (isMeasurementValue(navigator.deviceMemory)) {\n    if (spanStreamingEnabled) {\n      span.setAttribute('device.memory.estimated_capacity', navigator.deviceMemory);\n    } else {\n      span.setAttribute('deviceMemory', `${navigator.deviceMemory} GB`);\n    }\n  }\n\n  if (isMeasurementValue(navigator.hardwareConcurrency)) {\n    if (spanStreamingEnabled) {\n      span.setAttribute('device.processor_count', navigator.hardwareConcurrency);\n    } else {\n      span.setAttribute('hardwareConcurrency', String(navigator.hardwareConcurrency));\n    }\n  }\n}\n\ntype ExperimentalResourceTimingProperty =\n  | 'renderBlockingStatus'\n  | 'deliveryType'\n  // For some reason, TS during build, errors on `responseStatus` not being a property of\n  // PerformanceResourceTiming while it actually is. Hence, we're adding it here.\n  // Perhaps because response status is not yet available in Webkit/Safari.\n  // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus\n  | 'responseStatus';\n\n/**\n * Use this to set any attributes we can take directly form the PerformanceResourceTiming entry.\n *\n * This is just a mapping function for entry->attribute to keep bundle-size minimal.\n * Experimental properties are also accepted (see {@link ExperimentalResourceTimingProperty}).\n * Assumes that all entry properties might be undefined for browser-specific differences.\n * Only accepts string and number values for now and also sets 0-values.\n */\nexport function _setResourceRequestAttributes(\n  entry: Partial<PerformanceResourceTiming> & Partial<Record<ExperimentalResourceTimingProperty, number | string>>,\n  attributes: SpanAttributes,\n  properties: [keyof PerformanceResourceTiming | ExperimentalResourceTimingProperty, string][],\n): void {\n  properties.forEach(([entryKey, attributeKey]) => {\n    const entryVal = entry[entryKey];\n    if (\n      entryVal != null &&\n      ((typeof entryVal === 'number' && entryVal < MAX_INT_AS_BYTES) || typeof entryVal === 'string')\n    ) {\n      attributes[attributeKey] = entryVal;\n    }\n  });\n}\n"],"names":[],"mappings":"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"}

package/build/esm/performance/interactions.js

@@ -0,0 +1,121 @@
+import { SENTRY_OP, SENTRY_SOURCE, SENTRY_SEGMENT_NAME_SOURCE, SENTRY_ORIGIN, SENTRY_IDLE_SPAN_FINISH_REASON, UI_COMPONENT_NAME } from '@sentry/conventions/attributes';
+import { UI_ACTION_CLICK, UI_INTERACTION_CLICK } from '@sentry/conventions/op';
+import { defineIntegration, getRootSpan, spanToJSON, debug, getActiveSpan, browserPerformanceTimeOrigin } from '@sentry/core';
+import { startIdleSpan } from '@sentry/core/browser';
+import { DEBUG_BUILD } from '../debug-build.js';
+import { htmlTreeAsString } from '../htmlTreeAsString.js';
+import { addPerformanceInstrumentationHandler } from '../instrumentation/performanceObserver.js';
+import { isBotUserAgent } from '../isBotUserAgent.js';
+import { WINDOW } from '../types.js';
+import { msToSec, startAndEndSpan } from './utils.js';
+import { getComponentName } from '../component-name.js';
+
+const INTEGRATION_NAME = "Interactions";
+const _interactionsIntegration = ((options = {}) => {
+  return {
+    name: INTEGRATION_NAME,
+    setup(client) {
+      if (isBotUserAgent()) {
+        return;
+      }
+      const latestRoute = { name: void 0, source: void 0 };
+      let inflightRouteSpan;
+      function trackRoute(span) {
+        const { name, attributes } = spanToJSON(span);
+        latestRoute.name = name;
+        latestRoute.source = attributes[SENTRY_SOURCE] || attributes[SENTRY_SEGMENT_NAME_SOURCE];
+      }
+      client.on("spanStart", (span) => {
+        if (isRouteSpan(span)) {
+          inflightRouteSpan = span;
+          trackRoute(span);
+        }
+      });
+      client.on("spanEnd", (span) => {
+        if (span !== inflightRouteSpan) {
+          return;
+        }
+        inflightRouteSpan = void 0;
+        trackRoute(span);
+      });
+      registerInteractionListener(latestRoute, () => inflightRouteSpan, options);
+      trackInteractionsAsSpans();
+    }
+  };
+});
+const interactionsIntegration = defineIntegration(_interactionsIntegration);
+function isRouteSpan(span) {
+  if (getRootSpan(span) !== span) {
+    return false;
+  }
+  const op = spanToJSON(span).attributes[SENTRY_OP];
+  return op === "pageload" || op === "navigation";
+}
+function registerInteractionListener(latestRoute, getInflightRouteSpan, idleSpanOptions) {
+  if (!WINDOW.document) {
+    return;
+  }
+  let inflightInteractionSpan;
+  addEventListener(
+    "click",
+    () => {
+      if (getInflightRouteSpan()) {
+        DEBUG_BUILD && debug.warn(
+          `[Tracing] Did not create ${UI_ACTION_CLICK} span because a pageload or navigation span is in progress.`
+        );
+        return;
+      }
+      if (inflightInteractionSpan) {
+        inflightInteractionSpan.setAttribute(SENTRY_IDLE_SPAN_FINISH_REASON, "interactionInterrupted");
+        inflightInteractionSpan.end();
+        inflightInteractionSpan = void 0;
+      }
+      if (!latestRoute.name) {
+        DEBUG_BUILD && debug.warn(`[Tracing] Did not create ${UI_ACTION_CLICK} span because the latest route name is missing.`);
+        return;
+      }
+      inflightInteractionSpan = startIdleSpan(
+        {
+          name: latestRoute.name,
+          attributes: {
+            [SENTRY_OP]: UI_ACTION_CLICK,
+            [SENTRY_SEGMENT_NAME_SOURCE]: latestRoute.source || "url",
+            [SENTRY_ORIGIN]: "auto.browser.interactions"
+          }
+        },
+        idleSpanOptions
+      );
+    },
+    { capture: true }
+  );
+}
+function trackInteractionsAsSpans() {
+  addPerformanceInstrumentationHandler("event", ({ entries }) => {
+    const parent = getActiveSpan();
+    if (!parent) {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name === "click") {
+        const startTime = msToSec(browserPerformanceTimeOrigin() + entry.startTime);
+        const duration = msToSec(entry.duration);
+        const spanOptions = {
+          name: htmlTreeAsString(entry.target),
+          startTime,
+          attributes: {
+            [SENTRY_OP]: UI_INTERACTION_CLICK,
+            [SENTRY_ORIGIN]: "auto.browser.interactions"
+          }
+        };
+        const componentName = getComponentName(entry.target);
+        if (componentName) {
+          spanOptions.attributes[UI_COMPONENT_NAME] = componentName;
+        }
+        startAndEndSpan(parent, startTime, startTime + duration, spanOptions);
+      }
+    }
+  });
+}
+
+export { interactionsIntegration };
+//# sourceMappingURL=interactions.js.map

package/build/esm/performance/interactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.js","sources":["../../../src/performance/interactions.ts"],"sourcesContent":["import {\n  SENTRY_OP,\n  SENTRY_ORIGIN,\n  SENTRY_IDLE_SPAN_FINISH_REASON,\n  UI_COMPONENT_NAME,\n  SENTRY_SOURCE,\n  SENTRY_SEGMENT_NAME_SOURCE,\n} from '@sentry/conventions/attributes';\nimport { UI_INTERACTION_CLICK, UI_ACTION_CLICK } from '@sentry/conventions/op';\nimport type { IntegrationFn, Span, StartSpanOptions, TransactionSource } from '@sentry/core';\nimport {\n  browserPerformanceTimeOrigin,\n  debug,\n  defineIntegration,\n  getActiveSpan,\n  getRootSpan,\n  spanToJSON,\n} from '@sentry/core';\nimport { startIdleSpan } from '@sentry/core/browser';\nimport { DEBUG_BUILD } from '../debug-build';\nimport { htmlTreeAsString } from '../htmlTreeAsString';\nimport { addPerformanceInstrumentationHandler } from '../instrumentation/performanceObserver';\nimport { isBotUserAgent } from '../isBotUserAgent';\nimport { WINDOW } from '../types';\nimport { msToSec, startAndEndSpan } from './utils';\nimport { getComponentName } from '../component-name';\n\nconst INTEGRATION_NAME = 'Interactions';\n\ninterface InteractionsOptions {\n  /**\n   * The time that has to pass without any span being created.\n   * If this time is exceeded, the interaction span will finish.\n   *\n   * Default: 1000 (ms)\n   */\n  idleTimeout?: number;\n\n  /**\n   * The max. time an interaction span may run.\n   * If this time is exceeded, the interaction span will finish no matter what.\n   *\n   * Default: 30000 (ms)\n   */\n  finalTimeout?: number;\n\n  /**\n   * The max. time a child span of an interaction span may run.\n   * If this time is exceeded, the interaction span will finish no matter what.\n   *\n   * Default: 15000 (ms)\n   */\n  childSpanTimeout?: number;\n}\n\ninterface RouteInfo {\n  name: string | undefined;\n  source: TransactionSource | undefined;\n}\n\nconst _interactionsIntegration = ((options: InteractionsOptions = {}) => {\n  return {\n    name: INTEGRATION_NAME,\n    setup(client) {\n      if (isBotUserAgent()) {\n        return;\n      }\n\n      const latestRoute: RouteInfo = { name: undefined, source: undefined };\n      // The pageload/navigation span that is currently in progress, if any. Clicks that happen while one\n      // is open are not turned into interaction spans, as they'd compete with the route span for children.\n      let inflightRouteSpan: Span | undefined;\n\n      function trackRoute(span: Span): void {\n        const { name, attributes } = spanToJSON(span);\n        latestRoute.name = name;\n        // oxlint-disable-next-line typescript/no-deprecated\n        latestRoute.source = (attributes[SENTRY_SOURCE] || attributes[SENTRY_SEGMENT_NAME_SOURCE]) as\n          | TransactionSource\n          | undefined;\n      }\n\n      client.on('spanStart', span => {\n        if (isRouteSpan(span)) {\n          inflightRouteSpan = span;\n          trackRoute(span);\n        }\n      });\n\n      client.on('spanEnd', span => {\n        if (span !== inflightRouteSpan) {\n          return;\n        }\n        inflightRouteSpan = undefined;\n        // Re-read the route on end: routing instrumentation frequently renames the pageload or navigation\n        // span once the route is resolved, so this is more accurate than what we saw at span start.\n        trackRoute(span);\n      });\n\n      registerInteractionListener(latestRoute, () => inflightRouteSpan, options);\n\n      trackInteractionsAsSpans();\n    },\n  };\n}) satisfies IntegrationFn;\n\n/**\n * Captures user interactions as spans.\n *\n * Important: This integration is considered experimental and might lead to noisy spans. Use at your own risk.\n *\n *\n * Clicks that happen outside of an in-progress pageload or navigation start an idle `ui.action.click` span,\n * named after the last known route, which collects everything the interaction triggers (requests, child spans,\n * …). Additionally, `ui.interaction.click` spans are recorded for the browser's own `event` timing entries.\n *\n * The integration requires `browserTracingIntegration` (or another source of pageload/navigation spans)\n * to know which route an interaction belongs to.\n *\n * @example\n * ```ts\n * Sentry.init({\n *   integrations: [Sentry.browserTracingIntegration(), Sentry.interactionsIntegration()],\n * });\n * ```\n */\nexport const interactionsIntegration = defineIntegration(_interactionsIntegration);\n\nfunction isRouteSpan(span: Span): boolean {\n  if (getRootSpan(span) !== span) {\n    return false;\n  }\n  const op = spanToJSON(span).attributes[SENTRY_OP];\n  return op === 'pageload' || op === 'navigation';\n}\n\nfunction registerInteractionListener(\n  latestRoute: RouteInfo,\n  getInflightRouteSpan: () => Span | undefined,\n  // `startIdleSpan` fills in `TRACING_DEFAULTS` for whatever is left out, which are the same defaults\n  // `browserTracingIntegration` uses for its pageload and navigation spans.\n  idleSpanOptions: InteractionsOptions,\n): void {\n  // `document` is not available in all browser environments (e.g. web workers), and without it there is\n  // nothing to click on.\n  if (!WINDOW.document) {\n    return;\n  }\n\n  let inflightInteractionSpan: Span | undefined;\n\n  addEventListener(\n    'click',\n    () => {\n      if (getInflightRouteSpan()) {\n        DEBUG_BUILD &&\n          debug.warn(\n            `[Tracing] Did not create ${UI_ACTION_CLICK} span because a pageload or navigation span is in progress.`,\n          );\n        return;\n      }\n\n      if (inflightInteractionSpan) {\n        inflightInteractionSpan.setAttribute(SENTRY_IDLE_SPAN_FINISH_REASON, 'interactionInterrupted');\n        inflightInteractionSpan.end();\n        inflightInteractionSpan = undefined;\n      }\n\n      if (!latestRoute.name) {\n        DEBUG_BUILD &&\n          debug.warn(`[Tracing] Did not create ${UI_ACTION_CLICK} span because the latest route name is missing.`);\n        return;\n      }\n\n      inflightInteractionSpan = startIdleSpan(\n        {\n          name: latestRoute.name,\n          attributes: {\n            [SENTRY_OP]: UI_ACTION_CLICK,\n            [SENTRY_SEGMENT_NAME_SOURCE]: latestRoute.source || 'url',\n            [SENTRY_ORIGIN]: 'auto.browser.interactions',\n          },\n        },\n        idleSpanOptions,\n      );\n    },\n    { capture: true },\n  );\n}\n\n/**\n * Record the browser's `event` timing entries for clicks as spans on the currently active span.\n */\nfunction trackInteractionsAsSpans(): void {\n  addPerformanceInstrumentationHandler('event', ({ entries }) => {\n    const parent = getActiveSpan();\n    if (!parent) {\n      return;\n    }\n    for (const entry of entries) {\n      if (entry.name === 'click') {\n        const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);\n        const duration = msToSec(entry.duration);\n\n        const spanOptions: StartSpanOptions & Required<Pick<StartSpanOptions, 'attributes'>> = {\n          name: htmlTreeAsString(entry.target),\n          startTime: startTime,\n          attributes: {\n            [SENTRY_OP]: UI_INTERACTION_CLICK,\n            [SENTRY_ORIGIN]: 'auto.browser.interactions',\n          },\n        };\n\n        const componentName = getComponentName(entry.target);\n        if (componentName) {\n          spanOptions.attributes[UI_COMPONENT_NAME] = componentName;\n        }\n\n        startAndEndSpan(parent, startTime, startTime + duration, spanOptions);\n      }\n    }\n  });\n}\n"],"names":[],"mappings":"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"}

package/build/esm/performance/resourceTiming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resourceTiming.js","sources":["../../../src/performance/resourceTiming.ts"],"sourcesContent":["import type { SpanAttributes } from '@sentry/core';\nimport { browserPerformanceTimeOrigin } from '@sentry/core';\nimport { extractNetworkProtocol, getBrowserPerformanceAPI } from './utils';\n\nfunction getAbsoluteTime(time: number | undefined): number | undefined {\n  // falsy values should be preserved so that we can later on drop undefined values and\n  // preserve 0 vals for cross-origin resources without proper `Timing-Allow-Origin` header.\n  return time ? ((browserPerformanceTimeOrigin() || performance.timeOrigin) + time) / 1000 : time;\n}\n\n/**\n * Converts a PerformanceResourceTiming entry to span data for the resource span. Most importantly,\n * it converts the timing values from timestamps relative to the `performance.timeOrigin` to absolute timestamps\n * in seconds.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming#timestamps\n *\n * @param resourceTiming\n * @returns An array where the first element is the attribute name and the second element is the attribute value.\n */\nexport function resourceTimingToSpanAttributes(resourceTiming: PerformanceResourceTiming): SpanAttributes {\n  const timingSpanData: SpanAttributes = {};\n  // Checking for only `undefined` and `null` is intentional because it's\n  // valid for `nextHopProtocol` to be an empty string.\n  if (resourceTiming.nextHopProtocol != undefined) {\n    const { name, version } = extractNetworkProtocol(resourceTiming.nextHopProtocol);\n    timingSpanData['network.protocol.version'] = version;\n    timingSpanData['network.protocol.name'] = name;\n  }\n\n  if (!(browserPerformanceTimeOrigin() || getBrowserPerformanceAPI()?.timeOrigin)) {\n    return timingSpanData;\n  }\n\n  return dropUndefinedKeysFromObject({\n    ...timingSpanData,\n\n    'http.request.redirect_start': getAbsoluteTime(resourceTiming.redirectStart),\n    'http.request.redirect_end': getAbsoluteTime(resourceTiming.redirectEnd),\n\n    'http.request.worker_start': getAbsoluteTime(resourceTiming.workerStart),\n\n    'http.request.fetch_start': getAbsoluteTime(resourceTiming.fetchStart),\n\n    'http.request.domain_lookup_start': getAbsoluteTime(resourceTiming.domainLookupStart),\n    'http.request.domain_lookup_end': getAbsoluteTime(resourceTiming.domainLookupEnd),\n\n    'http.request.connect_start': getAbsoluteTime(resourceTiming.connectStart),\n    'http.request.secure_connection_start': getAbsoluteTime(resourceTiming.secureConnectionStart),\n    'http.request.connection_end': getAbsoluteTime(resourceTiming.connectEnd),\n\n    'http.request.request_start': getAbsoluteTime(resourceTiming.requestStart),\n\n    'http.request.response_start': getAbsoluteTime(resourceTiming.responseStart),\n    'http.request.response_end': getAbsoluteTime(resourceTiming.responseEnd),\n\n    // For TTFB we actually want the relative time from timeOrigin to responseStart\n    // This way, TTFB always measures the \"first page load\" experience.\n    // see: https://web.dev/articles/ttfb#measure-resource-requests\n    'http.request.time_to_first_byte':\n      resourceTiming.responseStart != null ? resourceTiming.responseStart / 1000 : undefined,\n  });\n}\n\n/**\n * Remove properties with `undefined` as value from an object.\n * In contrast to `dropUndefinedKeys` in core this funciton only works on first-level\n * key-value objects and does not recursively go into object properties or arrays.\n */\nfunction dropUndefinedKeysFromObject<T extends object>(attrs: T): Partial<T> {\n  return Object.fromEntries(Object.entries(attrs).filter(([, value]) => value != null)) as Partial<T>;\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gBAAgB,IAAA,EAA8C;AAGrE,EAAA,OAAO,SAAS,4BAAA,EAA6B,IAAK,WAAA,CAAY,UAAA,IAAc,QAAQ,GAAA,GAAO,IAAA;AAC7F;AAYO,SAAS,+BAA+B,cAAA,EAA2D;AACxG,EAAA,MAAM,iBAAiC,EAAC;AAGxC,EAAA,IAAI,cAAA,CAAe,mBAAmB,MAAA,EAAW;AAC/C,IAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAQ,GAAI,sBAAA,CAAuB,eAAe,eAAe,CAAA;AAC/E,IAAA,cAAA,CAAe,0BAA0B,CAAA,GAAI,OAAA;AAC7C,IAAA,cAAA,CAAe,uBAAuB,CAAA,GAAI,IAAA;AAAA,EAC5C;AAEA,EAAA,IAAI,EAAE,4BAAA,EAA6B,IAAK,wBAAA,IAA4B,UAAA,CAAA,EAAa;AAC/E,IAAA,OAAO,cAAA;AAAA,EACT;AAEA,EAAA,OAAO,2BAAA,CAA4B;AAAA,IACjC,GAAG,cAAA;AAAA,IAEH,6BAAA,EAA+B,eAAA,CAAgB,cAAA,CAAe,aAAa,CAAA;AAAA,IAC3E,2BAAA,EAA6B,eAAA,CAAgB,cAAA,CAAe,WAAW,CAAA;AAAA,IAEvE,2BAAA,EAA6B,eAAA,CAAgB,cAAA,CAAe,WAAW,CAAA;AAAA,IAEvE,0BAAA,EAA4B,eAAA,CAAgB,cAAA,CAAe,UAAU,CAAA;AAAA,IAErE,kCAAA,EAAoC,eAAA,CAAgB,cAAA,CAAe,iBAAiB,CAAA;AAAA,IACpF,gCAAA,EAAkC,eAAA,CAAgB,cAAA,CAAe,eAAe,CAAA;AAAA,IAEhF,4BAAA,EAA8B,eAAA,CAAgB,cAAA,CAAe,YAAY,CAAA;AAAA,IACzE,sCAAA,EAAwC,eAAA,CAAgB,cAAA,CAAe,qBAAqB,CAAA;AAAA,IAC5F,6BAAA,EAA+B,eAAA,CAAgB,cAAA,CAAe,UAAU,CAAA;AAAA,IAExE,4BAAA,EAA8B,eAAA,CAAgB,cAAA,CAAe,YAAY,CAAA;AAAA,IAEzE,6BAAA,EAA+B,eAAA,CAAgB,cAAA,CAAe,aAAa,CAAA;AAAA,IAC3E,2BAAA,EAA6B,eAAA,CAAgB,cAAA,CAAe,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA,IAKvE,mCACE,cAAA,CAAe,aAAA,IAAiB,IAAA,GAAO,cAAA,CAAe,gBAAgB,GAAA,GAAO;AAAA,GAChF,CAAA;AACH;AAOA,SAAS,4BAA8C,KAAA,EAAsB;AAC3E,EAAA,OAAO,MAAA,CAAO,WAAA,CAAY,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,GAAG,KAAK,CAAA,KAAM,KAAA,IAAS,IAAI,CAAC,CAAA;AACtF;;;;"}

package/build/esm/{metrics → performance}/userTiming.js

@@ -1,7 +1,7 @@
-import { SENTRY_ORIGIN } from '@sentry/conventions/attributes';
+import { SENTRY_OP, SENTRY_ORIGIN } from '@sentry/conventions/attributes';
 import { defineIntegration, browserPerformanceTimeOrigin, spanToJSON, stringMatchesSomePattern, isPrimitive } from '@sentry/core';
 import { getBrowserPerformanceAPI, msToSec, startAndEndSpan } from './utils.js';
-import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry.js';
+import { getNavigationEntry } from '../web-vitals/utils.js';
 
 const INTEGRATION_NAME = "UserTiming";
 const _userTimingIntegration = ((options = {}) => {
@@ -16,7 +16,8 @@ const _userTimingIntegration = ((options = {}) => {
       const timeOriginInSeconds = msToSec(timeOrigin);
       let performanceCursor = 0;
       client.on("beforeIdleSpanEnd", (idleSpan) => {
-        const { op: parentOp, start_timestamp: parentStartTimestamp } = spanToJSON(idleSpan);
+        const { attributes, start_timestamp: parentStartTimestamp } = spanToJSON(idleSpan);
+        const parentOp = attributes[SENTRY_OP];
         if (parentOp !== "pageload" && parentOp !== "navigation") {
           return;
         }