@sentry/replay 7.74.2-alpha.1 → 7.75.1

package/esm/index.js

@@ -1,5 +1,6 @@
 import { getCurrentHub, isSentryRequestUrl, addGlobalEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
-import { GLOBAL_OBJ, normalize, fill, htmlTreeAsString, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, browserPerformanceTimeOrigin, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, isNodeEnv } from '@sentry/utils';
+import { GLOBAL_OBJ, normalize, fill, htmlTreeAsString, browserPerformanceTimeOrigin, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, isBrowser } from '@sentry/utils';
+import { addPerformanceInstrumentationHandler, addLcpInstrumentationHandler } from '@sentry-internal/tracing';
 
 // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
 // prevents the browser package from being bundled in the CDN bundle, and avoids a
@@ -5123,136 +5124,193 @@ function isInputElement(target) {
   return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
 }
 
-const NAVIGATION_ENTRY_KEYS = [
-  'name',
-  'type',
-  'startTime',
-  'transferSize',
-  'duration',
-];
-
-function isNavigationEntryEqual(a) {
-  return function (b) {
-    return NAVIGATION_ENTRY_KEYS.every(key => a[key] === b[key]);
-  };
-}
+// Map entryType -> function to normalize data for event
+const ENTRY_TYPES
+
+ = {
+  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
+  resource: createResourceEntry,
+  paint: createPaintEntry,
+  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
+  navigation: createNavigationEntry,
+};
 
 /**
- * There are some difficulties diagnosing why there are duplicate navigation
- * entries. We've witnessed several intermittent results:
- * - duplicate entries have duration = 0
- * - duplicate entries are the same object reference
- * - none of the above
- *
- * Compare the values of several keys to determine if the entries are duplicates or not.
+ * Create replay performance entries from the browser performance entries.
  */
-// TODO (high-prio): Figure out wth is returned here
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function dedupePerformanceEntries(
-  currentList,
-  newList,
+function createPerformanceEntries(
+  entries,
 ) {
-  // Partition `currentList` into 3 different lists based on entryType
-  const [existingNavigationEntries, existingLcpEntries, existingEntries] = currentList.reduce(
-    (acc, entry) => {
-      if (entry.entryType === 'navigation') {
-        acc[0].push(entry );
-      } else if (entry.entryType === 'largest-contentful-paint') {
-        acc[1].push(entry );
-      } else {
-        acc[2].push(entry);
-      }
-      return acc;
+  return entries.map(createPerformanceEntry).filter(Boolean) ;
+}
+
+function createPerformanceEntry(entry) {
+  if (!ENTRY_TYPES[entry.entryType]) {
+    return null;
+  }
+
+  return ENTRY_TYPES[entry.entryType](entry);
+}
+
+function getAbsoluteTime(time) {
+  // browserPerformanceTimeOrigin can be undefined if `performance` or
+  // `performance.now` doesn't exist, but this is already checked by this integration
+  return ((browserPerformanceTimeOrigin || WINDOW.performance.timeOrigin) + time) / 1000;
+}
+
+function createPaintEntry(entry) {
+  const { duration, entryType, name, startTime } = entry;
+
+  const start = getAbsoluteTime(startTime);
+  return {
+    type: entryType,
+    name,
+    start,
+    end: start + duration,
+    data: undefined,
+  };
+}
+
+function createNavigationEntry(entry) {
+  const {
+    entryType,
+    name,
+    decodedBodySize,
+    duration,
+    domComplete,
+    encodedBodySize,
+    domContentLoadedEventStart,
+    domContentLoadedEventEnd,
+    domInteractive,
+    loadEventStart,
+    loadEventEnd,
+    redirectCount,
+    startTime,
+    transferSize,
+    type,
+  } = entry;
+
+  // Ignore entries with no duration, they do not seem to be useful and cause dupes
+  if (duration === 0) {
+    return null;
+  }
+
+  return {
+    type: `${entryType}.${type}`,
+    start: getAbsoluteTime(startTime),
+    end: getAbsoluteTime(domComplete),
+    name,
+    data: {
+      size: transferSize,
+      decodedBodySize,
+      encodedBodySize,
+      duration,
+      domInteractive,
+      domContentLoadedEventStart,
+      domContentLoadedEventEnd,
+      loadEventStart,
+      loadEventEnd,
+      domComplete,
+      redirectCount,
     },
-    [[], [], []],
-  );
+  };
+}
 
-  const newEntries = [];
-  const newNavigationEntries = [];
-  let newLcpEntry = existingLcpEntries.length
-    ? existingLcpEntries[existingLcpEntries.length - 1] // Take the last element as list is sorted
-    : undefined;
-
-  newList.forEach(entry => {
-    if (entry.entryType === 'largest-contentful-paint') {
-      // We want the latest LCP event only
-      if (!newLcpEntry || newLcpEntry.startTime < entry.startTime) {
-        newLcpEntry = entry;
-      }
-      return;
-    }
+function createResourceEntry(
+  entry,
+) {
+  const {
+    entryType,
+    initiatorType,
+    name,
+    responseEnd,
+    startTime,
+    decodedBodySize,
+    encodedBodySize,
+    responseStatus,
+    transferSize,
+  } = entry;
 
-    if (entry.entryType === 'navigation') {
-      const navigationEntry = entry ;
+  // Core SDK handles these
+  if (['fetch', 'xmlhttprequest'].includes(initiatorType)) {
+    return null;
+  }
 
-      // Check if the navigation entry is contained in currentList or newList
-      if (
-        // Ignore any navigation entries with duration 0, as they are likely duplicates
-        entry.duration > 0 &&
-        // Ensure new entry does not already exist in existing entries
-        !existingNavigationEntries.find(isNavigationEntryEqual(navigationEntry)) &&
-        // Ensure new entry does not already exist in new list of navigation entries
-        !newNavigationEntries.find(isNavigationEntryEqual(navigationEntry))
-      ) {
-        newNavigationEntries.push(navigationEntry);
-      }
+  return {
+    type: `${entryType}.${initiatorType}`,
+    start: getAbsoluteTime(startTime),
+    end: getAbsoluteTime(responseEnd),
+    name,
+    data: {
+      size: transferSize,
+      statusCode: responseStatus,
+      decodedBodySize,
+      encodedBodySize,
+    },
+  };
+}
 
-      // Otherwise this navigation entry is considered a duplicate and is thrown away
-      return;
-    }
+/**
+ * Add a LCP event to the replay based on an LCP metric.
+ */
+function getLargestContentfulPaint(metric
 
-    newEntries.push(entry);
-  });
+) {
+  const entries = metric.entries;
+  const lastEntry = entries[entries.length - 1] ;
+  const element = lastEntry ? lastEntry.element : undefined;
+
+  const value = metric.value;
 
-  // Re-combine and sort by startTime
-  return [
-    ...(newLcpEntry ? [newLcpEntry] : []),
-    ...existingNavigationEntries,
-    ...existingEntries,
-    ...newEntries,
-    ...newNavigationEntries,
-  ].sort((a, b) => a.startTime - b.startTime);
+  const end = getAbsoluteTime(value);
+
+  const data = {
+    type: 'largest-contentful-paint',
+    name: 'largest-contentful-paint',
+    start: end,
+    end,
+    data: {
+      value,
+      size: value,
+      nodeId: element ? record.mirror.getId(element) : undefined,
+    },
+  };
+
+  return data;
 }
 
 /**
  * Sets up a PerformanceObserver to listen to all performance entry types.
+ * Returns a callback to stop observing.
  */
 function setupPerformanceObserver(replay) {
-  const performanceObserverHandler = (list) => {
-    // For whatever reason the observer was returning duplicate navigation
-    // entries (the other entry types were not duplicated).
-    const newPerformanceEntries = dedupePerformanceEntries(
-      replay.performanceEvents,
-      list.getEntries() ,
-    );
-    replay.performanceEvents = newPerformanceEntries;
-  };
-
-  const performanceObserver = new PerformanceObserver(performanceObserverHandler);
-
-  [
-    'element',
-    'event',
-    'first-input',
-    'largest-contentful-paint',
-    'layout-shift',
-    'longtask',
-    'navigation',
-    'paint',
-    'resource',
-  ].forEach(type => {
-    try {
-      performanceObserver.observe({
-        type,
-        buffered: true,
-      });
-    } catch (e) {
-      // This can throw if an entry type is not supported in the browser.
-      // Ignore these errors.
+  function addPerformanceEntry(entry) {
+    // It is possible for entries to come up multiple times
+    if (!replay.performanceEntries.includes(entry)) {
+      replay.performanceEntries.push(entry);
     }
+  }
+
+  function onEntries({ entries }) {
+    entries.forEach(addPerformanceEntry);
+  }
+
+  const clearCallbacks = [];
+
+  (['navigation', 'paint', 'resource'] ).forEach(type => {
+    clearCallbacks.push(addPerformanceInstrumentationHandler(type, onEntries));
   });
 
-  return performanceObserver;
+  clearCallbacks.push(
+    addLcpInstrumentationHandler(({ metric }) => {
+      replay.replayPerformanceEntries.push(getLargestContentfulPaint(metric));
+    }),
+  );
+
+  // A callback to cleanup all handlers
+  return () => {
+    clearCallbacks.forEach(clearCallback => clearCallback());
+  };
 }
 
 const r = `/*! pako 2.1.0 https://github.com/nodeca/pako @license (MIT AND Zlib) */
@@ -7732,169 +7790,6 @@ function createMemoryEntry(memoryEntry) {
   };
 }
 
-// Map entryType -> function to normalize data for event
-const ENTRY_TYPES
-
- = {
-  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
-  resource: createResourceEntry,
-  paint: createPaintEntry,
-  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
-  navigation: createNavigationEntry,
-  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
-  ['largest-contentful-paint']: createLargestContentfulPaint,
-};
-
-/**
- * Create replay performance entries from the browser performance entries.
- */
-function createPerformanceEntries(
-  entries,
-) {
-  return entries.map(createPerformanceEntry).filter(Boolean) ;
-}
-
-function createPerformanceEntry(entry) {
-  if (ENTRY_TYPES[entry.entryType] === undefined) {
-    return null;
-  }
-
-  return ENTRY_TYPES[entry.entryType](entry);
-}
-
-function getAbsoluteTime(time) {
-  // browserPerformanceTimeOrigin can be undefined if `performance` or
-  // `performance.now` doesn't exist, but this is already checked by this integration
-  return ((browserPerformanceTimeOrigin || WINDOW.performance.timeOrigin) + time) / 1000;
-}
-
-function createPaintEntry(entry) {
-  const { duration, entryType, name, startTime } = entry;
-
-  const start = getAbsoluteTime(startTime);
-  return {
-    type: entryType,
-    name,
-    start,
-    end: start + duration,
-    data: undefined,
-  };
-}
-
-function createNavigationEntry(entry) {
-  const {
-    entryType,
-    name,
-    decodedBodySize,
-    duration,
-    domComplete,
-    encodedBodySize,
-    domContentLoadedEventStart,
-    domContentLoadedEventEnd,
-    domInteractive,
-    loadEventStart,
-    loadEventEnd,
-    redirectCount,
-    startTime,
-    transferSize,
-    type,
-  } = entry;
-
-  // Ignore entries with no duration, they do not seem to be useful and cause dupes
-  if (duration === 0) {
-    return null;
-  }
-
-  return {
-    type: `${entryType}.${type}`,
-    start: getAbsoluteTime(startTime),
-    end: getAbsoluteTime(domComplete),
-    name,
-    data: {
-      size: transferSize,
-      decodedBodySize,
-      encodedBodySize,
-      duration,
-      domInteractive,
-      domContentLoadedEventStart,
-      domContentLoadedEventEnd,
-      loadEventStart,
-      loadEventEnd,
-      domComplete,
-      redirectCount,
-    },
-  };
-}
-
-function createResourceEntry(
-  entry,
-) {
-  const {
-    entryType,
-    initiatorType,
-    name,
-    responseEnd,
-    startTime,
-    decodedBodySize,
-    encodedBodySize,
-    responseStatus,
-    transferSize,
-  } = entry;
-
-  // Core SDK handles these
-  if (['fetch', 'xmlhttprequest'].includes(initiatorType)) {
-    return null;
-  }
-
-  return {
-    type: `${entryType}.${initiatorType}`,
-    start: getAbsoluteTime(startTime),
-    end: getAbsoluteTime(responseEnd),
-    name,
-    data: {
-      size: transferSize,
-      statusCode: responseStatus,
-      decodedBodySize,
-      encodedBodySize,
-    },
-  };
-}
-
-function createLargestContentfulPaint(
-  entry,
-) {
-  const { entryType, startTime, size } = entry;
-
-  let startTimeOrNavigationActivation = 0;
-
-  if (WINDOW.performance) {
-    const navEntry = WINDOW.performance.getEntriesByType('navigation')[0]
-
-;
-
-    // See https://github.com/GoogleChrome/web-vitals/blob/9f11c4c6578fb4c5ee6fa4e32b9d1d756475f135/src/lib/getActivationStart.ts#L21
-    startTimeOrNavigationActivation = (navEntry && navEntry.activationStart) || 0;
-  }
-
-  // value is in ms
-  const value = Math.max(startTime - startTimeOrNavigationActivation, 0);
-  // LCP doesn't have a "duration", it just happens at a single point in time.
-  // But the UI expects both, so use end (in seconds) for both timestamps.
-  const end = getAbsoluteTime(startTimeOrNavigationActivation) + value / 1000;
-
-  return {
-    type: entryType,
-    name: entryType,
-    start: end,
-    end,
-    data: {
-      value, // LCP "duration" in ms
-      size,
-      nodeId: record.mirror.getId(entry.element),
-    },
-  };
-}
-
 /**
  * Heavily simplified debounce function based on lodash.debounce.
  *
@@ -8465,10 +8360,6 @@ function throttle(
  */
 class ReplayContainer  {
 
-  /**
-   * List of PerformanceEntry from PerformanceObserver
-   */
-
   /**
    * Recording can happen in one of three modes:
    *   - session: Record the whole session, sending it continuously
@@ -8521,7 +8412,8 @@ class ReplayContainer  {
 
 ) {ReplayContainer.prototype.__init.call(this);ReplayContainer.prototype.__init2.call(this);ReplayContainer.prototype.__init3.call(this);ReplayContainer.prototype.__init4.call(this);ReplayContainer.prototype.__init5.call(this);ReplayContainer.prototype.__init6.call(this);
     this.eventBuffer = null;
-    this.performanceEvents = [];
+    this.performanceEntries = [];
+    this.replayPerformanceEntries = [];
     this.recordingMode = 'session';
     this.timeouts = {
       sessionIdlePause: SESSION_IDLE_PAUSE_DURATION,
@@ -9015,7 +8907,8 @@ class ReplayContainer  {
     const urlPath = `${WINDOW.location.pathname}${WINDOW.location.hash}${WINDOW.location.search}`;
     const url = `${WINDOW.location.origin}${urlPath}`;
 
-    this.performanceEvents = [];
+    this.performanceEntries = [];
+    this.replayPerformanceEntries = [];
 
     // Reset _context as well
     this._clearContext();
@@ -9194,12 +9087,7 @@ class ReplayContainer  {
       this._handleException(err);
     }
 
-    // PerformanceObserver //
-    if (!('PerformanceObserver' in WINDOW)) {
-      return;
-    }
-
-    this._performanceObserver = setupPerformanceObserver(this);
+    this._performanceCleanupCallback = setupPerformanceObserver(this);
   }
 
   /**
@@ -9217,9 +9105,8 @@ class ReplayContainer  {
         this.clickDetector.removeListeners();
       }
 
-      if (this._performanceObserver) {
-        this._performanceObserver.disconnect();
-        this._performanceObserver = undefined;
+      if (this._performanceCleanupCallback) {
+        this._performanceCleanupCallback();
       }
     } catch (err) {
       this._handleException(err);
@@ -9368,15 +9255,16 @@ class ReplayContainer  {
   }
 
   /**
-   * Observed performance events are added to `this.performanceEvents`. These
+   * Observed performance events are added to `this.performanceEntries`. These
    * are included in the replay event before it is finished and sent to Sentry.
    */
    _addPerformanceEntries() {
-    // Copy and reset entries before processing
-    const entries = [...this.performanceEvents];
-    this.performanceEvents = [];
+    const performanceEntries = createPerformanceEntries(this.performanceEntries).concat(this.replayPerformanceEntries);
+
+    this.performanceEntries = [];
+    this.replayPerformanceEntries = [];
 
-    return Promise.all(createPerformanceSpans(this, createPerformanceEntries(entries)));
+    return Promise.all(createPerformanceSpans(this, performanceEntries));
   }
 
   /**
@@ -9709,19 +9597,6 @@ function getPrivacyOptions({
   return options;
 }
 
-/**
- * Returns true if we are in the browser.
- */
-function isBrowser() {
-  // eslint-disable-next-line no-restricted-globals
-  return typeof window !== 'undefined' && (!isNodeEnv() || isElectronNodeRenderer());
-}
-
-// Electron renderers with nodeIntegration enabled are detected as Node.js so we specifically test for them
-function isElectronNodeRenderer() {
-  return typeof process !== 'undefined' && (process ).type === 'renderer';
-}
-
 /**
  * Masks an attribute if necessary, otherwise return attribute value as-is.
  */