@sentry/replay 7.54.0 → 7.55.1

package/esm/index.js

@@ -38,6 +38,11 @@ const NETWORK_BODY_MAX_SIZE = 150000;
 /* The max size of a single console arg that is captured. Any arg larger than this will be truncated. */
 const CONSOLE_ARG_MAX_SIZE = 5000;
 
+/* Min. time to wait before we consider something a slow click. */
+const SLOW_CLICK_THRESHOLD = 3000;
+/* For scroll actions after a click, we only look for a very short time period to detect programmatic scrolling. */
+const SLOW_CLICK_SCROLL_TIMEOUT = 300;
+
 var NodeType$1;
 (function (NodeType) {
     NodeType[NodeType["Document"] = 0] = "Document";
@@ -991,7 +996,7 @@ function skipAttribute(tagName, attributeName, value) {
     return ((tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay');
 }
 
-var EventType$1;
+var EventType;
 (function (EventType) {
     EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
     EventType[EventType["Load"] = 1] = "Load";
@@ -1000,7 +1005,7 @@ var EventType$1;
     EventType[EventType["Meta"] = 4] = "Meta";
     EventType[EventType["Custom"] = 5] = "Custom";
     EventType[EventType["Plugin"] = 6] = "Plugin";
-})(EventType$1 || (EventType$1 = {}));
+})(EventType || (EventType = {}));
 var IncrementalSource;
 (function (IncrementalSource) {
     IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
@@ -2973,17 +2978,17 @@ function record(options = {}) {
     wrappedEmit = (e, isCheckout) => {
         var _a;
         if (((_a = mutationBuffers[0]) === null || _a === void 0 ? void 0 : _a.isFrozen()) &&
-            e.type !== EventType$1.FullSnapshot &&
-            !(e.type === EventType$1.IncrementalSnapshot &&
+            e.type !== EventType.FullSnapshot &&
+            !(e.type === EventType.IncrementalSnapshot &&
                 e.data.source === IncrementalSource.Mutation)) {
             mutationBuffers.forEach((buf) => buf.unfreeze());
         }
         emit(eventProcessor(e), isCheckout);
-        if (e.type === EventType$1.FullSnapshot) {
+        if (e.type === EventType.FullSnapshot) {
             lastFullSnapshotEvent = e;
             incrementalSnapshotCount = 0;
         }
-        else if (e.type === EventType$1.IncrementalSnapshot) {
+        else if (e.type === EventType.IncrementalSnapshot) {
             if (e.data.source === IncrementalSource.Mutation &&
                 e.data.isAttachIframe) {
                 return;
@@ -2999,16 +3004,16 @@ function record(options = {}) {
     };
     const wrappedMutationEmit = (m) => {
         wrappedEmit(wrapEvent({
-            type: EventType$1.IncrementalSnapshot,
+            type: EventType.IncrementalSnapshot,
             data: Object.assign({ source: IncrementalSource.Mutation }, m),
         }));
     };
     const wrappedScrollEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType$1.IncrementalSnapshot,
+        type: EventType.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.Scroll }, p),
     }));
     const wrappedCanvasMutationEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType$1.IncrementalSnapshot,
+        type: EventType.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
     }));
     const iframeManager = new IframeManager({
@@ -3053,7 +3058,7 @@ function record(options = {}) {
     takeFullSnapshot = (isCheckout = false) => {
         var _a, _b, _c, _d;
         wrappedEmit(wrapEvent({
-            type: EventType$1.Meta,
+            type: EventType.Meta,
             data: {
                 href: window.location.href,
                 width: getWindowWidth(),
@@ -3096,7 +3101,7 @@ function record(options = {}) {
         }
         mirror.map = idNodeMap;
         wrappedEmit(wrapEvent({
-            type: EventType$1.FullSnapshot,
+            type: EventType.FullSnapshot,
             data: {
                 node,
                 initialOffset: {
@@ -3121,7 +3126,7 @@ function record(options = {}) {
         const handlers = [];
         handlers.push(on('DOMContentLoaded', () => {
             wrappedEmit(wrapEvent({
-                type: EventType$1.DomContentLoaded,
+                type: EventType.DomContentLoaded,
                 data: {},
             }));
         }));
@@ -3131,40 +3136,40 @@ function record(options = {}) {
                 onMutation,
                 mutationCb: wrappedMutationEmit,
                 mousemoveCb: (positions, source) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: {
                         source,
                         positions,
                     },
                 })),
                 mouseInteractionCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MouseInteraction }, d),
                 })),
                 scrollCb: wrappedScrollEmit,
                 viewportResizeCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.ViewportResize }, d),
                 })),
                 inputCb: (v) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Input }, v),
                 })),
                 mediaInteractionCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MediaInteraction }, p),
                 })),
                 styleSheetRuleCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleSheetRule }, r),
                 })),
                 styleDeclarationCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleDeclaration }, r),
                 })),
                 canvasMutationCb: wrappedCanvasMutationEmit,
                 fontCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Font }, p),
                 })),
                 blockClass,
