@sentry/replay 7.52.1 → 7.53.1

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');
@@ -6305,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.
  *
@@ -6395,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
@@ -7024,7 +7059,9 @@ class ReplayContainer  {
       this._debouncedFlush.cancel();
       // See comment above re: `_isEnabled`, we "force" a flush, ignoring the
       // `_isEnabled` state of the plugin since it was disabled above.
-      await this._flush({ force: true });
+      if (this.recordingMode === 'session') {
+        await this._flush({ force: true });
+      }
 
       // After flush, destroy event buffer
       this.eventBuffer && this.eventBuffer.destroy();
@@ -7160,7 +7197,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.
@@ -7171,6 +7218,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;
@@ -7420,7 +7474,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();
   }
 
   /**
@@ -7504,17 +7558,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
    */
@@ -7876,6 +7919,8 @@ class Replay  {
     ignore = [],
     maskFn,
 
+    beforeAddRecordingEvent,
+
     // eslint-disable-next-line deprecation/deprecation
     blockClass,
     // eslint-disable-next-line deprecation/deprecation
@@ -7933,6 +7978,7 @@ class Replay  {
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),
       networkResponseHeaders: _getMergedNetworkHeaders(networkResponseHeaders),
+      beforeAddRecordingEvent,
 
       _experiments,
     };