@sentry/replay 7.68.0 → 7.69.0

package/esm/index.js

@@ -4560,7 +4560,6 @@ function makeSession(session) {
   const lastActivity = session.lastActivity || now;
   const segmentId = session.segmentId || 0;
   const sampled = session.sampled;
-  const shouldRefresh = typeof session.shouldRefresh === 'boolean' ? session.shouldRefresh : true;
   const previousSessionId = session.previousSessionId;
 
   return {
@@ -4569,7 +4568,6 @@ function makeSession(session) {
     lastActivity,
     segmentId,
     sampled,
-    shouldRefresh,
     previousSessionId,
   };
 }
@@ -4671,47 +4669,22 @@ function isSessionExpired(
   );
 }
 
-/**
- * Check a session, and either return it or a refreshed version of it.
- * The refreshed version may be unsampled.
- * You can check if the session has changed by comparing the session IDs.
- */
-function maybeRefreshSession(
+/** If the session should be refreshed or not. */
+function shouldRefreshSession(
   session,
-  {
-    traceInternals,
-    maxReplayDuration,
-    sessionIdleExpire,
-  }
-
-,
-  sessionOptions,
+  { sessionIdleExpire, maxReplayDuration },
 ) {
   // If not expired, all good, just keep the session
   if (!isSessionExpired(session, { sessionIdleExpire, maxReplayDuration })) {
-    return session;
-  }
-
-  const isBuffering = session.sampled === 'buffer';
-
-  // If we are buffering & the session may be refreshed, just return it
-  if (isBuffering && session.shouldRefresh) {
-    return session;
+    return false;
   }
 
-  // If we are buffering & the session may not be refreshed (=it was converted to session previously already)
-  // We return an unsampled new session
-  if (isBuffering) {
-    logInfoNextTick('[Replay] Session should not be refreshed', traceInternals);
-    return makeSession({ sampled: false });
+  // If we are buffering & haven't ever flushed yet, always continue
+  if (session.sampled === 'buffer' && session.segmentId === 0) {
+    return false;
   }
 
-  // Else, we are not buffering, and the session is expired, so we need to create a new one
-  logInfoNextTick('[Replay] Session has expired, creating new one...', traceInternals);
-
-  const newSession = createSession(sessionOptions, { previousSessionId: session.id });
-
-  return newSession;
+  return true;
 }
 
 /**
@@ -4719,26 +4692,30 @@ function maybeRefreshSession(
  * Returns a session that may be unsampled.
  */
 function loadOrCreateSession(
-  currentSession,
   {
     traceInternals,
     sessionIdleExpire,
     maxReplayDuration,
+    previousSessionId,
   }
 
 ,
   sessionOptions,
 ) {
-  // If session exists and is passed, use it instead of always hitting session storage
-  const existingSession = currentSession || (sessionOptions.stickySession && fetchSession(traceInternals));
+  const existingSession = sessionOptions.stickySession && fetchSession(traceInternals);
 
   // No session exists yet, just create a new one
   if (!existingSession) {
-    logInfoNextTick('[Replay] Created new session', traceInternals);
-    return createSession(sessionOptions);
+    logInfoNextTick('[Replay] Creating new session', traceInternals);
+    return createSession(sessionOptions, { previousSessionId });
   }
 
-  return maybeRefreshSession(existingSession, { sessionIdleExpire, traceInternals, maxReplayDuration }, sessionOptions);
+  if (!shouldRefreshSession(existingSession, { sessionIdleExpire, maxReplayDuration })) {
+    return existingSession;
+  }
+
+  logInfoNextTick('[Replay] Session in sessionStorage is expired, creating new one...');
+  return createSession(sessionOptions, { previousSessionId: existingSession.id });
 }
 
 const ReplayEventTypeCustom = 5;
@@ -4749,39 +4726,46 @@ function isCustomEvent(event) {
 
 /**
  * Add an event to the event buffer.
+ * In contrast to `addEvent`, this does not return a promise & does not wait for the adding of the event to succeed/fail.
+ * Instead this returns `true` if we tried to add the event, else false.
+ * It returns `false` e.g. if we are paused, disabled, or out of the max replay duration.
+ *
  * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
  */
-async function addEvent(
+function addEventSync(replay, event, isCheckout) {
+  if (!shouldAddEvent(replay, event)) {
+    return false;
+  }
+
+  void _addEvent(replay, event, isCheckout);
+
+  return true;
+}
+
+/**
+ * Add an event to the event buffer.
+ * Resolves to `null` if no event was added, else to `void`.
+ *
+ * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
+ */
+function addEvent(
   replay,
   event,
   isCheckout,
 ) {
-  if (!replay.eventBuffer) {
-    // This implies that `_isEnabled` is false
-    return null;
-  }
-
-  if (replay.isPaused()) {
-    // Do not add to event buffer when recording is paused
-    return null;
+  if (!shouldAddEvent(replay, event)) {
+    return Promise.resolve(null);
   }
 
-  const timestampInMs = timestampToMs(event.timestamp);
-
-  // Throw out events that happen more than 5 minutes ago. This can happen if
-  // page has been left open and idle for a long period of time and user
-  // comes back to trigger a new session. The performance entries rely on
-  // `performance.timeOrigin`, which is when the page first opened.
-  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
-    return null;
-  }
+  return _addEvent(replay, event, isCheckout);
+}
 
-  // Throw out events that are +60min from the initial timestamp
-  if (timestampInMs > replay.getContext().initialTimestamp + replay.getOptions().maxReplayDuration) {
-    logInfo(
-      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxReplayDuration`,
-      replay.getOptions()._experiments.traceInternals,
-    );
+async function _addEvent(
+  replay,
+  event,
+  isCheckout,
+) {
+  if (!replay.eventBuffer) {
     return null;
   }
 
@@ -4817,6 +4801,34 @@ async function addEvent(
   }
 }
 
+/** Exported only for tests. */
+function shouldAddEvent(replay, event) {
+  if (!replay.eventBuffer || replay.isPaused() || !replay.isEnabled()) {
+    return false;
+  }
+
+  const timestampInMs = timestampToMs(event.timestamp);
+
+  // Throw out events that happen more than 5 minutes ago. This can happen if
+  // page has been left open and idle for a long period of time and user
+  // comes back to trigger a new session. The performance entries rely on
+  // `performance.timeOrigin`, which is when the page first opened.
+  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
+    return false;
+  }
+
+  // Throw out events that are +60min from the initial timestamp
+  if (timestampInMs > replay.getContext().initialTimestamp + replay.getOptions().maxReplayDuration) {
+    logInfo(
+      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxReplayDuration`,
+      replay.getOptions()._experiments.traceInternals,
+    );
+    return false;
+  }
+
+  return true;
+}
+
 function maybeApplyCallback(
   event,
   callback,
@@ -4938,7 +4950,7 @@ function isRrwebError(event, hint) {
     return false;
   }
 
-  // @ts-ignore this may be set by rrweb when it finds errors
+  // @ts-expect-error this may be set by rrweb when it finds errors
   if (hint.originalException && hint.originalException.__rrweb__) {
     return true;
   }
@@ -5781,7 +5793,7 @@ function getAllowedHeaders(headers, allowedHeaders) {
 function _serializeFormData(formData) {
   // This is a bit simplified, but gives us a decent estimate
   // This converts e.g. { name: 'Anne Smith', age: 13 } to 'name=Anne+Smith&age=13'
-  // @ts-ignore passing FormData to URLSearchParams actually works
+  // @ts-expect-error passing FormData to URLSearchParams actually works
   return new URLSearchParams(formData).toString();
 }
 
@@ -6401,9 +6413,7 @@ function addGlobalListeners(replay) {
   const scope = getCurrentHub().getScope();
   const client = getCurrentHub().getClient();
 
-  if (scope) {
-    scope.addScopeListener(handleScopeListener(replay));
-  }
+  scope.addScopeListener(handleScopeListener(replay));
   addInstrumentationHandler('dom', handleDomListener(replay));
   addInstrumentationHandler('history', handleHistorySpanListener(replay));
   handleNetworkBreadcrumbs(replay);
@@ -6449,7 +6459,7 @@ async function addMemoryEntry(replay) {
   try {
     return Promise.all(
       createPerformanceSpans(replay, [
-        // @ts-ignore memory doesn't exist on type Performance as the API is non-standard (we check that it exists above)
+        // @ts-expect-error memory doesn't exist on type Performance as the API is non-standard (we check that it exists above)
         createMemoryEntry(WINDOW.performance.memory),
       ]),
     );
@@ -6480,16 +6490,15 @@ function createMemoryEntry(memoryEntry) {
 }
 
 // Map entryType -> function to normalize data for event
-// @ts-ignore TODO: entry type does not fit the create* functions entry type
 const ENTRY_TYPES
 
  = {
-  // @ts-ignore TODO: entry type does not fit the create* functions entry type
+  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
   resource: createResourceEntry,
   paint: createPaintEntry,
-  // @ts-ignore TODO: entry type does not fit the create* functions entry type
+  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
   navigation: createNavigationEntry,
-  // @ts-ignore TODO: entry type does not fit the create* functions entry type
+  // @ts-expect-error TODO: entry type does not fit the create* functions entry type
   ['largest-contentful-paint']: createLargestContentfulPaint,
 };
 
@@ -6740,9 +6749,12 @@ function getHandleRecordingEmit(replay) {
         replay.setInitialState();
       }
 
-      // We need to clear existing events on a checkout, otherwise they are
-      // incremental event updates and should be appended
-      void addEvent(replay, event, isCheckout);
+      // If the event is not added (e.g. due to being paused, disabled, or out of the max replay duration),
+      // Skip all further steps
+      if (!addEventSync(replay, event, isCheckout)) {
+        // Return true to skip scheduling a debounced flush
+        return true;
+      }
 
       // Different behavior for full snapshots (type=2), ignore other event types
       // See https://github.com/rrweb-io/rrweb/blob/d8f9290ca496712aa1e7d472549480c4e7876594/packages/rrweb/src/types.ts#L16
@@ -6756,7 +6768,7 @@ function getHandleRecordingEmit(replay) {
       //
       // `isCheckout` is always true, but want to be explicit that it should
       // only be added for checkouts
-      void addSettingsEvent(replay, isCheckout);
+      addSettingsEvent(replay, isCheckout);
 
       // If there is a previousSessionId after a full snapshot occurs, then
       // the replay session was started due to session expiration. The new session
@@ -6833,10 +6845,10 @@ function createOptionsEvent(replay) {
 function addSettingsEvent(replay, isCheckout) {
   // Only need to add this event when sending the first segment
   if (!isCheckout || !replay.session || replay.session.segmentId !== 0) {
-    return Promise.resolve(null);
+    return;
   }
 
-  return addEvent(replay, createOptionsEvent(replay), false);
+  addEventSync(replay, createOptionsEvent(replay), false);
 }
 
 /**
@@ -7045,7 +7057,7 @@ async function sendReplayRequest({
 
     try {
       // In case browsers don't allow this property to be writable
-      // @ts-ignore This needs lib es2022 and newer
+      // @ts-expect-error This needs lib es2022 and newer
       error.cause = err;
     } catch (e) {
       // nothing to do
@@ -7116,7 +7128,7 @@ async function sendReplay(
 
       try {
         // In case browsers don't allow this property to be writable
-        // @ts-ignore This needs lib es2022 and newer
+        // @ts-expect-error This needs lib es2022 and newer
         error.cause = err;
       } catch (e) {
         // nothing to do
@@ -7333,7 +7345,7 @@ class ReplayContainer  {
    * Initializes the plugin based on sampling configuration. Should not be
    * called outside of constructor.
    */
-   initializeSampling() {
+   initializeSampling(previousSessionId) {
     const { errorSampleRate, sessionSampleRate } = this._options;
 
     // If neither sample rate is > 0, then do nothing - user will need to call one of
@@ -7344,7 +7356,7 @@ class ReplayContainer  {
 
     // Otherwise if there is _any_ sample rate set, try to load an existing
     // session, or create a new one.
-    this._initializeSessionForSampling();
+    this._initializeSessionForSampling(previousSessionId);
 
     if (!this.session) {
       // This should not happen, something wrong has occurred
@@ -7389,7 +7401,6 @@ class ReplayContainer  {
     logInfoNextTick('[Replay] Starting replay in session mode', this._options._experiments.traceInternals);
 
     const session = loadOrCreateSession(
-      this.session,
       {
         maxReplayDuration: this._options.maxReplayDuration,
         sessionIdleExpire: this.timeouts.sessionIdleExpire,
@@ -7420,7 +7431,6 @@ class ReplayContainer  {
     logInfoNextTick('[Replay] Starting replay in buffer mode', this._options._experiments.traceInternals);
 
     const session = loadOrCreateSession(
-      this.session,
       {
         sessionIdleExpire: this.timeouts.sessionIdleExpire,
         maxReplayDuration: this._options.maxReplayDuration,
@@ -7489,15 +7499,16 @@ class ReplayContainer  {
       return;
     }
 
+    // We can't move `_isEnabled` after awaiting a flush, otherwise we can
+    // enter into an infinite loop when `stop()` is called while flushing.
+    this._isEnabled = false;
+
     try {
       logInfo(
         `[Replay] Stopping Replay${reason ? ` triggered by ${reason}` : ''}`,
         this._options._experiments.traceInternals,
       );
 
-      // We can't move `_isEnabled` after awaiting a flush, otherwise we can
-      // enter into an infinite loop when `stop()` is called while flushing.
-      this._isEnabled = false;
       this._removeListeners();
       this.stopRecording();
 
@@ -7591,16 +7602,6 @@ 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_REPLAY_DURATION +
-      // (length of buffer), which we are ok with.
       this._updateUserActivity(activityTime);
       this._updateSessionActivity(activityTime);
       this._maybeSaveSession();
@@ -7728,8 +7729,6 @@ class ReplayContainer  {
    * @hidden
    */
    checkAndHandleExpiredSession() {
-    const oldSessionId = this.getSessionId();
-
     // Prevent starting a new session if the last user activity is older than
     // SESSION_IDLE_PAUSE_DURATION. Otherwise non-user activity can trigger a new
     // session+recording. This creates noisy replays that do not have much
@@ -7751,24 +7750,11 @@ class ReplayContainer  {
     // --- There is recent user activity --- //
     // This will create a new session if expired, based on expiry length
     if (!this._checkSession()) {
-      return;
-    }
-
-    // Session was expired if session ids do not match
-    const expired = oldSessionId !== this.getSessionId();
-
-    if (!expired) {
-      return true;
-    }
-
-    // Session is expired, trigger a full snapshot (which will create a new session)
-    if (this.isPaused()) {
-      this.resume();
-    } else {
-      this._triggerFullSnapshot();
+      // Check session handles the refreshing itself
+      return false;
     }
 
-    return false;
+    return true;
   }
 
   /**
@@ -7808,7 +7794,8 @@ class ReplayContainer  {
       });
 
       this.addUpdate(() => {
-        void addEvent(this, {
+        // Return `false` if the event _was_ added, as that means we schedule a flush
+        return !addEventSync(this, {
           type: ReplayEventTypeCustom,
           timestamp: breadcrumb.timestamp || 0,
           data: {
@@ -7856,6 +7843,7 @@ class ReplayContainer  {
 
     // Need to set as enabled before we start recording, as `record()` can trigger a flush with a new checkout
     this._isEnabled = true;
+    this._isPaused = false;
 
     this.startRecording();
   }
@@ -7872,17 +7860,17 @@ class ReplayContainer  {
   /**
    * Loads (or refreshes) the current session.
    */
-   _initializeSessionForSampling() {
+   _initializeSessionForSampling(previousSessionId) {
     // Whenever there is _any_ error sample rate, we always allow buffering
     // Because we decide on sampling when an error occurs, we need to buffer at all times if sampling for errors
     const allowBuffering = this._options.errorSampleRate > 0;
 
     const session = loadOrCreateSession(
-      this.session,
       {
         sessionIdleExpire: this.timeouts.sessionIdleExpire,
         maxReplayDuration: this._options.maxReplayDuration,
         traceInternals: this._options._experiments.traceInternals,
+        previousSessionId,
       },
       {
         stickySession: this._options.stickySession,
@@ -7907,37 +7895,32 @@ class ReplayContainer  {
 
     const currentSession = this.session;
 
-    const newSession = maybeRefreshSession(
-      currentSession,
-      {
+    if (
+      shouldRefreshSession(currentSession, {
         sessionIdleExpire: this.timeouts.sessionIdleExpire,
-        traceInternals: this._options._experiments.traceInternals,
         maxReplayDuration: this._options.maxReplayDuration,
-      },
-      {
-        stickySession: Boolean(this._options.stickySession),
-        sessionSampleRate: this._options.sessionSampleRate,
-        allowBuffering: this._options.errorSampleRate > 0,
-      },
-    );
-
-    const isNew = newSession.id !== currentSession.id;
-
-    // If session was newly created (i.e. was not loaded from storage), then
-    // enable flag to create the root replay
-    if (isNew) {
-      this.setInitialState();
-      this.session = newSession;
-    }
-
-    if (!this.session.sampled) {
-      void this.stop({ reason: 'session not refreshed' });
+      })
+    ) {
+      void this._refreshSession(currentSession);
       return false;
     }
 
     return true;
   }
 
+  /**
+   * Refresh a session with a new one.
+   * This stops the current session (without forcing a flush, as that would never work since we are expired),
+   * and then does a new sampling based on the refreshed session.
+   */
+   async _refreshSession(session) {
+    if (!this._isEnabled) {
+      return;
+    }
+    await this.stop({ reason: 'refresh session' });
+    this.initializeSampling(session.id);
+  }
+
   /**
    * Adds listeners to record events for the replay
    */
@@ -8049,10 +8032,14 @@ class ReplayContainer  {
 
     const expired = isSessionExpired(this.session, {
       maxReplayDuration: this._options.maxReplayDuration,
-      ...this.timeouts,
+      sessionIdleExpire: this.timeouts.sessionIdleExpire,
     });
 
-    if (breadcrumb && !expired) {
+    if (expired) {
+      return;
+    }
+
+    if (breadcrumb) {
       this._createCustomBreadcrumb(breadcrumb);
     }
 
@@ -8197,7 +8184,9 @@ class ReplayContainer  {
    * Should never be called directly, only by `flush`
    */
    async _runFlush() {
-    if (!this.session || !this.eventBuffer) {
+    const replayId = this.getSessionId();
+
+    if (!this.session || !this.eventBuffer || !replayId) {
       (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error('[Replay] No session or eventBuffer found to flush.');
       return;
     }
@@ -8217,13 +8206,15 @@ class ReplayContainer  {
       return;
     }
 
+    // if this changed in the meanwhile, e.g. because the session was refreshed or similar, we abort here
+    if (replayId !== this.getSessionId()) {
+      return;
+    }
+
     try {
       // This uses the data from the eventBuffer, so we need to call this before `finish()
       this._updateInitialTimestampFromEventBuffer();
 
-      // 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
@@ -8233,14 +8224,14 @@ class ReplayContainer  {
         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;
       const eventContext = this._popEventContext();
       // Always increment segmentId regardless of outcome of sending replay
       const segmentId = this.session.segmentId++;
       this._maybeSaveSession();
 
+      // Note this empties the event buffer regardless of outcome of sending replay
+      const recordingData = await this.eventBuffer.finish();
+
       await sendReplay({
         replayId,
         recordingData,