@sentry/replay 7.61.1 → 7.63.0

package/esm/index.js

@@ -3496,6 +3496,14 @@ class ClickDetector  {
       clickCount: 0,
       node,
     };
+
+    // If there was a click in the last 1s on the same element, ignore it - only keep a single reference per second
+    if (
+      this._clicks.some(click => click.node === newClick.node && Math.abs(click.timestamp - newClick.timestamp) < 1)
+    ) {
+      return;
+    }
+
     this._clicks.push(newClick);
 
     // If this is the first new click, set a timeout to check for multi clicks
@@ -4025,21 +4033,45 @@ function logInfo(message, shouldAddBreadcrumb) {
   logger.info(message);
 
   if (shouldAddBreadcrumb) {
-    const hub = getCurrentHub();
-    hub.addBreadcrumb(
-      {
-        category: 'console',
-        data: {
-          logger: 'replay',
-        },
-        level: 'info',
-        message,
-      },
-      { level: 'info' },
-    );
+    addBreadcrumb(message);
+  }
+}
+
+/**
+ * Log a message, and add a breadcrumb in the next tick.
+ * This is necessary when the breadcrumb may be added before the replay is initialized.
+ */
+function logInfoNextTick(message, shouldAddBreadcrumb) {
+  if (!(typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__)) {
+    return;
+  }
+
+  logger.info(message);
+
+  if (shouldAddBreadcrumb) {
+    // Wait a tick here to avoid race conditions for some initial logs
+    // which may be added before replay is initialized
+    setTimeout(() => {
+      addBreadcrumb(message);
+    }, 0);
   }
 }
 
