@sentry/replay 7.53.1 → 7.54.0

package/esm/index.js

@@ -1,5 +1,5 @@
-import { getCurrentHub, addBreadcrumb, addGlobalEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
-import { GLOBAL_OBJ, logger, normalize, htmlTreeAsString, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, browserPerformanceTimeOrigin, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, isNodeEnv } from '@sentry/utils';
+import { getCurrentHub, addGlobalEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
+import { GLOBAL_OBJ, normalize, htmlTreeAsString, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, browserPerformanceTimeOrigin, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, isNodeEnv } from '@sentry/utils';
 
 // 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
@@ -1133,7 +1133,7 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
         },
     });
 }
-function throttle(func, wait, options = {}) {
+function throttle$1(func, wait, options = {}) {
     let timeout = null;
     let previous = 0;
     return function (arg) {
@@ -1868,7 +1868,7 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
         : 500;
     let positions = [];
     let timeBaseline;
-    const wrappedCb = throttle((source) => {
+    const wrappedCb = throttle$1((source) => {
         const totalOffset = Date.now() - timeBaseline;
         callbackWrapper(mousemoveCb)(positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -1877,7 +1877,7 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
         positions = [];
         timeBaseline = null;
     }, callbackThreshold);
-    const updatePosition = throttle((evt) => {
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
         const { clientX, clientY } = isTouchEvent(evt)
             ? evt.changedTouches[0]
@@ -1951,7 +1951,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
     });
 }
 function initScrollObserver({ scrollCb, doc, mirror, blockClass, blockSelector, unblockSelector, sampling, }) {
-    const updatePosition = throttle((evt) => {
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
         if (!target ||
             isBlocked(target, blockClass, blockSelector, unblockSelector)) {
@@ -1979,7 +1979,7 @@ function initScrollObserver({ scrollCb, doc, mirror, blockClass, blockSelector,
 function initViewportResizeObserver({ viewportResizeCb, }) {
     let lastH = -1;
     let lastW = -1;
-    const updateDimension = throttle(() => {
+    const updateDimension = throttle$1(() => {
         const height = getWindowHeight();
         const width = getWindowWidth();
         if (lastH !== height || lastW !== width) {
@@ -2268,7 +2268,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
     });
 }
 function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSelector, unblockSelector, mirror, sampling, }) {
-    const handler = (type) => throttle(callbackWrapper((event) => {
+    const handler = (type) => throttle$1(callbackWrapper((event) => {
         const target = getEventTarget(event);
         if (!target ||
             isBlocked(target, blockClass, blockSelector, unblockSelector)) {
@@ -3285,89 +3285,6 @@ var NodeType;
     NodeType[NodeType["Comment"] = 5] = "Comment";
 })(NodeType || (NodeType = {}));
 
-/* eslint-disable @typescript-eslint/naming-convention */
-
-var EventType; (function (EventType) {
-  const DomContentLoaded = 0; EventType[EventType["DomContentLoaded"] = DomContentLoaded] = "DomContentLoaded";
-  const Load = 1; EventType[EventType["Load"] = Load] = "Load";
-  const FullSnapshot = 2; EventType[EventType["FullSnapshot"] = FullSnapshot] = "FullSnapshot";
-  const IncrementalSnapshot = 3; EventType[EventType["IncrementalSnapshot"] = IncrementalSnapshot] = "IncrementalSnapshot";
-  const Meta = 4; EventType[EventType["Meta"] = Meta] = "Meta";
-  const Custom = 5; EventType[EventType["Custom"] = Custom] = "Custom";
-  const Plugin = 6; EventType[EventType["Plugin"] = Plugin] = "Plugin";
-})(EventType || (EventType = {}));
-
-/**
- * This is a partial copy of rrweb's eventWithTime type which only contains the properties
- * we specifcally need in the SDK.
- */
-
-/**
- * Converts a timestamp to ms, if it was in s, or keeps it as ms.
- */
-function timestampToMs(timestamp) {
-  const isMs = timestamp > 9999999999;
-  return isMs ? timestamp : timestamp * 1000;
-}
-
-/**
- * Add an event to the event buffer.
- * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
- */
-async function addEvent(
-  replay,
-  event,
-  isCheckout,
-) {
-  if (!replay.eventBuffer) {
-    // This implies that `_isEnabled` is false
-    return null;
-  }
-
-  if (replay.isPaused()) {
-    // Do not add to event buffer when recording is paused
-    return null;
-  }
-
-  const timestampInMs = timestampToMs(event.timestamp);
-
-  // Throw out events that happen more than 5 minutes ago. This can happen if
-  // page has been left open and idle for a long period of time and user
-  // comes back to trigger a new session. The performance entries rely on
-  // `performance.timeOrigin`, which is when the page first opened.
-  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
-    return null;
-  }
-
-  try {
-    if (isCheckout) {
-      replay.eventBuffer.clear();
-    }
-
-    const replayOptions = replay.getOptions();
-
-    const eventAfterPossibleCallback =
-      typeof replayOptions.beforeAddRecordingEvent === 'function' && event.type === EventType.Custom
-        ? replayOptions.beforeAddRecordingEvent(event)
-        : event;
-
-    if (!eventAfterPossibleCallback) {
-      return;
-    }
-
-    return await replay.eventBuffer.addEvent(eventAfterPossibleCallback);
-  } catch (error) {
-    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
-    await replay.stop('addEvent');
-
-    const client = getCurrentHub().getClient();
-
-    if (client) {
-      client.recordDroppedEvent('internal_sdk_error', 'replay');
-    }
-  }
-}
-
 /**
  * Add a breadcrumb event to replay.
  */
@@ -3383,7 +3300,7 @@ function addBreadcrumbEvent(replay, breadcrumb) {
   }
 
   replay.addUpdate(() => {
-    void addEvent(replay, {
+    void replay.throttledAddEvent({
       type: EventType$1.Custom,
       // TODO: We were converting from ms to seconds for breadcrumbs, spans,
       // but maybe we should just keep them as milliseconds
@@ -3724,7 +3641,7 @@ function getKeyboardBreadcrumb(event) {
   const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event;
 
   // never capture for input fields
-  if (!target || isInputElement(target )) {
+  if (!target || isInputElement(target ) || !key) {
     return null;
   }
 
@@ -3896,6 +3813,14 @@ function t(t){let e=t.length;for(;--e>=0;)t[e]=0}const e=new Uint8Array([0,0,0,0
 
 function e(){const e=new Blob([r]);return URL.createObjectURL(e)}
 
+/**
+ * Converts a timestamp to ms, if it was in s, or keeps it as ms.
+ */
+function timestampToMs(timestamp) {
+  const isMs = timestamp > 9999999999;
+  return isMs ? timestamp : timestamp * 1000;
+}
+
 /**
  * A basic event buffer that does not do any compression.
  * Used as fallback if the compression worker cannot be loaded or is disabled.
@@ -4473,6 +4398,81 @@ function getSession({
   return { type: 'new', session: newSession };
 }
 
+/* eslint-disable @typescript-eslint/naming-convention */
+
+var EventType; (function (EventType) {
+  const DomContentLoaded = 0; EventType[EventType["DomContentLoaded"] = DomContentLoaded] = "DomContentLoaded";
+  const Load = 1; EventType[EventType["Load"] = Load] = "Load";
+  const FullSnapshot = 2; EventType[EventType["FullSnapshot"] = FullSnapshot] = "FullSnapshot";
+  const IncrementalSnapshot = 3; EventType[EventType["IncrementalSnapshot"] = IncrementalSnapshot] = "IncrementalSnapshot";
+  const Meta = 4; EventType[EventType["Meta"] = Meta] = "Meta";
+  const Custom = 5; EventType[EventType["Custom"] = Custom] = "Custom";
+  const Plugin = 6; EventType[EventType["Plugin"] = Plugin] = "Plugin";
+})(EventType || (EventType = {}));
+
+/**
+ * This is a partial copy of rrweb's eventWithTime type which only contains the properties
+ * we specifcally need in the SDK.
+ */
+
+/**
+ * Add an event to the event buffer.
+ * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
+ */
+async function addEvent(
+  replay,
+  event,
+  isCheckout,
+) {
+  if (!replay.eventBuffer) {
+    // This implies that `_isEnabled` is false
+    return null;
+  }
+
+  if (replay.isPaused()) {
+    // Do not add to event buffer when recording is paused
+    return null;
+  }
+
+  const timestampInMs = timestampToMs(event.timestamp);
+
+  // Throw out events that happen more than 5 minutes ago. This can happen if
+  // page has been left open and idle for a long period of time and user
+  // comes back to trigger a new session. The performance entries rely on
+  // `performance.timeOrigin`, which is when the page first opened.
+  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
+    return null;
+  }
+
+  try {
+    if (isCheckout) {
+      replay.eventBuffer.clear();
+    }
+
+    const replayOptions = replay.getOptions();
+
+    const eventAfterPossibleCallback =
+      typeof replayOptions.beforeAddRecordingEvent === 'function' && event.type === EventType.Custom
+        ? replayOptions.beforeAddRecordingEvent(event)
+        : event;
+
+    if (!eventAfterPossibleCallback) {
+      return;
+    }
+
+    return await replay.eventBuffer.addEvent(eventAfterPossibleCallback);
+  } catch (error) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
+    await replay.stop('addEvent');
+
+    const client = getCurrentHub().getClient();
+
+    if (client) {
+      client.recordDroppedEvent('internal_sdk_error', 'replay');
+    }
+  }
+}
+
 /** If the event is an error event */
 function isErrorEvent(event) {
   return !event.type;
@@ -4647,13 +4647,6 @@ function handleGlobalEventListener(
       event.tags = { ...event.tags, replayId: replay.getSessionId() };
     }
 
-    if ((typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && replay.getOptions()._experiments.traceInternals && isErrorEvent(event)) {
-      const exc = getEventExceptionValues(event);
-      addInternalBreadcrumb({
-        message: `Tagging event (${event.event_id}) - ${event.message} - ${exc.type}: ${exc.value}`,
-      });
-    }
-
     // In cases where a custom client is used that does not support the new hooks (yet),
     // we manually call this hook method here
     if (afterSendHandler) {
@@ -4665,34 +4658,15 @@ function handleGlobalEventListener(
   };
 }
 
-function addInternalBreadcrumb(arg) {
-  const { category, level, message, ...rest } = arg;
-
-  addBreadcrumb({
-    category: category || 'console',
-    level: level || 'debug',
-    message: `[debug]: ${message}`,
-    ...rest,
-  });
-}
-
-function getEventExceptionValues(event) {
-  return {
-    type: 'Unknown',
-    value: 'n/a',
-    ...(event.exception && event.exception.values && event.exception.values[0]),
-  };
-}
-
 /**
- * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
+ * Create a "span" for each performance entry.
  */
 function createPerformanceSpans(
   replay,
   entries,
 ) {
-  return entries.map(({ type, start, end, name, data }) =>
-    addEvent(replay, {
+  return entries.map(({ type, start, end, name, data }) => {
+    const response = replay.throttledAddEvent({
       type: EventType$1.Custom,
       timestamp: start,
       data: {
@@ -4705,8 +4679,11 @@ function createPerformanceSpans(
           data,
         },
       },
-    }),
-  );
+    });
+
+    // If response is a string, it means its either THROTTLED or SKIPPED
+    return typeof response === 'string' ? Promise.resolve(null) : response;
+  });
 }
 
 function handleHistory(handlerData) {
@@ -6055,6 +6032,16 @@ function addGlobalListeners(replay) {
         dsc.replay_id = replayId;
       }
     });
+
+    client.on('startTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
+
+    // We may be missing the initial startTransaction due to timing issues,
+    // so we capture it on finish again.
+    client.on('finishTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
   }
 }
 
@@ -6778,6 +6765,62 @@ async function sendReplay(
   }
 }
 
+const THROTTLED = '__THROTTLED';
+const SKIPPED = '__SKIPPED';
+
+/**
+ * Create a throttled function off a given function.
+ * When calling the throttled function, it will call the original function only
+ * if it hasn't been called more than `maxCount` times in the last `durationSeconds`.
+ *
+ * Returns `THROTTLED` if throttled for the first time, after that `SKIPPED`,
+ * or else the return value of the original function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function throttle(
+  fn,
+  maxCount,
+  durationSeconds,
+) {
+  const counter = new Map();
+
+  const _cleanup = (now) => {
+    const threshold = now - durationSeconds;
+    counter.forEach((_value, key) => {
+      if (key < threshold) {
+        counter.delete(key);
+      }
+    });
+  };
+
+  const _getTotalCount = () => {
+    return [...counter.values()].reduce((a, b) => a + b, 0);
+  };
+
+  let isThrottled = false;
+
+  return (...rest) => {
+    // Date in second-precision, which we use as basis for the throttling
+    const now = Math.floor(Date.now() / 1000);
+
+    // First, make sure to delete any old entries
+    _cleanup(now);
+
+    // If already over limit, do nothing
+    if (_getTotalCount() >= maxCount) {
+      const wasThrottled = isThrottled;
+      isThrottled = true;
+      return wasThrottled ? SKIPPED : THROTTLED;
+    }
+
+    isThrottled = false;
+    const count = counter.get(now) || 0;
+    counter.set(now, count + 1);
+
+    return fn(...rest);
+  };
+}
+
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 
 /**
@@ -6800,6 +6843,11 @@ class ReplayContainer  {
    */
    __init3() {this.recordingMode = 'session';}
 
+  /**
+   * The current or last active transcation.
+   * This is only available when performance is enabled.
+   */
+
   /**
    * These are here so we can overwrite them in tests etc.
    * @hidden
@@ -6866,6 +6914,14 @@ class ReplayContainer  {
     this._debouncedFlush = debounce(() => this._flush(), this._options.flushMinDelay, {
       maxWait: this._options.flushMaxDelay,
     });
+
+    this._throttledAddEvent = throttle(
+      (event, isCheckout) => addEvent(this, event, isCheckout),
+      // Max 300 events...
+      300,
+      // ... per 5s
+      5,
+    );
   }
 
   /** Get the event context. */
@@ -7295,6 +7351,52 @@ class ReplayContainer  {
     this._context.urls.push(url);
   }
 
+  /**
+   * Add a breadcrumb event, that may be throttled.
+   * If it was throttled, we add a custom breadcrumb to indicate that.
+   */
+   throttledAddEvent(
+    event,
+    isCheckout,
+  ) {
+    const res = this._throttledAddEvent(event, isCheckout);
+
+    // If this is THROTTLED, it means we have throttled the event for the first time
+    // In this case, we want to add a breadcrumb indicating that something was skipped
+    if (res === THROTTLED) {
+      const breadcrumb = createBreadcrumb({
+        category: 'replay.throttled',
+      });
+
+      this.addUpdate(() => {
+        void addEvent(this, {
+          type: EventType$1.Custom,
+          timestamp: breadcrumb.timestamp || 0,
+          data: {
+            tag: 'breadcrumb',
+            payload: breadcrumb,
+            metric: true,
+          },
+        });
+      });
+    }
+
+    return res;
+  }
+
+  /**
+   * This will get the parametrized route name of the current page.
+   * This is only available if performance is enabled, and if an instrumented router is used.
+   */
+   getCurrentRoute() {
+    const lastTransaction = this.lastTransaction || getCurrentHub().getScope().getTransaction();
+    if (!lastTransaction || !['route', 'custom'].includes(lastTransaction.metadata.source)) {
+      return undefined;
+    }
+
+    return lastTransaction.name;
+  }
+
   /**
    * Initialize and start all listeners to varying events (DOM,
    * Performance Observer, Recording, Sentry SDK, etc)
@@ -7533,7 +7635,7 @@ class ReplayContainer  {
    */
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
-      void addEvent(this, {
+      void this.throttledAddEvent({
         type: EventType$1.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
@@ -7732,8 +7834,8 @@ class ReplayContainer  {
    __init18() {this._onMutationHandler = (mutations) => {
     const count = mutations.length;
 
-    const mutationLimit = this._options._experiments.mutationLimit || 0;
-    const mutationBreadcrumbLimit = this._options._experiments.mutationBreadcrumbLimit || 1000;
+    const mutationLimit = this._options.mutationLimit;
+    const mutationBreadcrumbLimit = this._options.mutationBreadcrumbLimit;
     const overMutationLimit = mutationLimit && count > mutationLimit;
 
     // Create a breadcrumb if a lot of mutations happen at the same time
@@ -7743,15 +7845,15 @@ class ReplayContainer  {
         category: 'replay.mutations',
         data: {
           count,
+          limit: overMutationLimit,
         },
       });
       this._createCustomBreadcrumb(breadcrumb);
     }
 
+    // Stop replay if over the mutation limit
     if (overMutationLimit) {
-      // We want to skip doing an incremental snapshot if there are too many mutations
-      // Instead, we do a full snapshot
-      this._triggerFullSnapshot(false);
+      void this.stop('mutationLimit');
       return false;
     }
 
@@ -7905,6 +8007,9 @@ class Replay  {
     maskAllInputs = true,
     blockAllMedia = true,
 
+    mutationBreadcrumbLimit = 750,
+    mutationLimit = 10000,
+
     networkDetailAllowUrls = [],
     networkCaptureBodies = true,
     networkRequestHeaders = [],
@@ -7972,6 +8077,8 @@ class Replay  {
       blockAllMedia,
       maskAllInputs,
       maskAllText,
+      mutationBreadcrumbLimit,
+      mutationLimit,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),