ref(replay): Make idle timeouts configurable & reusable

Also streamline that `SESSION_IDLE_DURATION` and `VISIBILITY_CHANGE_TIMEOUT` are the same thing (which they have already been).

Author: mydea

packages/replay/src/constants.ts

@@ -14,9 +14,6 @@ export const UNABLE_TO_SEND_REPLAY = 'Unable to send Replay';
 // The idle limit for a session
 export const SESSION_IDLE_DURATION = 300_000; // 5 minutes in ms
 
-// Grace period to keep a session when a user changes tabs or hides window
-export const VISIBILITY_CHANGE_TIMEOUT = SESSION_IDLE_DURATION;
-
 // The maximum length of a session
 export const MAX_SESSION_LIFE = 3_600_000; // 60 minutes
 

packages/replay/src/replay.ts

@@ -4,13 +4,7 @@ import { captureException, getCurrentHub } from '@sentry/core';
 import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
-import {
-  ERROR_CHECKOUT_TIME,
-  MAX_SESSION_LIFE,
-  SESSION_IDLE_DURATION,
-  VISIBILITY_CHANGE_TIMEOUT,
-  WINDOW,
-} from './constants';
+import { ERROR_CHECKOUT_TIME, MAX_SESSION_LIFE, SESSION_IDLE_DURATION, WINDOW } from './constants';
 import { setupPerformanceObserver } from './coreHandlers/performanceObserver';
 import { createEventBuffer } from './eventBuffer';
 import { getSession } from './session/getSession';
@@ -60,6 +54,12 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   public recordingMode: ReplayRecordingMode = 'session';
 
+  /** These are here so we can overwrite them in tests etc. */
+  public timeouts = {
+    sessionIdle: SESSION_IDLE_DURATION,
+    maxSessionLife: MAX_SESSION_LIFE,
+  };
+
   /**
    * Options to pass to `rrweb.record()`
    */
@@ -367,22 +367,22 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Returns true if session is not expired, false otherwise.
    * @hidden
    */
