@sentry/replay 7.61.1 → 7.62.0

package/esm/index.js

@@ -4025,21 +4025,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 +4078,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 +4128,7 @@ class EventBufferArray  {
    clear() {
     this.events = [];
     this._totalSize = 0;
+    this.hasCheckout = false;
   }
 
   /** @inheritdoc */
@@ -4220,11 +4248,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 +4314,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 +4370,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();
@@ -4599,7 +4640,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 +4676,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 +4689,7 @@ function getSession({
     sessionSampleRate,
     allowBuffering,
   });
-  logInfo('[Replay] Created new session', traceInternals);
+  logInfoNextTick('[Replay] Created new session', traceInternals);
 
   return { type: 'new', session: newSession };
 }
@@ -4687,8 +4728,9 @@ async function addEvent(
   }
 
   try {
-    if (isCheckout) {
+    if (isCheckout && replay.recordingMode === 'buffer') {
       replay.eventBuffer.clear();
+      replay.eventBuffer.hasCheckout = true;
     }
 
     const replayOptions = replay.getOptions();
@@ -7264,7 +7306,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 +7330,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 +7359,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;
 
@@ -8139,6 +8184,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 +8196,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 +8205,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