@sentry/browser-utils 10.58.0

package/build/esm/metrics/cls.js

@@ -0,0 +1,61 @@
+import { debug, browserPerformanceTimeOrigin, timestampInSeconds, getCurrentScope, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT, SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
+import { DEBUG_BUILD } from '../debug-build.js';
+import { htmlTreeAsString } from '../htmlTreeAsString.js';
+import { addClsInstrumentationHandler } from './instrument.js';
+import { supportsWebVital, listenForWebVitalReportEvents, msToSec, startStandaloneWebVitalSpan } from './utils.js';
+
+function trackClsAsStandaloneSpan(client) {
+  let standaloneCLsValue = 0;
+  let standaloneClsEntry;
+  if (!supportsWebVital("layout-shift")) {
+    return;
+  }
+  const cleanupClsHandler = addClsInstrumentationHandler(({ metric }) => {
+    const entry = metric.entries[metric.entries.length - 1];
+    if (!entry) {
+      return;
+    }
+    standaloneCLsValue = metric.value;
+    standaloneClsEntry = entry;
+  }, true);
+  listenForWebVitalReportEvents(client, (reportEvent, pageloadSpanId) => {
+    _sendStandaloneClsSpan(standaloneCLsValue, standaloneClsEntry, pageloadSpanId, reportEvent);
+    cleanupClsHandler();
+  });
+}
+function _sendStandaloneClsSpan(clsValue, entry, pageloadSpanId, reportEvent) {
+  DEBUG_BUILD && debug.log(`Sending CLS span (${clsValue})`);
+  const startTime = entry ? msToSec((browserPerformanceTimeOrigin() || 0) + entry.startTime) : timestampInSeconds();
+  const routeName = getCurrentScope().getScopeData().transactionName;
+  const name = entry ? htmlTreeAsString(entry.sources[0]?.node) : "Layout shift";
+  const attributes = {
+    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.http.browser.cls",
+    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "ui.webvital.cls",
+    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: 0,
+    // attach the pageload span id to the CLS span so that we can link them in the UI
+    "sentry.pageload.span_id": pageloadSpanId,
+    // describes what triggered the web vital to be reported
+    "sentry.report_event": reportEvent
+  };
+  if (entry?.sources) {
+    entry.sources.forEach((source, index) => {
+      attributes[`cls.source.${index + 1}`] = htmlTreeAsString(source.node);
+    });
+  }
+  const span = startStandaloneWebVitalSpan({
+    name,
+    transaction: routeName,
+    attributes,
+    startTime
+  });
+  if (span) {
+    span.addEvent("cls", {
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: "",
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: clsValue
+    });
+    span.end(startTime);
+  }
+}
+
+export { _sendStandaloneClsSpan, trackClsAsStandaloneSpan };
+//# sourceMappingURL=cls.js.map

package/build/esm/metrics/cls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cls.js","sources":["../../../src/metrics/cls.ts"],"sourcesContent":["import type { Client, SpanAttributes } from '@sentry/core';\nimport {\n  browserPerformanceTimeOrigin,\n  debug,\n  getCurrentScope,\n  SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE,\n  SEMANTIC_ATTRIBUTE_SENTRY_OP,\n  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,\n  timestampInSeconds,\n} from '@sentry/core';\nimport { DEBUG_BUILD } from '../debug-build';\nimport { htmlTreeAsString } from '../htmlTreeAsString';\nimport { addClsInstrumentationHandler } from './instrument';\nimport type { WebVitalReportEvent } from './utils';\nimport { listenForWebVitalReportEvents, msToSec, startStandaloneWebVitalSpan, supportsWebVital } from './utils';\n\n/**\n * Starts tracking the Cumulative Layout Shift on the current page and collects the value once\n *\n * - the page visibility is hidden\n * - a navigation span is started (to stop CLS measurement for SPA soft navigations)\n *\n * Once either of these events triggers, the CLS value is sent as a standalone span and we stop\n * measuring CLS.\n */\nexport function trackClsAsStandaloneSpan(client: Client): void {\n  let standaloneCLsValue = 0;\n  let standaloneClsEntry: LayoutShift | undefined;\n\n  if (!supportsWebVital('layout-shift')) {\n    return;\n  }\n\n  const cleanupClsHandler = addClsInstrumentationHandler(({ metric }) => {\n    const entry = metric.entries[metric.entries.length - 1] as LayoutShift | undefined;\n    if (!entry) {\n      return;\n    }\n    standaloneCLsValue = metric.value;\n    standaloneClsEntry = entry;\n  }, true);\n\n  listenForWebVitalReportEvents(client, (reportEvent, pageloadSpanId) => {\n    _sendStandaloneClsSpan(standaloneCLsValue, standaloneClsEntry, pageloadSpanId, reportEvent);\n    cleanupClsHandler();\n  });\n}\n\n/**\n * Exported only for testing!\n */\nexport function _sendStandaloneClsSpan(\n  clsValue: number,\n  entry: LayoutShift | undefined,\n  pageloadSpanId: string,\n  reportEvent: WebVitalReportEvent,\n) {\n  DEBUG_BUILD && debug.log(`Sending CLS span (${clsValue})`);\n\n  const startTime = entry ? msToSec((browserPerformanceTimeOrigin() || 0) + entry.startTime) : timestampInSeconds();\n  const routeName = getCurrentScope().getScopeData().transactionName;\n\n  const name = entry ? htmlTreeAsString(entry.sources[0]?.node) : 'Layout shift';\n\n  const attributes: SpanAttributes = {\n    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.cls',\n    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.webvital.cls',\n    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: 0,\n    // attach the pageload span id to the CLS span so that we can link them in the UI\n    'sentry.pageload.span_id': pageloadSpanId,\n    // describes what triggered the web vital to be reported\n    'sentry.report_event': reportEvent,\n  };\n\n  // Add CLS sources as span attributes to help with debugging layout shifts\n  // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift/sources\n  if (entry?.sources) {\n    entry.sources.forEach((source, index) => {\n      attributes[`cls.source.${index + 1}`] = htmlTreeAsString(source.node);\n    });\n  }\n\n  const span = startStandaloneWebVitalSpan({\n    name,\n    transaction: routeName,\n    attributes,\n    startTime,\n  });\n\n  if (span) {\n    span.addEvent('cls', {\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: '',\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: clsValue,\n    });\n\n    // LayoutShift performance entries always have a duration of 0, so we don't need to add `entry.duration` here\n    // see: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration\n    span.end(startTime);\n  }\n}\n"],"names":[],"mappings":";;;;;;AA2BO,SAAS,yBAAyB,MAAA,EAAsB;AAC7D,EAAA,IAAI,kBAAA,GAAqB,CAAA;AACzB,EAAA,IAAI,kBAAA;AAEJ,EAAA,IAAI,CAAC,gBAAA,CAAiB,cAAc,CAAA,EAAG;AACrC,IAAA;AAAA,EACF;AAEA,EAAA,MAAM,iBAAA,GAAoB,4BAAA,CAA6B,CAAC,EAAE,QAAO,KAAM;AACrE,IAAA,MAAM,QAAQ,MAAA,CAAO,OAAA,CAAQ,MAAA,CAAO,OAAA,CAAQ,SAAS,CAAC,CAAA;AACtD,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA;AAAA,IACF;AACA,IAAA,kBAAA,GAAqB,MAAA,CAAO,KAAA;AAC5B,IAAA,kBAAA,GAAqB,KAAA;AAAA,EACvB,GAAG,IAAI,CAAA;AAEP,EAAA,6BAAA,CAA8B,MAAA,EAAQ,CAAC,WAAA,EAAa,cAAA,KAAmB;AACrE,IAAA,sBAAA,CAAuB,kBAAA,EAAoB,kBAAA,EAAoB,cAAA,EAAgB,WAAW,CAAA;AAC1F,IAAA,iBAAA,EAAkB;AAAA,EACpB,CAAC,CAAA;AACH;AAKO,SAAS,sBAAA,CACd,QAAA,EACA,KAAA,EACA,cAAA,EACA,WAAA,EACA;AACA,EAAA,WAAA,IAAe,KAAA,CAAM,GAAA,CAAI,CAAA,kBAAA,EAAqB,QAAQ,CAAA,CAAA,CAAG,CAAA;AAEzD,EAAA,MAAM,SAAA,GAAY,QAAQ,OAAA,CAAA,CAAS,4BAAA,MAAkC,CAAA,IAAK,KAAA,CAAM,SAAS,CAAA,GAAI,kBAAA,EAAmB;AAChH,EAAA,MAAM,SAAA,GAAY,eAAA,EAAgB,CAAE,YAAA,EAAa,CAAE,eAAA;AAEnD,EAAA,MAAM,IAAA,GAAO,QAAQ,gBAAA,CAAiB,KAAA,CAAM,QAAQ,CAAC,CAAA,EAAG,IAAI,CAAA,GAAI,cAAA;AAEhE,EAAA,MAAM,UAAA,GAA6B;AAAA,IACjC,CAAC,gCAAgC,GAAG,uBAAA;AAAA,IACpC,CAAC,4BAA4B,GAAG,iBAAA;AAAA,IAChC,CAAC,iCAAiC,GAAG,CAAA;AAAA;AAAA,IAErC,yBAAA,EAA2B,cAAA;AAAA;AAAA,IAE3B,qBAAA,EAAuB;AAAA,GACzB;AAIA,EAAA,IAAI,OAAO,OAAA,EAAS;AAClB,IAAA,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,CAAC,MAAA,EAAQ,KAAA,KAAU;AACvC,MAAA,UAAA,CAAW,cAAc,KAAA,GAAQ,CAAC,EAAE,CAAA,GAAI,gBAAA,CAAiB,OAAO,IAAI,CAAA;AAAA,IACtE,CAAC,CAAA;AAAA,EACH;AAEA,EAAA,MAAM,OAAO,2BAAA,CAA4B;AAAA,IACvC,IAAA;AAAA,IACA,WAAA,EAAa,SAAA;AAAA,IACb,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,IAAA,CAAK,SAAS,KAAA,EAAO;AAAA,MACnB,CAAC,0CAA0C,GAAG,EAAA;AAAA,MAC9C,CAAC,2CAA2C,GAAG;AAAA,KAChD,CAAA;AAID,IAAA,IAAA,CAAK,IAAI,SAAS,CAAA;AAAA,EACpB;AACF;;;;"}

package/build/esm/metrics/elementTiming.js

@@ -0,0 +1,69 @@
+import { defineIntegration, browserPerformanceTimeOrigin, metrics } from '@sentry/core';
+import { addPerformanceInstrumentationHandler } from './instrument.js';
+import { getBrowserPerformanceAPI } from './utils.js';
+
+const INTEGRATION_NAME = "ElementTiming";
+const _elementTimingIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    setup() {
+      const performance = getBrowserPerformanceAPI();
+      if (!performance || !browserPerformanceTimeOrigin()) {
+        return;
+      }
+      addPerformanceInstrumentationHandler("element", ({ entries }) => {
+        for (const entry of entries) {
+          const elementEntry = entry;
+          if (!elementEntry.identifier) {
+            continue;
+          }
+          const identifier = elementEntry.identifier;
+          const paintType = elementEntry.name;
+          const renderTime = elementEntry.renderTime;
+          const loadTime = elementEntry.loadTime;
+          const metricAttributes = {
+            "sentry.origin": "auto.ui.browser.element_timing",
+            "ui.element.identifier": identifier
+          };
+          if (paintType) {
+            metricAttributes["ui.element.paint_type"] = paintType;
+          }
+          if (elementEntry.id) {
+            metricAttributes["ui.element.id"] = elementEntry.id;
+          }
+          if (elementEntry.element) {
+            metricAttributes["ui.element.type"] = elementEntry.element.tagName.toLowerCase();
+          }
+          if (elementEntry.url) {
+            metricAttributes["ui.element.url"] = elementEntry.url;
+          }
+          if (elementEntry.naturalWidth) {
+            metricAttributes["ui.element.width"] = elementEntry.naturalWidth;
+          }
+          if (elementEntry.naturalHeight) {
+            metricAttributes["ui.element.height"] = elementEntry.naturalHeight;
+          }
+          if (renderTime > 0) {
+            metrics.distribution(`ui.element.render_time`, renderTime, {
+              unit: "millisecond",
+              attributes: metricAttributes
+            });
+          }
+          if (loadTime > 0) {
+            metrics.distribution(`ui.element.load_time`, loadTime, {
+              unit: "millisecond",
+              attributes: metricAttributes
+            });
+          }
+        }
+      });
+    }
+  };
+});
+const elementTimingIntegration = defineIntegration(_elementTimingIntegration);
+function startTrackingElementTiming() {
+  return () => void 0;
+}
+
+export { elementTimingIntegration, startTrackingElementTiming };
+//# sourceMappingURL=elementTiming.js.map

