@sentry/replay 7.52.0 → 7.53.0

package/README.md

@@ -195,17 +195,17 @@ The following options can be configured as options to the integration, in `new R
 
 The following options can be configured as options to the integration, in `new Replay({})`:
 
-| key              | type                     | default                                 | description                                                                                                                                                                                         |
-| ---------------- | ------------------------ | -----------------------------------     | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| maskAllText      | boolean                  | `true`                                  | Mask _all_ text content. Will pass text content through `maskTextFn` before sending to server.                                                                                                       |
-| maskAllInputs    | boolean                  | `true`                                  | Mask values of `<input>` elements. Passes input values through `maskInputFn` before sending to server.                                                                                               |
-| blockAllMedia    | boolean                  | `true`                                  | Block _all_ media elements (`img, svg, video, object, picture, embed, map, audio`)
-| maskTextFn       | (text: string) => string | `(text) => '*'.repeat(text.length)`     | Function to customize how text content is masked before sending to server. By default, masks text with `*`.                                                                                         |
-| block            | Array<string>            | `.sentry-block, [data-sentry-block]`    | Redact any elements that match the DOM selectors. See [privacy](#blocking) section for an example.                                                                                                                                                     |
-| unblock          | Array<string>            | `.sentry-unblock, [data-sentry-unblock]`| Do not redact any elements that match the DOM selectors. Useful when using `blockAllMedia`. See [privacy](#blocking) section for an example.                                                                                                                                                     |
-| mask             | Array<string>            | `.sentry-mask, [data-sentry-mask]`      | Mask all elements that match the given DOM selectors. See [privacy](#masking) section for an example.                                                                                                                                                        |
-| unmask           | Array<string>            | `.sentry-unmask, [data-sentry-unmask]`  | Unmask all elements that match the given DOM selectors. Useful when using `maskAllText`. See [privacy](#masking) section for an example.                                                                                                                                                        |
-| ignore           | Array<string>            | `.sentry-ignore, [data-sentry-ignore]`  | Ignores all events on the matching input fields. See [privacy](#ignoring) section for an example.                                                                                                                                                     |
+| key              | type                     | default                                 | description                                                                                                                                  |
+| ---------------- | ------------------------ | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| maskAllText      | boolean                  | `true`                                  | Mask _all_ text content. Will pass text content through `maskFn` before sending to server.                                                   |
+| maskAllInputs    | boolean                  | `true`                                  | Mask values of `<input>` elements. Passes input values through `maskInputFn` before sending to server.                                       |
+| blockAllMedia    | boolean                  | `true`                                  | Block _all_ media elements (`img, svg, video, object, picture, embed, map, audio`)                                                           |
+| maskFn           | (text: string) => string | `(text) => '*'.repeat(text.length)`     | Function to customize how text content is masked before sending to server. By default, masks text with `*`.                                  |
+| block            | Array<string>            | `.sentry-block, [data-sentry-block]`    | Redact any elements that match the DOM selectors. See [privacy](#blocking) section for an example.                                           |
+| unblock          | Array<string>            | `.sentry-unblock, [data-sentry-unblock]`| Do not redact any elements that match the DOM selectors. Useful when using `blockAllMedia`. See [privacy](#blocking) section for an example. |
+| mask             | Array<string>            | `.sentry-mask, [data-sentry-mask]`      | Mask all elements that match the given DOM selectors. See [privacy](#masking) section for an example.                                        |
+| unmask           | Array<string>            | `.sentry-unmask, [data-sentry-unmask]`  | Unmask all elements that match the given DOM selectors. Useful when using `maskAllText`. See [privacy](#masking) section for an example.     |
+| ignore           | Array<string>            | `.sentry-ignore, [data-sentry-ignore]`  | Ignores all events on the matching input fields. See [privacy](#ignoring) section for an example.                                            |
 
 #### Deprecated options
 In order to streamline our privacy options, the following have been deprecated in favor for the respective options above.

package/cjs/index.js

@@ -3287,6 +3287,23 @@ 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.
  */
@@ -3329,7 +3346,18 @@ async function addEvent(
       replay.eventBuffer.clear();
     }
 
-    return await replay.eventBuffer.addEvent(event);
+    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__) && utils.logger.error(error);
     await replay.stop('addEvent');
@@ -3374,6 +3402,141 @@ function addBreadcrumbEvent(replay, breadcrumb) {
   });
 }
 
+/**
+ * Detect a slow click on a button/a tag,
+ * and potentially create a corresponding breadcrumb.
+ */
+function detectSlowClick(
+  replay,
+  config,
+  clickBreadcrumb,
+  node,
+) {
+  if (ignoreElement(node, config)) {
+    return;
+  }
+
+  /*
+    We consider a slow click a click on a button/a, which does not trigger one of:
+     - DOM mutation
+     - Scroll (within 100ms)
+     Within the given threshold time.
+     After time timeout time, we stop listening and mark it as a slow click anyhow.
+  */
+
+  let cleanup = () => {
+    // replaced further down
+  };
+
+  // After timeout time, def. consider this a slow click, and stop watching for mutations
+  const timeout = setTimeout(() => {
+    handleSlowClick(replay, clickBreadcrumb, config.timeout, 'timeout');
+    cleanup();
+  }, config.timeout);
+
+  const mutationHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.threshold, config.timeout, 'mutation');
+    cleanup();
+  };
+
+  const scrollHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.scrollTimeout, config.timeout, 'scroll');
+    cleanup();
+  };
+
+  const obs = new MutationObserver(mutationHandler);
+
+  obs.observe(WINDOW.document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  WINDOW.addEventListener('scroll', scrollHandler);
+
+  // Stop listening to scroll timeouts early
+  const scrollTimeout = setTimeout(() => {
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  }, config.scrollTimeout);
+
+  cleanup = () => {
+    clearTimeout(timeout);
+    clearTimeout(scrollTimeout);
+    obs.disconnect();
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  };
+}
+
+function maybeHandleSlowClick(
+  replay,
+  clickBreadcrumb,
+  threshold,
+  timeout,
+  endReason,
+) {
+  const now = Date.now();
+  const timeAfterClickMs = now - clickBreadcrumb.timestamp * 1000;
+
+  if (timeAfterClickMs > threshold) {
+    handleSlowClick(replay, clickBreadcrumb, Math.min(timeAfterClickMs, timeout), endReason);
+    return true;
+  }
+
+  return false;
+}
+
+function handleSlowClick(
+  replay,
+  clickBreadcrumb,
+  timeAfterClickMs,
+  endReason,
+) {
+  const breadcrumb = {
+    message: clickBreadcrumb.message,
+    timestamp: clickBreadcrumb.timestamp,
+    category: 'ui.slowClickDetected',
+    data: {
+      ...clickBreadcrumb.data,
+      url: WINDOW.location.href,
+      // TODO FN: add parametrized route, when possible
+      timeAfterClickMs,
+      endReason,
+    },
+  };
+
+  addBreadcrumbEvent(replay, breadcrumb);
+}
+
+const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
+
+function ignoreElement(node, config) {
+  // If <input> tag, we only want to consider input[type='submit'] & input[type='button']
+  if (node.tagName === 'INPUT' && !['submit', 'button'].includes(node.getAttribute('type') || '')) {
+    return true;
+  }
+
+  if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
+    return true;
+  }
+
+  // If <a> tag, detect special variants that may not lead to an action
+  // If target !== _self, we may open the link somewhere else, which would lead to no action
+  // Also, when downloading a file, we may not leave the page, but still not trigger an action
+  if (
+    node.tagName === 'A' &&
+    (node.hasAttribute('download') || (node.hasAttribute('target') && node.getAttribute('target') !== '_self'))
+  ) {
+    return true;
+  }
+
+  if (config.ignoreSelector && node.matches(config.ignoreSelector)) {
+    return true;
+  }
+
+  return false;
+}
+
 // Note that these are the serialized attributes and not attributes directly on
 // the DOM Node. Attributes we are interested in:
 const ATTRIBUTES_TO_RECORD = new Set([
@@ -3408,9 +3571,21 @@ function getAttributesToRecord(attributes) {
   return obj;
 }
 
-const handleDomListener =
-  (replay) =>
-  (handlerData) => {
+const handleDomListener = (
+  replay,
+) => {
+  const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
+
+  const slowClickConfig = slowClickExperiment
+    ? {
+        threshold: slowClickExperiment.threshold,
+        timeout: slowClickExperiment.timeout,
+        scrollTimeout: slowClickExperiment.scrollTimeout,
+        ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
+      }
+    : undefined;
+
+  return (handlerData) => {
     if (!replay.isEnabled()) {
       return;
     }
@@ -3421,8 +3596,21 @@ const handleDomListener =
       return;
     }
 
+    const isClick = handlerData.name === 'click';
+    const event = isClick && (handlerData.event );
+    // Ignore clicks if ctrl/alt/meta keys are held down as they alter behavior of clicks (e.g. open in new tab)
+    if (isClick && slowClickConfig && event && !event.altKey && !event.metaKey && !event.ctrlKey) {
+      detectSlowClick(
+        replay,
+        slowClickConfig,
+        result ,
+        getClickTargetNode(handlerData.event) ,
+      );
+    }
+
     addBreadcrumbEvent(replay, result);
   };
+};
 
 /** Get the base DOM breadcrumb. */
 function getBaseDomBreadcrumb(target, message) {
@@ -6145,23 +6333,6 @@ function debounce(func, wait, options) {
   return debounced;
 }
 
-/* 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.
- */
-
 /**
  * Handler for recording events.
  *
@@ -6235,6 +6406,30 @@ function getHandleRecordingEmit(replay) {
         }
       }
 
+      const options = replay.getOptions();
+
+      // TODO: We want this as an experiment so that we can test
+      // internally and create metrics before making this the default
+      if (options._experiments.delayFlushOnCheckout) {
+        // If the full snapshot is due to an initial load, we will not have
+        // a previous session ID. In this case, we want to buffer events
+        // for a set amount of time before flushing. This can help avoid
+        // capturing replays of users that immediately close the window.
+        setTimeout(() => replay.conditionalFlush(), options._experiments.delayFlushOnCheckout);
+
+        // Cancel any previously debounced flushes to ensure there are no [near]
+        // simultaneous flushes happening. The latter request should be
+        // insignificant in this case, so wait for additional user interaction to
+        // trigger a new flush.
+        //
+        // This can happen because there's no guarantee that a recording event
+        // happens first. e.g. a mouse click can happen and trigger a debounced
+        // flush before the checkout.
+        replay.cancelFlush();
+
+        return true;
+      }
+
       // Flush immediately so that we do not miss the first segment, otherwise
       // it can prevent loading on the UI. This will cause an increase in short
       // replays (e.g. opening and closing a tab quickly), but these can be
@@ -7000,7 +7195,17 @@ class ReplayContainer  {
   }
 
   /**
-   *
+   * Only flush if `this.recordingMode === 'session'`
+   */
+   conditionalFlush() {
+    if (this.recordingMode === 'buffer') {
+      return Promise.resolve();
+    }
+
+    return this.flushImmediate();
+  }
+
+  /**
    * Always flush via `_debouncedFlush` so that we do not have flushes triggered
    * from calling both `flush` and `_debouncedFlush`. Otherwise, there could be
    * cases of mulitple flushes happening closely together.
@@ -7011,6 +7216,13 @@ class ReplayContainer  {
     return this._debouncedFlush.flush() ;
   }
 
+  /**
+   * Cancels queued up flushes.
+   */
+   cancelFlush() {
+    this._debouncedFlush.cancel();
+  }
+
   /** Get the current sesion (=replay) ID */
    getSessionId() {
     return this.session && this.session.id;
@@ -7260,7 +7472,7 @@ class ReplayContainer  {
     // Send replay when the page/tab becomes hidden. There is no reason to send
     // replay if it becomes visible, since no actions we care about were done
     // while it was hidden
-    this._conditionalFlush();
+    void this.conditionalFlush();
   }
 
   /**
@@ -7344,17 +7556,6 @@ class ReplayContainer  {
     return Promise.all(createPerformanceSpans(this, createPerformanceEntries(entries)));
   }
 
-  /**
-   * Only flush if `this.recordingMode === 'session'`
-   */
-   _conditionalFlush() {
-    if (this.recordingMode === 'buffer') {
-      return;
-    }
-
-    void this.flushImmediate();
-  }
-
   /**
    * Clear _context
    */
@@ -7716,6 +7917,8 @@ class Replay  {
     ignore = [],
     maskFn,
 
+    beforeAddRecordingEvent,
+
     // eslint-disable-next-line deprecation/deprecation
     blockClass,
     // eslint-disable-next-line deprecation/deprecation
@@ -7773,6 +7976,7 @@ class Replay  {
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),
       networkResponseHeaders: _getMergedNetworkHeaders(networkResponseHeaders),
+      beforeAddRecordingEvent,
 
       _experiments,
     };