-  public checkAndHandleExpiredSession(expiry?: number): boolean | void {
+  public checkAndHandleExpiredSession(): boolean | void {
     const oldSessionId = this.getSessionId();
 
     // Prevent starting a new session if the last user activity is older than
     // MAX_SESSION_LIFE. Otherwise non-user activity can trigger a new
     // session+recording. This creates noisy replays that do not have much
     // content in them.
-    if (this._lastActivity && isExpired(this._lastActivity, MAX_SESSION_LIFE)) {
+    if (this._lastActivity && isExpired(this._lastActivity, this.timeouts.maxSessionLife)) {
       // Pause recording
       this.pause();
       return;
     }
 
     // --- There is recent user activity --- //
     // This will create a new session if expired, based on expiry length
-    if (!this._loadAndCheckSession(expiry)) {
+    if (!this._loadAndCheckSession()) {
       return;
     }
 
@@ -412,9 +412,10 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Loads (or refreshes) the current session.
    * Returns false if session is not recorded.
    */
-  private _loadAndCheckSession(expiry = SESSION_IDLE_DURATION): boolean {
+  private _loadAndCheckSession(): boolean {
     const { type, session } = getSession({
-      expiry,
+      expiry: this.timeouts.sessionIdle,
+      maxSessionLife: this.timeouts.maxSessionLife,
       stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
       sessionSampleRate: this._options.sessionSampleRate,
@@ -626,7 +627,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const expired = isSessionExpired(this.session, VISIBILITY_CHANGE_TIMEOUT);
+    const expired = isSessionExpired(this.session, this.timeouts.maxSessionLife, this.timeouts.sessionIdle);
 
     if (breadcrumb && !expired) {
       this._createCustomBreadcrumb(breadcrumb);
@@ -646,10 +647,10 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const isSessionActive = this.checkAndHandleExpiredSession(VISIBILITY_CHANGE_TIMEOUT);
+    const isSessionActive = this.checkAndHandleExpiredSession();
 
     if (!isSessionActive) {
-      // If the user has come back to the page within VISIBILITY_CHANGE_TIMEOUT
+      // If the user has come back to the page within SESSION_IDLE_DURATION
       // ms, we will re-use the existing session, otherwise create a new
       // session
       __DEBUG_BUILD__ && logger.log('[Replay] Document has become active, but session has expired');

packages/replay/src/session/getSession.ts

@@ -12,6 +12,9 @@ interface GetSessionParams extends SessionOptions {
    */
   expiry: number;
 
+  /** How long a session may max. be. */
+  maxSessionLife: number;
+
   /**
    * The current session (e.g. if stickySession is off)
    */
@@ -23,6 +26,7 @@ interface GetSessionParams extends SessionOptions {
  */
 export function getSession({
   expiry,
+  maxSessionLife,
   currentSession,
   stickySession,
   sessionSampleRate,
@@ -35,7 +39,7 @@ export function getSession({
     // If there is a session, check if it is valid (e.g. "last activity" time
     // should be within the "session idle time", and "session started" time is
     // within "max session time").
-    const isExpired = isSessionExpired(session, expiry);
+    const isExpired = isSessionExpired(session, maxSessionLife, expiry);
 
     if (!isExpired) {
       return { type: 'saved', session };

packages/replay/src/types.ts

@@ -289,6 +289,10 @@ export interface ReplayContainer {
   performanceEvents: AllPerformanceEntry[];
   session: Session | undefined;
   recordingMode: ReplayRecordingMode;
+  timeouts: {
+    sessionIdle: number;
+    maxSessionLife: number;
+  };
   isEnabled(): boolean;
   isPaused(): boolean;
   getContext(): InternalEventContext;

packages/replay/src/util/addEvent.ts

@@ -1,7 +1,6 @@
 import { getCurrentHub } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
-import { SESSION_IDLE_DURATION } from '../constants';
 import type { AddEventResult, RecordingEvent, ReplayContainer } from '../types';
 
 /**
@@ -31,7 +30,7 @@ export async function addEvent(
   // 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 + SESSION_IDLE_DURATION < new Date().getTime()) {
+  if (timestampInMs + replay.timeouts.sessionIdle < new Date().getTime()) {
     return null;
   }
 

packages/replay/src/util/isSessionExpired.ts

@@ -1,14 +1,18 @@
-import { MAX_SESSION_LIFE } from '../constants';
 import type { Session } from '../types';
 import { isExpired } from './isExpired';
 
 /**
  * Checks to see if session is expired
  */
-export function isSessionExpired(session: Session, idleTimeout: number, targetTime: number = +new Date()): boolean {
+export function isSessionExpired(
+  session: Session,
+  maxSessionLife: number,
+  idleTimeout: number,
+  targetTime: number = +new Date(),
+): boolean {
   return (
     // First, check that maximum session length has not been exceeded
-    isExpired(session.started, MAX_SESSION_LIFE, targetTime) ||
+    isExpired(session.started, maxSessionLife, targetTime) ||
     // check that the idle timeout has not been exceeded (i.e. user has
     // performed an action within the last `idleTimeout` ms)
     isExpired(session.lastActivity, idleTimeout, targetTime)

packages/replay/test/integration/errorSampleRate.test.ts

@@ -5,7 +5,7 @@ import {
   ERROR_CHECKOUT_TIME,
   MAX_SESSION_LIFE,
   REPLAY_SESSION_KEY,
-  VISIBILITY_CHANGE_TIMEOUT,
+  SESSION_IDLE_DURATION,
   WINDOW,
 } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
@@ -154,15 +154,15 @@ describe('Integration | errorSampleRate', () => {
     });
   });
 
-  it('does not send a replay when triggering a full dom snapshot when document becomes visible after [VISIBILITY_CHANGE_TIMEOUT]ms', async () => {
+  it('does not send a replay when triggering a full dom snapshot when document becomes visible after [SESSION_IDLE_DURATION]ms', async () => {
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,
       get: function () {
         return 'visible';
       },
     });
 
-    jest.advanceTimersByTime(VISIBILITY_CHANGE_TIMEOUT + 1);
+    jest.advanceTimersByTime(SESSION_IDLE_DURATION + 1);
 
     document.dispatchEvent(new Event('visibilitychange'));
 
@@ -186,8 +186,8 @@ describe('Integration | errorSampleRate', () => {
 
     expect(replay).not.toHaveLastSentReplay();
 
-    // User comes back before `VISIBILITY_CHANGE_TIMEOUT` elapses
-    jest.advanceTimersByTime(VISIBILITY_CHANGE_TIMEOUT - 100);
+    // User comes back before `SESSION_IDLE_DURATION` elapses
+    jest.advanceTimersByTime(SESSION_IDLE_DURATION - 100);
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,
       get: function () {

packages/replay/test/integration/events.test.ts

@@ -40,7 +40,7 @@ describe('Integration | events', () => {
     // Create a new session and clear mocks because a segment (from initial
     // checkout) will have already been uploaded by the time the tests run
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
     mockTransportSend.mockClear();
   });
 
@@ -93,7 +93,7 @@ describe('Integration | events', () => {
 
   it('has correct timestamps when there are events earlier than initial timestamp', async function () {
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
     mockTransportSend.mockClear();
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,

packages/replay/test/integration/flush.test.ts

@@ -95,7 +95,7 @@ describe('Integration | flush', () => {
     jest.setSystemTime(new Date(BASE_TIMESTAMP));
     sessionStorage.clear();
     clearSession(replay);
-    replay['_loadAndCheckSession'](SESSION_IDLE_DURATION);
+    replay['_loadAndCheckSession']();
     mockRecord.takeFullSnapshot.mockClear();
     Object.defineProperty(WINDOW, 'location', {
       value: prevLocation,

packages/replay/test/integration/rateLimiting.test.ts

@@ -46,7 +46,7 @@ describe('Integration | rate-limiting behaviour', () => {
     // Create a new session and clear mocks because a segment (from initial
     // checkout) will have already been uploaded by the time the tests run
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
 
     mockSendReplayRequest.mockClear();
   });
@@ -57,7 +57,7 @@ describe('Integration | rate-limiting behaviour', () => {
     jest.setSystemTime(new Date(BASE_TIMESTAMP));
     clearSession(replay);
     jest.clearAllMocks();
-    replay['_loadAndCheckSession'](SESSION_IDLE_DURATION);
+    replay['_loadAndCheckSession']();
   });
 
   afterAll(() => {