package/build/esm/metrics/elementTiming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementTiming.js","sources":["../../../src/metrics/elementTiming.ts"],"sourcesContent":["import type { IntegrationFn } from '@sentry/core';\nimport { browserPerformanceTimeOrigin, defineIntegration, metrics } from '@sentry/core';\nimport { addPerformanceInstrumentationHandler } from './instrument';\nimport { getBrowserPerformanceAPI } from './utils';\n\n// ElementTiming interface based on the W3C spec\ninterface PerformanceElementTiming extends PerformanceEntry {\n  renderTime: number;\n  loadTime: number;\n  intersectionRect: DOMRectReadOnly;\n  identifier: string;\n  naturalWidth: number;\n  naturalHeight: number;\n  id: string;\n  element: Element | null;\n  url?: string;\n}\n\nconst INTEGRATION_NAME = 'ElementTiming';\n\nconst _elementTimingIntegration = (() => {\n  return {\n    name: INTEGRATION_NAME,\n    setup() {\n      const performance = getBrowserPerformanceAPI();\n      if (!performance || !browserPerformanceTimeOrigin()) {\n        return;\n      }\n\n      addPerformanceInstrumentationHandler('element', ({ entries }) => {\n        for (const entry of entries) {\n          const elementEntry = entry as PerformanceElementTiming;\n\n          if (!elementEntry.identifier) {\n            continue;\n          }\n\n          const identifier = elementEntry.identifier;\n          const paintType = elementEntry.name as 'image-paint' | 'text-paint' | undefined;\n          const renderTime = elementEntry.renderTime;\n          const loadTime = elementEntry.loadTime;\n\n          const metricAttributes: Record<string, string | number> = {\n            'sentry.origin': 'auto.ui.browser.element_timing',\n            'ui.element.identifier': identifier,\n          };\n\n          if (paintType) {\n            metricAttributes['ui.element.paint_type'] = paintType;\n          }\n\n          if (elementEntry.id) {\n            metricAttributes['ui.element.id'] = elementEntry.id;\n          }\n\n          if (elementEntry.element) {\n            metricAttributes['ui.element.type'] = elementEntry.element.tagName.toLowerCase();\n          }\n\n          if (elementEntry.url) {\n            metricAttributes['ui.element.url'] = elementEntry.url;\n          }\n\n          if (elementEntry.naturalWidth) {\n            metricAttributes['ui.element.width'] = elementEntry.naturalWidth;\n          }\n\n          if (elementEntry.naturalHeight) {\n            metricAttributes['ui.element.height'] = elementEntry.naturalHeight;\n          }\n\n          if (renderTime > 0) {\n            metrics.distribution(`ui.element.render_time`, renderTime, {\n              unit: 'millisecond',\n              attributes: metricAttributes,\n            });\n          }\n\n          if (loadTime > 0) {\n            metrics.distribution(`ui.element.load_time`, loadTime, {\n              unit: 'millisecond',\n              attributes: metricAttributes,\n            });\n          }\n        }\n      });\n    },\n  };\n}) satisfies IntegrationFn;\n\n/**\n * Captures [Element Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming)\n * data as Sentry metrics.\n *\n * To mark an element for tracking, add the `elementtiming` HTML attribute:\n * ```html\n * <img src=\"hero.jpg\" elementtiming=\"hero-image\" />\n * <p elementtiming=\"hero-text\">Welcome!</p>\n * ```\n *\n * This emits `ui.element.render_time` and `ui.element.load_time` (for images)\n * as distribution metrics, tagged with the element's identifier and paint type.\n */\nexport const elementTimingIntegration = defineIntegration(_elementTimingIntegration);\n\n/**\n * @deprecated Use `elementTimingIntegration` instead. This function is a no-op and will be removed in a future version.\n */\nexport function startTrackingElementTiming(): () => void {\n  return () => undefined;\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,gBAAA,GAAmB,eAAA;AAEzB,MAAM,6BAA6B,MAAM;AACvC,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,gBAAA;AAAA,IACN,KAAA,GAAQ;AACN,MAAA,MAAM,cAAc,wBAAA,EAAyB;AAC7C,MAAA,IAAI,CAAC,WAAA,IAAe,CAAC,4BAAA,EAA6B,EAAG;AACnD,QAAA;AAAA,MACF;AAEA,MAAA,oCAAA,CAAqC,SAAA,EAAW,CAAC,EAAE,OAAA,EAAQ,KAAM;AAC/D,QAAA,KAAA,MAAW,SAAS,OAAA,EAAS;AAC3B,UAAA,MAAM,YAAA,GAAe,KAAA;AAErB,UAAA,IAAI,CAAC,aAAa,UAAA,EAAY;AAC5B,YAAA;AAAA,UACF;AAEA,UAAA,MAAM,aAAa,YAAA,CAAa,UAAA;AAChC,UAAA,MAAM,YAAY,YAAA,CAAa,IAAA;AAC/B,UAAA,MAAM,aAAa,YAAA,CAAa,UAAA;AAChC,UAAA,MAAM,WAAW,YAAA,CAAa,QAAA;AAE9B,UAAA,MAAM,gBAAA,GAAoD;AAAA,YACxD,eAAA,EAAiB,gCAAA;AAAA,YACjB,uBAAA,EAAyB;AAAA,WAC3B;AAEA,UAAA,IAAI,SAAA,EAAW;AACb,YAAA,gBAAA,CAAiB,uBAAuB,CAAA,GAAI,SAAA;AAAA,UAC9C;AAEA,UAAA,IAAI,aAAa,EAAA,EAAI;AACnB,YAAA,gBAAA,CAAiB,eAAe,IAAI,YAAA,CAAa,EAAA;AAAA,UACnD;AAEA,UAAA,IAAI,aAAa,OAAA,EAAS;AACxB,YAAA,gBAAA,CAAiB,iBAAiB,CAAA,GAAI,YAAA,CAAa,OAAA,CAAQ,QAAQ,WAAA,EAAY;AAAA,UACjF;AAEA,UAAA,IAAI,aAAa,GAAA,EAAK;AACpB,YAAA,gBAAA,CAAiB,gBAAgB,IAAI,YAAA,CAAa,GAAA;AAAA,UACpD;AAEA,UAAA,IAAI,aAAa,YAAA,EAAc;AAC7B,YAAA,gBAAA,CAAiB,kBAAkB,IAAI,YAAA,CAAa,YAAA;AAAA,UACtD;AAEA,UAAA,IAAI,aAAa,aAAA,EAAe;AAC9B,YAAA,gBAAA,CAAiB,mBAAmB,IAAI,YAAA,CAAa,aAAA;AAAA,UACvD;AAEA,UAAA,IAAI,aAAa,CAAA,EAAG;AAClB,YAAA,OAAA,CAAQ,YAAA,CAAa,0BAA0B,UAAA,EAAY;AAAA,cACzD,IAAA,EAAM,aAAA;AAAA,cACN,UAAA,EAAY;AAAA,aACb,CAAA;AAAA,UACH;AAEA,UAAA,IAAI,WAAW,CAAA,EAAG;AAChB,YAAA,OAAA,CAAQ,YAAA,CAAa,wBAAwB,QAAA,EAAU;AAAA,cACrD,IAAA,EAAM,aAAA;AAAA,cACN,UAAA,EAAY;AAAA,aACb,CAAA;AAAA,UACH;AAAA,QACF;AAAA,MACF,CAAC,CAAA;AAAA,IACH;AAAA,GACF;AACF,CAAA,CAAA;AAeO,MAAM,wBAAA,GAA2B,kBAAkB,yBAAyB;AAK5E,SAAS,0BAAA,GAAyC;AACvD,EAAA,OAAO,MAAM,MAAA;AACf;;;;"}