@@ -3197,7 +3202,7 @@ function record(options = {}) {
                     observer: p.observer,
                     options: p.options,
                     callback: (payload) => wrappedEmit(wrapEvent({
-                        type: EventType$1.Plugin,
+                        type: EventType.Plugin,
                         data: {
                             plugin: p.name,
                             payload,
@@ -3225,7 +3230,7 @@ function record(options = {}) {
         else {
             handlers.push(on('load', () => {
                 wrappedEmit(wrapEvent({
-                    type: EventType$1.Load,
+                    type: EventType.Load,
                     data: {},
                 }));
                 init();
@@ -3244,7 +3249,7 @@ record.addCustomEvent = (tag, payload) => {
         throw new Error('please add custom event after start recording');
     }
     wrappedEmit(wrapEvent({
-        type: EventType$1.Custom,
+        type: EventType.Custom,
         data: {
             tag,
             payload,
@@ -3301,7 +3306,7 @@ function addBreadcrumbEvent(replay, breadcrumb) {
 
   replay.addUpdate(() => {
     void replay.throttledAddEvent({
-      type: EventType$1.Custom,
+      type: EventType.Custom,
       // TODO: We were converting from ms to seconds for breadcrumbs, spans,
       // but maybe we should just keep them as milliseconds
       timestamp: (breadcrumb.timestamp || 0) * 1000,
@@ -3423,15 +3428,16 @@ function handleSlowClick(
   addBreadcrumbEvent(replay, breadcrumb);
 }
 
-const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
+const SLOW_CLICK_TAGS = ['A', 'BUTTON', 'INPUT'];
 
+/** exported for tests only */
 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') || '')) {
+  if (!SLOW_CLICK_TAGS.includes(node.tagName)) {
     return true;
   }
 
-  if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
+  // 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;
   }
 
@@ -3464,6 +3470,8 @@ const ATTRIBUTES_TO_RECORD = new Set([
   'title',
   'data-test-id',
   'data-testid',
+  'disabled',
+  'aria-disabled',
 ]);
 
 /**
@@ -3489,14 +3497,14 @@ function getAttributesToRecord(attributes) {
 const handleDomListener = (
   replay,
 ) => {
-  const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
+  const { slowClickTimeout, slowClickIgnoreSelectors } = replay.getOptions();
 
-  const slowClickConfig = slowClickExperiment
+  const slowClickConfig = slowClickTimeout
     ? {
-        threshold: slowClickExperiment.threshold,
-        timeout: slowClickExperiment.timeout,
-        scrollTimeout: slowClickExperiment.scrollTimeout,
-        ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
+        threshold: Math.min(SLOW_CLICK_THRESHOLD, slowClickTimeout),
+        timeout: slowClickTimeout,
+        scrollTimeout: SLOW_CLICK_SCROLL_TIMEOUT,
+        ignoreSelector: slowClickIgnoreSelectors ? slowClickIgnoreSelectors.join(',') : '',
       }
     : undefined;
 
@@ -3625,7 +3633,10 @@ function handleKeyboardEvent(replay, event) {
     return;
   }
 
-  replay.triggerUserActivity();
+  // Update user activity, but do not restart recording as it can create
+  // noisy/low-value replays (e.g. user comes back from idle, hits alt-tab, new
+  // session with a single "keydown" breadcrumb is created)
+  replay.updateUserActivity();
 
   const breadcrumb = getKeyboardBreadcrumb(event);
 
@@ -4376,11 +4387,13 @@ function getSession({
     // within "max session time").
     const isExpired = isSessionExpired(session, timeouts);
 
-    if (!isExpired) {
+    if (!isExpired || (allowBuffering && session.shouldRefresh)) {
       return { type: 'saved', session };
     } else if (!session.shouldRefresh) {
-      // In this case, stop
-      // This is the case if we have an error session that is completed (=triggered an error)
+      // This is the case if we have an error session that is completed
+      // (=triggered an error). Session will continue as session-based replay,
+      // and when this session is expired, it will not be renewed until user
+      // reloads.
       const discardedSession = makeSession({ sampled: false });
       return { type: 'new', session: discardedSession };
     } else {
@@ -4398,22 +4411,9 @@ 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.
- */
+function isCustomEvent(event) {
+  return event.type === EventType.Custom;
+}
 
 /**
  * Add an event to the event buffer.
@@ -4452,7 +4452,7 @@ async function addEvent(
     const replayOptions = replay.getOptions();
 
     const eventAfterPossibleCallback =
-      typeof replayOptions.beforeAddRecordingEvent === 'function' && event.type === EventType.Custom
+      typeof replayOptions.beforeAddRecordingEvent === 'function' && isCustomEvent(event)
         ? replayOptions.beforeAddRecordingEvent(event)
         : event;
 
@@ -4667,7 +4667,7 @@ function createPerformanceSpans(
 ) {
   return entries.map(({ type, start, end, name, data }) => {
     const response = replay.throttledAddEvent({
-      type: EventType$1.Custom,
+      type: EventType.Custom,
       timestamp: start,
       data: {
         tag: 'performanceSpan',
@@ -5901,6 +5901,10 @@ function _isFetchHint(hint) {
 
 let _LAST_BREADCRUMB = null;
 
+function isBreadcrumbWithCategory(breadcrumb) {
+  return !!breadcrumb.category;
+}
+
 const handleScopeListener =
   (replay) =>
   (scope) => {
@@ -5936,9 +5940,9 @@ function handleScope(scope) {
   _LAST_BREADCRUMB = newBreadcrumb;
 
   if (
-    newBreadcrumb.category &&
-    (['fetch', 'xhr', 'sentry.event', 'sentry.transaction'].includes(newBreadcrumb.category) ||
-      newBreadcrumb.category.startsWith('ui.'))
+    !isBreadcrumbWithCategory(newBreadcrumb) ||
+    ['fetch', 'xhr', 'sentry.event', 'sentry.transaction'].includes(newBreadcrumb.category) ||
+    newBreadcrumb.category.startsWith('ui.')
   ) {
     return null;
   }
@@ -5951,7 +5955,9 @@ function handleScope(scope) {
 }
 
 /** exported for tests only */
-function normalizeConsoleBreadcrumb(breadcrumb) {
+function normalizeConsoleBreadcrumb(
+  breadcrumb,
+) {
   const args = breadcrumb.data && breadcrumb.data.arguments;
 
   if (!Array.isArray(args) || args.length === 0) {
@@ -6400,6 +6406,10 @@ function getHandleRecordingEmit(replay) {
         // 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.
+        // TODO: We should check `recordingMode` here and do nothing if it's
+        // buffer, instead of checking inside of timeout, this will make our
+        // tests a bit cleaner as we will need to wait on the delay in order to
+        // do nothing.
         setTimeout(() => replay.conditionalFlush(), options._experiments.delayFlushOnCheckout);
 
         // Cancel any previously debounced flushes to ensure there are no [near]
@@ -7166,6 +7176,8 @@ class ReplayContainer  {
       return this.flushImmediate();
     }
 
+    const activityTime = Date.now();
+
     // Allow flush to complete before resuming as a session recording, otherwise
     // the checkout from `startRecording` may be included in the payload.
     // Prefer to keep the error replay as a separate (and smaller) segment
@@ -7187,6 +7199,18 @@ class ReplayContainer  {
     // Once this session ends, we do not want to refresh it
     if (this.session) {
       this.session.shouldRefresh = false;
+
+      // It's possible that the session lifespan is > max session lifespan
+      // because we have been buffering beyond max session lifespan (we ignore
+      // expiration given that `shouldRefresh` is true). Since we flip
+      // `shouldRefresh`, the session could be considered expired due to
+      // lifespan, which is not what we want. Update session start date to be
+      // the current timestamp, so that session is not considered to be
+      // expired. This means that max replay duration can be MAX_SESSION_LIFE +
+      // (length of buffer), which we are ok with.
+      this._updateUserActivity(activityTime);
+      this._updateSessionActivity(activityTime);
+      this.session.started = activityTime;
       this._maybeSaveSession();
     }
 
@@ -7250,6 +7274,18 @@ class ReplayContainer  {
     this._updateSessionActivity();
   }
 
+  /**
+   * Updates the user activity timestamp *without* resuming
+   * recording. Some user events (e.g. keydown) can be create
+   * low-value replays that only contain the keypress as a
+   * breadcrumb. Instead this would require other events to
+   * create a new replay after a session has expired.
+   */
+   updateUserActivity() {
+    this._updateUserActivity();
+    this._updateSessionActivity();
+  }
+
   /**
    * Only flush if `this.recordingMode === 'session'`
    */
@@ -7370,7 +7406,7 @@ class ReplayContainer  {
 
       this.addUpdate(() => {
         void addEvent(this, {
-          type: EventType$1.Custom,
+          type: EventType.Custom,
           timestamp: breadcrumb.timestamp || 0,
           data: {
             tag: 'breadcrumb',
@@ -7440,7 +7476,7 @@ class ReplayContainer  {
       stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
       sessionSampleRate: this._options.sessionSampleRate,
-      allowBuffering: this._options.errorSampleRate > 0,
+      allowBuffering: this._options.errorSampleRate > 0 || this.recordingMode === 'buffer',
     });
 
     // If session was newly created (i.e. was not loaded from storage), then
@@ -7636,7 +7672,7 @@ class ReplayContainer  {
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
       void this.throttledAddEvent({
-        type: EventType$1.Custom,
+        type: EventType.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
           tag: 'breadcrumb',
@@ -8010,6 +8046,9 @@ class Replay  {
     mutationBreadcrumbLimit = 750,
     mutationLimit = 10000,
 
+    slowClickTimeout = 7000,
+    slowClickIgnoreSelectors = [],
+
     networkDetailAllowUrls = [],
     networkCaptureBodies = true,
     networkRequestHeaders = [],
@@ -8079,6 +8118,8 @@ class Replay  {
       maskAllText,
       mutationBreadcrumbLimit,
       mutationLimit,
+      slowClickTimeout,
+      slowClickIgnoreSelectors,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),