+function addBreadcrumb(message) {
+  const hub = getCurrentHub();
+  hub.addBreadcrumb(
+    {
+      category: 'console',
+      data: {
+        logger: 'replay',
+      },
+      level: 'info',
+      message,
+    },
+    { level: 'info' },
+  );
+}
+
 /** This error indicates that the event buffer size exceeded the limit.. */
 class EventBufferSizeExceededError extends Error {
    constructor() {
@@ -4054,9 +4086,12 @@ class EventBufferSizeExceededError extends Error {
 class EventBufferArray  {
   /** All the events that are buffered to be sent. */
 
+  /** @inheritdoc */
+
    constructor() {
     this.events = [];
     this._totalSize = 0;
+    this.hasCheckout = false;
   }
 
   /** @inheritdoc */
@@ -4101,6 +4136,7 @@ class EventBufferArray  {
    clear() {
     this.events = [];
     this._totalSize = 0;
+    this.hasCheckout = false;
   }
 
   /** @inheritdoc */
@@ -4220,11 +4256,13 @@ class WorkerHandler {
  * Exported only for testing.
  */
 class EventBufferCompressionWorker  {
+  /** @inheritdoc */
 
    constructor(worker) {
     this._worker = new WorkerHandler(worker);
     this._earliestTimestamp = null;
     this._totalSize = 0;
+    this.hasCheckout = false;
   }
 
   /** @inheritdoc */
@@ -4284,6 +4322,8 @@ class EventBufferCompressionWorker  {
    clear() {
     this._earliestTimestamp = null;
     this._totalSize = 0;
+    this.hasCheckout = false;
+
     // We do not wait on this, as we assume the order of messages is consistent for the worker
     void this._worker.postMessage('clear');
   }
@@ -4338,6 +4378,15 @@ class EventBufferProxy  {
     return this._used.hasEvents;
   }
 
+  /** @inheritdoc */
+   get hasCheckout() {
+    return this._used.hasCheckout;
+  }
+  /** @inheritdoc */
+   set hasCheckout(value) {
+    this._used.hasCheckout = value;
+  }
+
   /** @inheritDoc */
    destroy() {
     this._fallback.destroy();
@@ -4393,13 +4442,15 @@ class EventBufferProxy  {
 
   /** Switch the used buffer to the compression worker. */
    async _switchToCompressionWorker() {
-    const { events } = this._fallback;
+    const { events, hasCheckout } = this._fallback;
 
     const addEventPromises = [];
     for (const event of events) {
       addEventPromises.push(this._compression.addEvent(event));
     }
 
+    this._compression.hasCheckout = hasCheckout;
+
     // We switch over to the new buffer immediately - any further events will be added
     // after the previously buffered ones
     this._used = this._compression;
@@ -4599,7 +4650,7 @@ function fetchSession(traceInternals) {
 
     const sessionObj = JSON.parse(sessionStringFromStorage) ;
 
-    logInfo('[Replay] Loading existing session', traceInternals);
+    logInfoNextTick('[Replay] Loading existing session', traceInternals);
 
     return makeSession(sessionObj);
   } catch (e) {
@@ -4635,10 +4686,10 @@ function getSession({
       // and when this session is expired, it will not be renewed until user
       // reloads.
       const discardedSession = makeSession({ sampled: false });
-      logInfo('[Replay] Session should not be refreshed', traceInternals);
+      logInfoNextTick('[Replay] Session should not be refreshed', traceInternals);
       return { type: 'new', session: discardedSession };
     } else {
-      logInfo('[Replay] Session has expired', traceInternals);
+      logInfoNextTick('[Replay] Session has expired', traceInternals);
     }
     // Otherwise continue to create a new session
   }
@@ -4648,7 +4699,7 @@ function getSession({
     sessionSampleRate,
     allowBuffering,
   });
-  logInfo('[Replay] Created new session', traceInternals);
+  logInfoNextTick('[Replay] Created new session', traceInternals);
 
   return { type: 'new', session: newSession };
 }
@@ -4686,11 +4737,24 @@ async function addEvent(
     return null;
   }
 
+  // Throw out events that are +60min from the initial timestamp
+  if (timestampInMs > replay.getContext().initialTimestamp + replay.timeouts.maxSessionLife) {
+    logInfo(
+      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxSessionLife`,
+      replay.getOptions()._experiments.traceInternals,
+    );
+    return null;
+  }
+
   try {
-    if (isCheckout) {
+    if (isCheckout && replay.recordingMode === 'buffer') {
       replay.eventBuffer.clear();
     }
 
+    if (isCheckout) {
+      replay.eventBuffer.hasCheckout = true;
+    }
+
     const replayOptions = replay.getOptions();
 
     const eventAfterPossibleCallback = maybeApplyCallback(event, replayOptions.beforeAddRecordingEvent);
@@ -4704,7 +4768,7 @@ async function addEvent(
     const reason = error && error instanceof EventBufferSizeExceededError ? 'addEventSizeExceeded' : 'addEvent';
 
     (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
-    await replay.stop(reason);
+    await replay.stop({ reason });
 
     const client = getCurrentHub().getClient();
 
@@ -7264,7 +7328,10 @@ class ReplayContainer  {
       this.recordingMode = 'buffer';
     }
 
-    logInfo(`[Replay] Starting replay in ${this.recordingMode} mode`, this._options._experiments.traceInternals);
+    logInfoNextTick(
+      `[Replay] Starting replay in ${this.recordingMode} mode`,
+      this._options._experiments.traceInternals,
+    );
 
     this._initializeRecording();
   }
@@ -7285,7 +7352,7 @@ class ReplayContainer  {
       throw new Error('Replay buffering is in progress, call `flush()` to save the replay');
     }
 
-    logInfo('[Replay] Starting replay in session mode', this._options._experiments.traceInternals);
+    logInfoNextTick('[Replay] Starting replay in session mode', this._options._experiments.traceInternals);
 
     const previousSessionId = this.session && this.session.id;
 
@@ -7314,7 +7381,7 @@ class ReplayContainer  {
       throw new Error('Replay recording is already in progress');
     }
 
-    logInfo('[Replay] Starting replay in buffer mode', this._options._experiments.traceInternals);
+    logInfoNextTick('[Replay] Starting replay in buffer mode', this._options._experiments.traceInternals);
 
     const previousSessionId = this.session && this.session.id;
 
@@ -7379,7 +7446,7 @@ class ReplayContainer  {
    * Currently, this needs to be manually called (e.g. for tests). Sentry SDK
    * does not support a teardown
    */
-   async stop(reason) {
+   async stop({ forceFlush = false, reason } = {}) {
     if (!this._isEnabled) {
       return;
     }
@@ -7399,7 +7466,7 @@ 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.
-      if (this.recordingMode === 'session') {
+      if (forceFlush) {
         await this._flush({ force: true });
       }
 
@@ -7788,7 +7855,7 @@ class ReplayContainer  {
     this.session = session;
 
     if (!this.session.sampled) {
-      void this.stop('session not refreshed');
+      void this.stop({ reason: 'session not refreshed' });
       return false;
     }
 
@@ -8078,6 +8145,15 @@ class ReplayContainer  {
       // Note this empties the event buffer regardless of outcome of sending replay
       const recordingData = await this.eventBuffer.finish();
 
+      const timestamp = Date.now();
+
+      // Check total duration again, to avoid sending outdated stuff
+      // We leave 30s wiggle room to accomodate late flushing etc.
+      // This _could_ happen when the browser is suspended during flushing, in which case we just want to stop
+      if (timestamp - this._context.initialTimestamp > this.timeouts.maxSessionLife + 30000) {
+        throw new Error('Session is too long, not sending replay');
+      }
+
       // NOTE: Copy values from instance members, as it's possible they could
       // change before the flush finishes.
       const replayId = this.session.id;
@@ -8093,7 +8169,7 @@ class ReplayContainer  {
         eventContext,
         session: this.session,
         options: this.getOptions(),
-        timestamp: Date.now(),
+        timestamp,
       });
     } catch (err) {
       this._handleException(err);
@@ -8101,7 +8177,7 @@ class ReplayContainer  {
       // This means we retried 3 times and all of them failed,
       // or we ran into a problem we don't want to retry, like rate limiting.
       // In this case, we want to completely stop the replay - otherwise, we may get inconsistent segments
-      void this.stop('sendReplay');
+      void this.stop({ reason: 'sendReplay' });
 
       const client = getCurrentHub().getClient();
 
@@ -8139,6 +8215,9 @@ class ReplayContainer  {
     const now = Date.now();
     const duration = now - start;
 
+    // A flush is about to happen, cancel any queued flushes
+    this._debouncedFlush.cancel();
+
     // If session is too short, or too long (allow some wiggle room over maxSessionLife), do not send it
     // This _should_ not happen, but it may happen if flush is triggered due to a page activity change or similar
     const tooShort = duration < this._options.minReplayDuration;
@@ -8148,6 +8227,7 @@ class ReplayContainer  {
         `[Replay] Session duration (${Math.floor(duration / 1000)}s) is too ${
           tooShort ? 'short' : 'long'
         }, not sending replay.`,
+        this._options._experiments.traceInternals,
       );
 
       if (tooShort) {
@@ -8156,8 +8236,11 @@ class ReplayContainer  {
       return;
     }
 
-    // A flush is about to happen, cancel any queued flushes
-    this._debouncedFlush.cancel();
+    const eventBuffer = this.eventBuffer;
+    if (eventBuffer && this.session.segmentId === 0 && !eventBuffer.hasCheckout) {
+      logInfo('[Replay] Flushing initial segment without checkout.', this._options._experiments.traceInternals);
+      // TODO FN: Evaluate if we want to stop here, or remove this again?
+    }
 
     // this._flushLock acts as a lock so that future calls to `_flush()`
     // will be blocked until this promise resolves
@@ -8213,7 +8296,7 @@ class ReplayContainer  {
 
     // Stop replay if over the mutation limit
     if (overMutationLimit) {
-      void this.stop('mutationLimit');
+      void this.stop({ reason: 'mutationLimit', forceFlush: this.recordingMode === 'session' });
       return false;
     }
 
@@ -8564,7 +8647,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
       return Promise.resolve();
     }
 
-    return this._replay.stop();
+    return this._replay.stop({ forceFlush: this._replay.recordingMode === 'session' });
   }
 
   /**