package/build/esm/metrics/inp.js

@@ -0,0 +1,162 @@
+import { isBrowser, browserPerformanceTimeOrigin, getActiveSpan, getRootSpan, spanToJSON, getCurrentScope, SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
+import { htmlTreeAsString } from '../htmlTreeAsString.js';
+import { WINDOW } from '../types.js';
+import { addPerformanceInstrumentationHandler, addInpInstrumentationHandler, isPerformanceEventTiming } from './instrument.js';
+import { getBrowserPerformanceAPI, msToSec, startStandaloneWebVitalSpan } from './utils.js';
+
+const LAST_INTERACTIONS = [];
+const INTERACTIONS_SPAN_MAP = /* @__PURE__ */ new Map();
+const ELEMENT_NAME_TIMESTAMP_MAP = /* @__PURE__ */ new Map();
+const MAX_PLAUSIBLE_INP_DURATION = 60;
+function startTrackingINP() {
+  const performance = getBrowserPerformanceAPI();
+  if (performance && browserPerformanceTimeOrigin()) {
+    const inpCallback = _trackINP();
+    return () => {
+      inpCallback();
+    };
+  }
+  return () => void 0;
+}
+const INP_ENTRY_MAP = {
+  click: "click",
+  pointerdown: "click",
+  pointerup: "click",
+  mousedown: "click",
+  mouseup: "click",
+  touchstart: "click",
+  touchend: "click",
+  mouseover: "hover",
+  mouseout: "hover",
+  mouseenter: "hover",
+  mouseleave: "hover",
+  pointerover: "hover",
+  pointerout: "hover",
+  pointerenter: "hover",
+  pointerleave: "hover",
+  dragstart: "drag",
+  dragend: "drag",
+  drag: "drag",
+  dragenter: "drag",
+  dragleave: "drag",
+  dragover: "drag",
+  drop: "drag",
+  keydown: "press",
+  keyup: "press",
+  keypress: "press",
+  input: "press"
+};
+function _trackINP() {
+  return addInpInstrumentationHandler(_onInp);
+}
+const _onInp = ({ metric }) => {
+  if (metric.value == void 0) {
+    return;
+  }
+  const duration = msToSec(metric.value);
+  if (duration > MAX_PLAUSIBLE_INP_DURATION) {
+    return;
+  }
+  const entry = metric.entries.find((entry2) => entry2.duration === metric.value && INP_ENTRY_MAP[entry2.name]);
+  if (!entry) {
+    return;
+  }
+  const { interactionId } = entry;
+  const interactionType = INP_ENTRY_MAP[entry.name];
+  const startTime = msToSec(browserPerformanceTimeOrigin() + entry.startTime);
+  const activeSpan = getActiveSpan();
+  const rootSpan = activeSpan ? getRootSpan(activeSpan) : void 0;
+  const cachedInteractionContext = interactionId != null ? INTERACTIONS_SPAN_MAP.get(interactionId) : void 0;
+  const spanToUse = cachedInteractionContext?.span || rootSpan;
+  const routeName = spanToUse ? spanToJSON(spanToUse).description : getCurrentScope().getScopeData().transactionName;
+  const name = cachedInteractionContext?.elementName || htmlTreeAsString(entry.target);
+  const attributes = {
+    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.http.browser.inp",
+    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: `ui.interaction.${interactionType}`,
+    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry.duration
+  };
+  const span = startStandaloneWebVitalSpan({
+    name,
+    transaction: routeName,
+    attributes,
+    startTime
+  });
+  if (span) {
+    span.addEvent("inp", {
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: "millisecond",
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: metric.value
+    });
+    span.end(startTime + duration);
+  }
+};
+function getCachedInteractionContext(interactionId) {
+  return interactionId != null ? INTERACTIONS_SPAN_MAP.get(interactionId) : void 0;
+}
+function registerInpInteractionListener() {
+  const interactionEvents = Object.keys(INP_ENTRY_MAP);
+  if (isBrowser()) {
+    interactionEvents.forEach((eventType) => {
+      WINDOW.addEventListener(eventType, captureElementFromEvent, { capture: true, passive: true });
+    });
+  }
+  function captureElementFromEvent(event) {
+    const target = event.target;
+    if (!target) {
+      return;
+    }
+    const elementName = htmlTreeAsString(target);
+    const timestamp = Math.round(event.timeStamp);
+    ELEMENT_NAME_TIMESTAMP_MAP.set(timestamp, elementName);
+    if (ELEMENT_NAME_TIMESTAMP_MAP.size > 50) {
+      const firstKey = ELEMENT_NAME_TIMESTAMP_MAP.keys().next().value;
+      if (firstKey !== void 0) {
+        ELEMENT_NAME_TIMESTAMP_MAP.delete(firstKey);
+      }
+    }
+  }
+  function resolveElementNameFromEntry(entry) {
+    const timestamp = Math.round(entry.startTime);
+    let elementName = ELEMENT_NAME_TIMESTAMP_MAP.get(timestamp);
+    if (!elementName) {
+      for (let offset = -5; offset <= 5; offset++) {
+        const nearbyName = ELEMENT_NAME_TIMESTAMP_MAP.get(timestamp + offset);
+        if (nearbyName) {
+          elementName = nearbyName;
+          break;
+        }
+      }
+    }
+    return elementName || "<unknown>";
+  }
+  const handleEntries = ({ entries }) => {
+    const activeSpan = getActiveSpan();
+    const activeRootSpan = activeSpan && getRootSpan(activeSpan);
+    entries.forEach((entry) => {
+      if (!isPerformanceEventTiming(entry)) {
+        return;
+      }
+      const interactionId = entry.interactionId;
+      if (interactionId == null) {
+        return;
+      }
+      if (INTERACTIONS_SPAN_MAP.has(interactionId)) {
+        return;
+      }
+      const elementName = entry.target ? htmlTreeAsString(entry.target) : resolveElementNameFromEntry(entry);
+      if (LAST_INTERACTIONS.length > 10) {
+        const last = LAST_INTERACTIONS.shift();
+        INTERACTIONS_SPAN_MAP.delete(last);
+      }
+      LAST_INTERACTIONS.push(interactionId);
+      INTERACTIONS_SPAN_MAP.set(interactionId, {
+        span: activeRootSpan,
+        elementName
+      });
+    });
+  };
+  addPerformanceInstrumentationHandler("event", handleEntries);
+  addPerformanceInstrumentationHandler("first-input", handleEntries);
+}
+
+export { INP_ENTRY_MAP, MAX_PLAUSIBLE_INP_DURATION, _onInp, _trackINP, getCachedInteractionContext, registerInpInteractionListener, startTrackingINP };
+//# sourceMappingURL=inp.js.map

package/build/esm/metrics/inp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inp.js","sources":["../../../src/metrics/inp.ts"],"sourcesContent":["import type { Span, SpanAttributes } from '@sentry/core';\nimport {\n  browserPerformanceTimeOrigin,\n  getActiveSpan,\n  getCurrentScope,\n  getRootSpan,\n  isBrowser,\n  SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE,\n  SEMANTIC_ATTRIBUTE_SENTRY_OP,\n  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,\n  spanToJSON,\n} from '@sentry/core';\nimport { htmlTreeAsString } from '../htmlTreeAsString';\nimport { WINDOW } from '../types';\nimport type { InstrumentationHandlerCallback } from './instrument';\nimport {\n  addInpInstrumentationHandler,\n  addPerformanceInstrumentationHandler,\n  isPerformanceEventTiming,\n} from './instrument';\nimport { getBrowserPerformanceAPI, msToSec, startStandaloneWebVitalSpan } from './utils';\n\ninterface InteractionContext {\n  span: Span | undefined;\n  elementName: string;\n}\n\nconst LAST_INTERACTIONS: number[] = [];\nconst INTERACTIONS_SPAN_MAP = new Map<number, InteractionContext>();\n\n// Map to store element names by timestamp, since we get the DOM event before the PerformanceObserver entry\nconst ELEMENT_NAME_TIMESTAMP_MAP = new Map<number, string>();\n\n/**\n * 60 seconds is the maximum for a plausible INP value\n * (source: Me)\n */\nexport const MAX_PLAUSIBLE_INP_DURATION = 60;\n/**\n * Start tracking INP webvital events.\n */\nexport function startTrackingINP(): () => void {\n  const performance = getBrowserPerformanceAPI();\n  if (performance && browserPerformanceTimeOrigin()) {\n    const inpCallback = _trackINP();\n\n    return (): void => {\n      inpCallback();\n    };\n  }\n\n  return () => undefined;\n}\n\nexport const INP_ENTRY_MAP: Record<string, 'click' | 'hover' | 'drag' | 'press'> = {\n  click: 'click',\n  pointerdown: 'click',\n  pointerup: 'click',\n  mousedown: 'click',\n  mouseup: 'click',\n  touchstart: 'click',\n  touchend: 'click',\n  mouseover: 'hover',\n  mouseout: 'hover',\n  mouseenter: 'hover',\n  mouseleave: 'hover',\n  pointerover: 'hover',\n  pointerout: 'hover',\n  pointerenter: 'hover',\n  pointerleave: 'hover',\n  dragstart: 'drag',\n  dragend: 'drag',\n  drag: 'drag',\n  dragenter: 'drag',\n  dragleave: 'drag',\n  dragover: 'drag',\n  drop: 'drag',\n  keydown: 'press',\n  keyup: 'press',\n  keypress: 'press',\n  input: 'press',\n};\n\n/** Starts tracking the Interaction to Next Paint on the current page. #\n * exported only for testing\n */\nexport function _trackINP(): () => void {\n  return addInpInstrumentationHandler(_onInp);\n}\n\n/**\n * exported only for testing\n */\nexport const _onInp: InstrumentationHandlerCallback = ({ metric }) => {\n  if (metric.value == undefined) {\n    return;\n  }\n\n  const duration = msToSec(metric.value);\n\n  // We received occasional reports of hour-long INP values.\n  // Therefore, we add a sanity check to avoid creating spans for\n  // unrealistically long INP durations.\n  if (duration > MAX_PLAUSIBLE_INP_DURATION) {\n    return;\n  }\n\n  const entry = metric.entries.find(entry => entry.duration === metric.value && INP_ENTRY_MAP[entry.name]);\n\n  if (!entry) {\n    return;\n  }\n\n  const { interactionId } = entry;\n  const interactionType = INP_ENTRY_MAP[entry.name];\n\n  /** Build the INP span, create an envelope from the span, and then send the envelope */\n  const startTime = msToSec((browserPerformanceTimeOrigin() as number) + entry.startTime);\n  const activeSpan = getActiveSpan();\n  const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;\n\n  // We first try to lookup the interaction context from our INTERACTIONS_SPAN_MAP,\n  // where we cache the route and element name per interactionId\n  const cachedInteractionContext = interactionId != null ? INTERACTIONS_SPAN_MAP.get(interactionId) : undefined;\n\n  const spanToUse = cachedInteractionContext?.span || rootSpan;\n\n  // Else, we try to use the active span.\n  // Finally, we fall back to look at the transactionName on the scope\n  const routeName = spanToUse ? spanToJSON(spanToUse).description : getCurrentScope().getScopeData().transactionName;\n\n  const name = cachedInteractionContext?.elementName || htmlTreeAsString(entry.target);\n  const attributes: SpanAttributes = {\n    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.inp',\n    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: `ui.interaction.${interactionType}`,\n    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry.duration,\n  };\n\n  const span = startStandaloneWebVitalSpan({\n    name,\n    transaction: routeName,\n    attributes,\n    startTime,\n  });\n\n  if (span) {\n    span.addEvent('inp', {\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: 'millisecond',\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: metric.value,\n    });\n\n    span.end(startTime + duration);\n  }\n};\n\n/**\n * Look up a cached interaction context (element name + root span) by interactionId.\n * Returns undefined if no context was cached for this interaction.\n */\nexport function getCachedInteractionContext(interactionId: number | undefined): InteractionContext | undefined {\n  return interactionId != null ? INTERACTIONS_SPAN_MAP.get(interactionId) : undefined;\n}\n\n/**\n * Register a listener to cache route information for INP interactions.\n */\nexport function registerInpInteractionListener(): void {\n  // Listen for all interaction events that could contribute to INP\n  const interactionEvents = Object.keys(INP_ENTRY_MAP);\n  if (isBrowser()) {\n    interactionEvents.forEach(eventType => {\n      WINDOW.addEventListener(eventType, captureElementFromEvent, { capture: true, passive: true });\n    });\n  }\n\n  /**\n   * Captures the element name from a DOM event and stores it in the ELEMENT_NAME_TIMESTAMP_MAP.\n   */\n  function captureElementFromEvent(event: Event): void {\n    const target = event.target as HTMLElement | null;\n    if (!target) {\n      return;\n    }\n\n    const elementName = htmlTreeAsString(target);\n    const timestamp = Math.round(event.timeStamp);\n\n    // Store the element name by timestamp so we can match it with the PerformanceEntry\n    ELEMENT_NAME_TIMESTAMP_MAP.set(timestamp, elementName);\n\n    // Clean up old\n    if (ELEMENT_NAME_TIMESTAMP_MAP.size > 50) {\n      const firstKey = ELEMENT_NAME_TIMESTAMP_MAP.keys().next().value;\n      if (firstKey !== undefined) {\n        ELEMENT_NAME_TIMESTAMP_MAP.delete(firstKey);\n      }\n    }\n  }\n\n  /**\n   * Tries to get the element name from the timestamp map.\n   */\n  function resolveElementNameFromEntry(entry: PerformanceEntry): string {\n    const timestamp = Math.round(entry.startTime);\n    let elementName = ELEMENT_NAME_TIMESTAMP_MAP.get(timestamp);\n\n    // try nearby timestamps (±5ms)\n    if (!elementName) {\n      for (let offset = -5; offset <= 5; offset++) {\n        const nearbyName = ELEMENT_NAME_TIMESTAMP_MAP.get(timestamp + offset);\n        if (nearbyName) {\n          elementName = nearbyName;\n          break;\n        }\n      }\n    }\n\n    return elementName || '<unknown>';\n  }\n\n  const handleEntries = ({ entries }: { entries: PerformanceEntry[] }): void => {\n    const activeSpan = getActiveSpan();\n    const activeRootSpan = activeSpan && getRootSpan(activeSpan);\n\n    entries.forEach(entry => {\n      if (!isPerformanceEventTiming(entry)) {\n        return;\n      }\n\n      const interactionId = entry.interactionId;\n      if (interactionId == null) {\n        return;\n      }\n\n      // If the interaction was already recorded before, nothing more to do\n      if (INTERACTIONS_SPAN_MAP.has(interactionId)) {\n        return;\n      }\n\n      const elementName = entry.target ? htmlTreeAsString(entry.target) : resolveElementNameFromEntry(entry);\n\n      // We keep max. 10 interactions in the list, then remove the oldest one & clean up\n      if (LAST_INTERACTIONS.length > 10) {\n        const last = LAST_INTERACTIONS.shift() as number;\n        INTERACTIONS_SPAN_MAP.delete(last);\n      }\n\n      // We add the interaction to the list of recorded interactions\n      // and store both the span and element name for this interaction\n      LAST_INTERACTIONS.push(interactionId);\n      INTERACTIONS_SPAN_MAP.set(interactionId, {\n        span: activeRootSpan,\n        elementName,\n      });\n    });\n  };\n\n  addPerformanceInstrumentationHandler('event', handleEntries);\n  addPerformanceInstrumentationHandler('first-input', handleEntries);\n}\n"],"names":["entry"],"mappings":"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"}

package/build/esm/metrics/instrument.js

@@ -0,0 +1,145 @@
+import { debug, getFunctionName } from '@sentry/core';
+import { DEBUG_BUILD } from '../debug-build.js';
+import { onCLS } from './web-vitals/getCLS.js';
+import { onINP } from './web-vitals/getINP.js';
+import { onLCP } from './web-vitals/getLCP.js';
+import { observe } from './web-vitals/lib/observe.js';
+import { onTTFB } from './web-vitals/onTTFB.js';
+
+const handlers = {};
+const instrumented = {};
+let _previousCls;
+let _previousLcp;
+let _previousTtfb;
+let _previousInp;
+function addClsInstrumentationHandler(callback, stopOnCallback = false) {
+  return addMetricObserver("cls", callback, instrumentCls, _previousCls, stopOnCallback);
+}
+function addLcpInstrumentationHandler(callback, stopOnCallback = false) {
+  return addMetricObserver("lcp", callback, instrumentLcp, _previousLcp, stopOnCallback);
+}
+function addTtfbInstrumentationHandler(callback) {
+  return addMetricObserver("ttfb", callback, instrumentTtfb, _previousTtfb);
+}
+function addInpInstrumentationHandler(callback) {
+  return addMetricObserver("inp", callback, instrumentInp, _previousInp);
+}
+function addPerformanceInstrumentationHandler(type, callback) {
+  addHandler(type, callback);
+  if (!instrumented[type]) {
+    instrumentPerformanceObserver(type);
+    instrumented[type] = true;
+  }
+  return getCleanupCallback(type, callback);
+}
+function triggerHandlers(type, data) {
+  const typeHandlers = handlers[type];
+  if (!typeHandlers?.length) {
+    return;
+  }
+  for (const handler of typeHandlers) {
+    try {
+      handler(data);
+    } catch (e) {
+      DEBUG_BUILD && debug.error(
+        `Error while triggering instrumentation handler.
+Type: ${type}
+Name: ${getFunctionName(handler)}
+Error:`,
+        e
+      );
+    }
+  }
+}
+function instrumentCls() {
+  return onCLS(
+    (metric) => {
+      triggerHandlers("cls", {
+        metric
+      });
+      _previousCls = metric;
+    },
+    // We want the callback to be called whenever the CLS value updates.
+    // By default, the callback is only called when the tab goes to the background.
+    { reportAllChanges: true }
+  );
+}
+function instrumentLcp() {
+  return onLCP(
+    (metric) => {
+      triggerHandlers("lcp", {
+        metric
+      });
+      _previousLcp = metric;
+    },
+    // We want the callback to be called whenever the LCP value updates.
+    // By default, the callback is only called when the tab goes to the background.
+    { reportAllChanges: true }
+  );
+}
+function instrumentTtfb() {
+  return onTTFB((metric) => {
+    triggerHandlers("ttfb", {
+      metric
+    });
+    _previousTtfb = metric;
+  });
+}
+function instrumentInp() {
+  return onINP((metric) => {
+    triggerHandlers("inp", {
+      metric
+    });
+    _previousInp = metric;
+  });
+}
+function addMetricObserver(type, callback, instrumentFn, previousValue, stopOnCallback = false) {
+  addHandler(type, callback);
+  let stopListening;
+  if (!instrumented[type]) {
+    stopListening = instrumentFn();
+    instrumented[type] = true;
+  }
+  if (previousValue) {
+    callback({ metric: previousValue });
+  }
+  return getCleanupCallback(type, callback, stopOnCallback ? stopListening : void 0);
+}
+function instrumentPerformanceObserver(type) {
+  const options = {};
+  if (type === "event") {
+    options.durationThreshold = 0;
+  }
+  observe(
+    type,
+    (entries) => {
+      triggerHandlers(type, { entries });
+    },
+    options
+  );
+}
+function addHandler(type, handler) {
+  handlers[type] = handlers[type] || [];
+  handlers[type].push(handler);
+}
+function getCleanupCallback(type, callback, stopListening) {
+  return () => {
+    if (stopListening) {
+      stopListening();
+    }
+    const typeHandlers = handlers[type];
+    if (!typeHandlers) {
+      return;
+    }
+    const index = typeHandlers.indexOf(callback);
+    if (index !== -1) {
+      typeHandlers.splice(index, 1);
+    }
+  };
+}
+function isPerformanceEventTiming(entry) {
+  return "duration" in entry;
+}
+
+export { addClsInstrumentationHandler, addInpInstrumentationHandler, addLcpInstrumentationHandler, addPerformanceInstrumentationHandler, addTtfbInstrumentationHandler, isPerformanceEventTiming };
+//# sourceMappingURL=instrument.js.map

package/build/esm/metrics/instrument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instrument.js","sources":["../../../src/metrics/instrument.ts"],"sourcesContent":["import { debug, getFunctionName } from '@sentry/core';\nimport { DEBUG_BUILD } from '../debug-build';\nimport { onCLS } from './web-vitals/getCLS';\nimport { onINP } from './web-vitals/getINP';\nimport { onLCP } from './web-vitals/getLCP';\nimport { observe } from './web-vitals/lib/observe';\nimport { onTTFB } from './web-vitals/onTTFB';\n\ntype InstrumentHandlerTypePerformanceObserver =\n  | 'longtask'\n  | 'event'\n  | 'navigation'\n  | 'paint'\n  | 'resource'\n  | 'element'\n  // fist-input is still needed for INP\n  | 'first-input';\n\ntype InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'ttfb' | 'inp';\n\n// We provide this here manually instead of relying on a global, as this is not available in non-browser environements\n// And we do not want to expose such types\ninterface PerformanceEntry {\n  readonly duration: number;\n  readonly entryType: string;\n  readonly name: string;\n  readonly startTime: number;\n  toJSON(): Record<string, unknown>;\n}\nexport interface PerformanceEventTiming extends PerformanceEntry {\n  processingStart: number;\n  processingEnd: number;\n  duration: number;\n  cancelable?: boolean;\n  target?: unknown | null;\n  interactionId?: number;\n}\n\ninterface PerformanceScriptTiming extends PerformanceEntry {\n  sourceURL: string;\n  sourceFunctionName: string;\n  sourceCharPosition: number;\n  invoker: string;\n  invokerType: string;\n}\nexport interface PerformanceLongAnimationFrameTiming extends PerformanceEntry {\n  scripts: PerformanceScriptTiming[];\n}\n\ninterface Metric {\n  /**\n   * The name of the metric (in acronym form).\n   */\n  name: 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB';\n\n  /**\n   * The current value of the metric.\n   */\n  value: number;\n\n  /**\n   * The rating as to whether the metric value is within the \"good\",\n   * \"needs improvement\", or \"poor\" thresholds of the metric.\n   */\n  rating: 'good' | 'needs-improvement' | 'poor';\n\n  /**\n   * The delta between the current value and the last-reported value.\n   * On the first report, `delta` and `value` will always be the same.\n   */\n  delta: number;\n\n  /**\n   * A unique ID representing this particular metric instance. This ID can\n   * be used by an analytics tool to dedupe multiple values sent for the same\n   * metric instance, or to group multiple deltas together and calculate a\n   * total. It can also be used to differentiate multiple different metric\n   * instances sent from the same page, which can happen if the page is\n   * restored from the back/forward cache (in that case new metrics object\n   * get created).\n   */\n  id: string;\n\n  /**\n   * Any performance entries relevant to the metric value calculation.\n   * The array may also be empty if the metric value was not based on any\n   * entries (e.g. a CLS value of 0 given no layout shifts).\n   */\n  entries: PerformanceEntry[];\n\n  /**\n   * The type of navigation\n   *\n   * Navigation Timing API (or `undefined` if the browser doesn't\n   * support that API). For pages that are restored from the bfcache, this\n   * value will be 'back-forward-cache'.\n   */\n  navigationType: 'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore';\n}\n\ntype InstrumentHandlerType = InstrumentHandlerTypeMetric | InstrumentHandlerTypePerformanceObserver;\n\ntype StopListening = undefined | void | (() => void);\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype InstrumentHandlerCallback = (data: any) => void;\n\ntype CleanupHandlerCallback = () => void;\n\nconst handlers: { [key in InstrumentHandlerType]?: InstrumentHandlerCallback[] } = {};\nconst instrumented: { [key in InstrumentHandlerType]?: boolean } = {};\n\nlet _previousCls: Metric | undefined;\nlet _previousLcp: Metric | undefined;\nlet _previousTtfb: Metric | undefined;\nlet _previousInp: Metric | undefined;\n\n/**\n * Add a callback that will be triggered when a CLS metric is available.\n * Returns a cleanup callback which can be called to remove the instrumentation handler.\n *\n * Pass `stopOnCallback = true` to stop listening for CLS when the cleanup callback is called.\n * This will lead to the CLS being finalized and frozen.\n */\nexport function addClsInstrumentationHandler(\n  callback: (data: { metric: Metric }) => void,\n  stopOnCallback = false,\n): CleanupHandlerCallback {\n  return addMetricObserver('cls', callback, instrumentCls, _previousCls, stopOnCallback);\n}\n\n/**\n * Add a callback that will be triggered when a LCP metric is available.\n * Returns a cleanup callback which can be called to remove the instrumentation handler.\n *\n * Pass `stopOnCallback = true` to stop listening for LCP when the cleanup callback is called.\n * This will lead to the LCP being finalized and frozen.\n */\nexport function addLcpInstrumentationHandler(\n  callback: (data: { metric: Metric }) => void,\n  stopOnCallback = false,\n): CleanupHandlerCallback {\n  return addMetricObserver('lcp', callback, instrumentLcp, _previousLcp, stopOnCallback);\n}\n\n/**\n * Add a callback that will be triggered when a TTFD metric is available.\n */\nexport function addTtfbInstrumentationHandler(callback: (data: { metric: Metric }) => void): CleanupHandlerCallback {\n  return addMetricObserver('ttfb', callback, instrumentTtfb, _previousTtfb);\n}\n\nexport type InstrumentationHandlerCallback = (data: {\n  metric: Omit<Metric, 'entries'> & {\n    entries: PerformanceEventTiming[];\n  };\n}) => void;\n\n/**\n * Add a callback that will be triggered when a INP metric is available.\n * Returns a cleanup callback which can be called to remove the instrumentation handler.\n */\nexport function addInpInstrumentationHandler(callback: InstrumentationHandlerCallback): CleanupHandlerCallback {\n  return addMetricObserver('inp', callback, instrumentInp, _previousInp);\n}\n\nexport function addPerformanceInstrumentationHandler(\n  type: 'event',\n  callback: (data: { entries: ((PerformanceEntry & { target?: unknown | null }) | PerformanceEventTiming)[] }) => void,\n): CleanupHandlerCallback;\nexport function addPerformanceInstrumentationHandler(\n  type: InstrumentHandlerTypePerformanceObserver,\n  callback: (data: { entries: PerformanceEntry[] }) => void,\n): CleanupHandlerCallback;\n\n/**\n * Add a callback that will be triggered when a performance observer is triggered,\n * and receives the entries of the observer.\n * Returns a cleanup callback which can be called to remove the instrumentation handler.\n */\nexport function addPerformanceInstrumentationHandler(\n  type: InstrumentHandlerTypePerformanceObserver,\n  callback: (data: { entries: PerformanceEntry[] }) => void,\n): CleanupHandlerCallback {\n  addHandler(type, callback);\n\n  if (!instrumented[type]) {\n    instrumentPerformanceObserver(type);\n    instrumented[type] = true;\n  }\n\n  return getCleanupCallback(type, callback);\n}\n\n/** Trigger all handlers of a given type. */\nfunction triggerHandlers(type: InstrumentHandlerType, data: unknown): void {\n  const typeHandlers = handlers[type];\n\n  if (!typeHandlers?.length) {\n    return;\n  }\n\n  for (const handler of typeHandlers) {\n    try {\n      handler(data);\n    } catch (e) {\n      DEBUG_BUILD &&\n        debug.error(\n          `Error while triggering instrumentation handler.\\nType: ${type}\\nName: ${getFunctionName(handler)}\\nError:`,\n          e,\n        );\n    }\n  }\n}\n\nfunction instrumentCls(): StopListening {\n  return onCLS(\n    metric => {\n      triggerHandlers('cls', {\n        metric,\n      });\n      _previousCls = metric;\n    },\n    // We want the callback to be called whenever the CLS value updates.\n    // By default, the callback is only called when the tab goes to the background.\n    { reportAllChanges: true },\n  );\n}\n\nfunction instrumentLcp(): StopListening {\n  return onLCP(\n    metric => {\n      triggerHandlers('lcp', {\n        metric,\n      });\n      _previousLcp = metric;\n    },\n    // We want the callback to be called whenever the LCP value updates.\n    // By default, the callback is only called when the tab goes to the background.\n    { reportAllChanges: true },\n  );\n}\n\nfunction instrumentTtfb(): StopListening {\n  return onTTFB(metric => {\n    triggerHandlers('ttfb', {\n      metric,\n    });\n    _previousTtfb = metric;\n  });\n}\n\nfunction instrumentInp(): void {\n  return onINP(metric => {\n    triggerHandlers('inp', {\n      metric,\n    });\n    _previousInp = metric;\n  });\n}\n\nfunction addMetricObserver(\n  type: InstrumentHandlerTypeMetric,\n  callback: InstrumentHandlerCallback,\n  instrumentFn: () => StopListening,\n  previousValue: Metric | undefined,\n  stopOnCallback = false,\n): CleanupHandlerCallback {\n  addHandler(type, callback);\n\n  let stopListening: StopListening | undefined;\n\n  if (!instrumented[type]) {\n    stopListening = instrumentFn();\n    instrumented[type] = true;\n  }\n\n  if (previousValue) {\n    callback({ metric: previousValue });\n  }\n\n  return getCleanupCallback(type, callback, stopOnCallback ? stopListening : undefined);\n}\n\nfunction instrumentPerformanceObserver(type: InstrumentHandlerTypePerformanceObserver): void {\n  const options: PerformanceObserverInit = {};\n\n  // Special per-type options we want to use\n  if (type === 'event') {\n    options.durationThreshold = 0;\n  }\n\n  observe(\n    type,\n    entries => {\n      triggerHandlers(type, { entries });\n    },\n    options,\n  );\n}\n\nfunction addHandler(type: InstrumentHandlerType, handler: InstrumentHandlerCallback): void {\n  handlers[type] = handlers[type] || [];\n  handlers[type].push(handler);\n}\n\n// Get a callback which can be called to remove the instrumentation handler\nfunction getCleanupCallback(\n  type: InstrumentHandlerType,\n  callback: InstrumentHandlerCallback,\n  stopListening: StopListening,\n): CleanupHandlerCallback {\n  return () => {\n    if (stopListening) {\n      stopListening();\n    }\n\n    const typeHandlers = handlers[type];\n\n    if (!typeHandlers) {\n      return;\n    }\n\n    const index = typeHandlers.indexOf(callback);\n    if (index !== -1) {\n      typeHandlers.splice(index, 1);\n    }\n  };\n}\n\n/**\n * Check if a PerformanceEntry is a PerformanceEventTiming by checking for the `duration` property.\n */\nexport function isPerformanceEventTiming(entry: PerformanceEntry): entry is PerformanceEventTiming {\n  return 'duration' in entry;\n}\n"],"names":[],"mappings":"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"}

package/build/esm/metrics/lcp.js

@@ -0,0 +1,72 @@
+import { debug, browserPerformanceTimeOrigin, getCurrentScope, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE, SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT, SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
+import { DEBUG_BUILD } from '../debug-build.js';
+import { htmlTreeAsString } from '../htmlTreeAsString.js';
+import { addLcpInstrumentationHandler } from './instrument.js';
+import { supportsWebVital, listenForWebVitalReportEvents, msToSec, startStandaloneWebVitalSpan } from './utils.js';
+
+const MAX_PLAUSIBLE_LCP_DURATION = 6e4;
+function isValidLcpMetric(lcpValue) {
+  return lcpValue != null && lcpValue > 0 && lcpValue <= MAX_PLAUSIBLE_LCP_DURATION;
+}
+function trackLcpAsStandaloneSpan(client) {
+  let standaloneLcpValue = 0;
+  let standaloneLcpEntry;
+  if (!supportsWebVital("largest-contentful-paint")) {
+    return;
+  }
+  const cleanupLcpHandler = addLcpInstrumentationHandler(({ metric }) => {
+    const entry = metric.entries[metric.entries.length - 1];
+    if (!entry || !isValidLcpMetric(metric.value)) {
+      return;
+    }
+    standaloneLcpValue = metric.value;
+    standaloneLcpEntry = entry;
+  }, true);
+  listenForWebVitalReportEvents(client, (reportEvent, pageloadSpanId) => {
+    _sendStandaloneLcpSpan(standaloneLcpValue, standaloneLcpEntry, pageloadSpanId, reportEvent);
+    cleanupLcpHandler();
+  });
+}
+function _sendStandaloneLcpSpan(lcpValue, entry, pageloadSpanId, reportEvent) {
+  if (!isValidLcpMetric(lcpValue)) {
+    return;
+  }
+  DEBUG_BUILD && debug.log(`Sending LCP span (${lcpValue})`);
+  const startTime = msToSec((browserPerformanceTimeOrigin() || 0) + (entry?.startTime || 0));
+  const routeName = getCurrentScope().getScopeData().transactionName;
+  const name = entry ? htmlTreeAsString(entry.element) : "Largest contentful paint";
+  const attributes = {
+    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: "auto.http.browser.lcp",
+    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: "ui.webvital.lcp",
+    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: 0,
+    // LCP is a point-in-time metric
+    // attach the pageload span id to the LCP span so that we can link them in the UI
+    "sentry.pageload.span_id": pageloadSpanId,
+    // describes what triggered the web vital to be reported
+    "sentry.report_event": reportEvent
+  };
+  if (entry) {
+    entry.element && (attributes["lcp.element"] = htmlTreeAsString(entry.element));
+    entry.id && (attributes["lcp.id"] = entry.id);
+    entry.url && (attributes["lcp.url"] = entry.url);
+    entry.loadTime != null && (attributes["lcp.loadTime"] = entry.loadTime);
+    entry.renderTime != null && (attributes["lcp.renderTime"] = entry.renderTime);
+    entry.size != null && (attributes["lcp.size"] = entry.size);
+  }
+  const span = startStandaloneWebVitalSpan({
+    name,
+    transaction: routeName,
+    attributes,
+    startTime
+  });
+  if (span) {
+    span.addEvent("lcp", {
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: "millisecond",
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: lcpValue
+    });
+    span.end(startTime);
+  }
+}
+
+export { MAX_PLAUSIBLE_LCP_DURATION, _sendStandaloneLcpSpan, isValidLcpMetric, trackLcpAsStandaloneSpan };
+//# sourceMappingURL=lcp.js.map

package/build/esm/metrics/lcp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lcp.js","sources":["../../../src/metrics/lcp.ts"],"sourcesContent":["import type { Client, SpanAttributes } from '@sentry/core';\nimport {\n  browserPerformanceTimeOrigin,\n  debug,\n  getCurrentScope,\n  SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT,\n  SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE,\n  SEMANTIC_ATTRIBUTE_SENTRY_OP,\n  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,\n} from '@sentry/core';\nimport { DEBUG_BUILD } from '../debug-build';\nimport { htmlTreeAsString } from '../htmlTreeAsString';\nimport { addLcpInstrumentationHandler } from './instrument';\nimport type { WebVitalReportEvent } from './utils';\nimport { listenForWebVitalReportEvents, msToSec, startStandaloneWebVitalSpan, supportsWebVital } from './utils';\n\n/**\n * 60 seconds is the maximum for a plausible LCP value.\n */\nexport const MAX_PLAUSIBLE_LCP_DURATION = 60_000;\n\nexport function isValidLcpMetric(lcpValue: number | undefined): lcpValue is number {\n  return lcpValue != null && lcpValue > 0 && lcpValue <= MAX_PLAUSIBLE_LCP_DURATION;\n}\n\n/**\n * Starts tracking the Largest Contentful Paint on the current page and collects the value once\n *\n * - the page visibility is hidden\n * - a navigation span is started (to stop LCP measurement for SPA soft navigations)\n *\n * Once either of these events triggers, the LCP value is sent as a standalone span and we stop\n * measuring LCP for subsequent routes.\n */\nexport function trackLcpAsStandaloneSpan(client: Client): void {\n  let standaloneLcpValue = 0;\n  let standaloneLcpEntry: LargestContentfulPaint | undefined;\n\n  if (!supportsWebVital('largest-contentful-paint')) {\n    return;\n  }\n\n  const cleanupLcpHandler = addLcpInstrumentationHandler(({ metric }) => {\n    const entry = metric.entries[metric.entries.length - 1] as LargestContentfulPaint | undefined;\n    if (!entry || !isValidLcpMetric(metric.value)) {\n      return;\n    }\n    standaloneLcpValue = metric.value;\n    standaloneLcpEntry = entry;\n  }, true);\n\n  listenForWebVitalReportEvents(client, (reportEvent, pageloadSpanId) => {\n    _sendStandaloneLcpSpan(standaloneLcpValue, standaloneLcpEntry, pageloadSpanId, reportEvent);\n    cleanupLcpHandler();\n  });\n}\n\n/**\n * Exported only for testing!\n */\nexport function _sendStandaloneLcpSpan(\n  lcpValue: number,\n  entry: LargestContentfulPaint | undefined,\n  pageloadSpanId: string,\n  reportEvent: WebVitalReportEvent,\n) {\n  if (!isValidLcpMetric(lcpValue)) {\n    return;\n  }\n\n  DEBUG_BUILD && debug.log(`Sending LCP span (${lcpValue})`);\n\n  const startTime = msToSec((browserPerformanceTimeOrigin() || 0) + (entry?.startTime || 0));\n  const routeName = getCurrentScope().getScopeData().transactionName;\n\n  const name = entry ? htmlTreeAsString(entry.element) : 'Largest contentful paint';\n\n  const attributes: SpanAttributes = {\n    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.lcp',\n    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.webvital.lcp',\n    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: 0, // LCP is a point-in-time metric\n    // attach the pageload span id to the LCP span so that we can link them in the UI\n    'sentry.pageload.span_id': pageloadSpanId,\n    // describes what triggered the web vital to be reported\n    'sentry.report_event': reportEvent,\n  };\n\n  if (entry) {\n    entry.element && (attributes['lcp.element'] = htmlTreeAsString(entry.element));\n    entry.id && (attributes['lcp.id'] = entry.id);\n\n    entry.url && (attributes['lcp.url'] = entry.url);\n\n    // loadTime is the time of LCP that's related to receiving the LCP element response..\n    entry.loadTime != null && (attributes['lcp.loadTime'] = entry.loadTime);\n\n    // renderTime is loadTime + rendering time\n    // it's 0 if the LCP element is loaded from a 3rd party origin that doesn't send the\n    // `Timing-Allow-Origin` header.\n    entry.renderTime != null && (attributes['lcp.renderTime'] = entry.renderTime);\n\n    entry.size != null && (attributes['lcp.size'] = entry.size);\n  }\n\n  const span = startStandaloneWebVitalSpan({\n    name,\n    transaction: routeName,\n    attributes,\n    startTime,\n  });\n\n  if (span) {\n    span.addEvent('lcp', {\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: 'millisecond',\n      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: lcpValue,\n    });\n\n    // LCP is a point-in-time metric, so we end the span immediately\n    span.end(startTime);\n  }\n}\n"],"names":[],"mappings":"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"}