feat(replay): Allow to configure maxReplayDuration

This defaults to 60min, and is capped at max. 60min (=you cannot specify a longer max duration than 60min).

Author: mydea

packages/browser-integration-tests/suites/replay/maxReplayDuration/init.js

@@ -5,6 +5,7 @@ window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
   minReplayDuration: 0,
+  maxReplayDuration: 2000,
 });
 
 Sentry.init({
@@ -19,5 +20,4 @@ Sentry.init({
 window.Replay._replay.timeouts = {
   sessionIdlePause: 1000, // this is usually 5min, but we want to test this with shorter times
   sessionIdleExpire: 2000, // this is usually 15min, but we want to test this with shorter times
-  maxSessionLife: 2000, // default: 60min
 };

packages/browser-integration-tests/suites/replay/sessionExpiry/init.js

@@ -20,5 +20,4 @@ Sentry.init({
 window.Replay._replay.timeouts = {
   sessionIdlePause: 1000, // this is usually 5min, but we want to test this with shorter times
   sessionIdleExpire: 2000, // this is usually 15min, but we want to test this with shorter times
-  maxSessionLife: 3600000, // default: 60min
 };

packages/browser-integration-tests/suites/replay/sessionInactive/init.js

@@ -20,5 +20,4 @@ Sentry.init({
 window.Replay._replay.timeouts = {
   sessionIdlePause: 1000, // this is usually 5min, but we want to test this with shorter times
   sessionIdleExpire: 900000, // defayult: 15min
-  maxSessionLife: 3600000, // default: 60min
 };

packages/browser-integration-tests/suites/replay/sessionMaxAge/init.js

@@ -5,6 +5,7 @@ window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
   minReplayDuration: 0,
+  maxReplayDuration: 4000,
 });
 
 Sentry.init({
@@ -20,5 +21,4 @@ Sentry.init({
 window.Replay._replay.timeouts = {
   sessionIdlePause: 300000, // default: 5min
   sessionIdleExpire: 900000, // default: 15min
-  maxSessionLife: 4000, // this is usually 60min, but we want to test this with shorter times
 };

packages/replay/src/constants.ts

@@ -17,9 +17,6 @@ export const SESSION_IDLE_PAUSE_DURATION = 300_000; // 5 minutes in ms
 // The idle limit for a session after which the session expires.
 export const SESSION_IDLE_EXPIRE_DURATION = 900_000; // 15 minutes in ms
 
-// The maximum length of a session
-export const MAX_SESSION_LIFE = 3_600_000; // 60 minutes in ms
-
 /** Default flush delays */
 export const DEFAULT_FLUSH_MIN_DELAY = 5_000;
 // XXX: Temp fix for our debounce logic where `maxWait` would never occur if it
@@ -50,3 +47,6 @@ export const REPLAY_MAX_EVENT_BUFFER_SIZE = 20_000_000; // ~20MB
 export const MIN_REPLAY_DURATION = 4_999;
 /* The max. allowed value that the minReplayDuration can be set to. */
 export const MIN_REPLAY_DURATION_LIMIT = 15_000;
+
+/** The max. length of a replay. */
+export const MAX_REPLAY_DURATION = 3_600_000; // 60 minutes in ms;

packages/replay/src/integration.ts

@@ -5,6 +5,7 @@ import { dropUndefinedKeys } from '@sentry/utils';
 import {
   DEFAULT_FLUSH_MAX_DELAY,
   DEFAULT_FLUSH_MIN_DELAY,
+  MAX_REPLAY_DURATION,
   MIN_REPLAY_DURATION,
   MIN_REPLAY_DURATION_LIMIT,
 } from './constants';
@@ -57,6 +58,7 @@ export class Replay implements Integration {
     flushMinDelay = DEFAULT_FLUSH_MIN_DELAY,
     flushMaxDelay = DEFAULT_FLUSH_MAX_DELAY,
     minReplayDuration = MIN_REPLAY_DURATION,
+    maxReplayDuration = MAX_REPLAY_DURATION,
     stickySession = true,
     useCompression = true,
     _experiments = {},
@@ -136,6 +138,7 @@ export class Replay implements Integration {
       flushMinDelay,
       flushMaxDelay,
       minReplayDuration: Math.min(minReplayDuration, MIN_REPLAY_DURATION_LIMIT),
+      maxReplayDuration: Math.max(maxReplayDuration, MAX_REPLAY_DURATION),
       stickySession,
       sessionSampleRate,
       errorSampleRate,

packages/replay/src/replay.ts

@@ -6,7 +6,6 @@ import { logger } from '@sentry/utils';
 
 import {
   BUFFER_CHECKOUT_TIME,
-  MAX_SESSION_LIFE,
   SESSION_IDLE_EXPIRE_DURATION,
   SESSION_IDLE_PAUSE_DURATION,
   SLOW_CLICK_SCROLL_TIMEOUT,
@@ -148,7 +147,6 @@ export class ReplayContainer implements ReplayContainerInterface {
     this.timeouts = {
       sessionIdlePause: SESSION_IDLE_PAUSE_DURATION,
       sessionIdleExpire: SESSION_IDLE_EXPIRE_DURATION,
-      maxSessionLife: MAX_SESSION_LIFE,
     } as const;
     this._lastActivity = Date.now();
     this._isEnabled = false;
@@ -278,14 +276,10 @@ export class ReplayContainer implements ReplayContainerInterface {
 
     const previousSessionId = this.session && this.session.id;
 
-    const { session } = getSession({
-      timeouts: this.timeouts,
-      stickySession: Boolean(this._options.stickySession),
-      currentSession: this.session,
+    const { session } = getSession(this, {
       // This is intentional: create a new session-based replay when calling `start()`
       sessionSampleRate: 1,
       allowBuffering: false,
-      traceInternals: this._options._experiments.traceInternals,
     });
 
     session.previousSessionId = previousSessionId;
@@ -307,13 +301,9 @@ export class ReplayContainer implements ReplayContainerInterface {
 
     const previousSessionId = this.session && this.session.id;
 
-    const { session } = getSession({
-      timeouts: this.timeouts,
-      stickySession: Boolean(this._options.stickySession),
-      currentSession: this.session,
+    const { session } = getSession(this, {
       sessionSampleRate: 0,
       allowBuffering: true,
-      traceInternals: this._options._experiments.traceInternals,
     });
 
     session.previousSessionId = previousSessionId;
@@ -483,7 +473,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // `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 +
+      // 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);
@@ -754,13 +744,9 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Returns false if session is not recorded.
    */
   private _loadAndCheckSession(): boolean {
-    const { type, session } = getSession({
-      timeouts: this.timeouts,
-      stickySession: Boolean(this._options.stickySession),
-      currentSession: this.session,
+    const { type, session } = getSession(this, {
       sessionSampleRate: this._options.sessionSampleRate,
       allowBuffering: this._options.errorSampleRate > 0 || this.recordingMode === 'buffer',
-      traceInternals: this._options._experiments.traceInternals,
     });
 
     // If session was newly created (i.e. was not loaded from storage), then
@@ -893,7 +879,10 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const expired = isSessionExpired(this.session, this.timeouts);
+    const expired = isSessionExpired(this.session, {
+      maxReplayDuration: this._options.maxReplayDuration,
+      ...this.timeouts,
+    });
 
     if (breadcrumb && !expired) {
       this._createCustomBreadcrumb(breadcrumb);
@@ -1136,10 +1125,10 @@ export class ReplayContainer implements ReplayContainerInterface {
     // 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
+    // If session is too short, or too long (allow some wiggle room over maxReplayDuration), 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;
-    const tooLong = duration > this.timeouts.maxSessionLife + 5_000;
+    const tooLong = duration > this._options.maxReplayDuration + 5_000;
     if (tooShort || tooLong) {
       logInfo(
         `[Replay] Session duration (${Math.floor(duration / 1000)}s) is too ${

packages/replay/src/session/getSession.ts

@@ -1,40 +1,32 @@
-import type { Session, SessionOptions, Timeouts } from '../types';
+import type { ReplayContainer, Session } from '../types';
 import { isSessionExpired } from '../util/isSessionExpired';
 import { logInfoNextTick } from '../util/log';
 import { createSession } from './createSession';
 import { fetchSession } from './fetchSession';
 import { makeSession } from './Session';
 
-interface GetSessionParams extends SessionOptions {
-  timeouts: Timeouts;
-
-  /**
-   * The current session (e.g. if stickySession is off)
-   */
-  currentSession?: Session;
-
-  traceInternals?: boolean;
-}
-
 /**
  * Get or create a session
  */
-export function getSession({
-  timeouts,
-  currentSession,
-  stickySession,
-  sessionSampleRate,
-  allowBuffering,
-  traceInternals,
-}: GetSessionParams): { type: 'new' | 'saved'; session: Session } {
+export function getSession(
+  replay: ReplayContainer,
+  { sessionSampleRate, allowBuffering }: { sessionSampleRate: number; allowBuffering: boolean },
+): { type: 'new' | 'saved'; session: Session } {
+  const currentSession = replay.session;
+  const stickySession = replay.getOptions().stickySession;
+  const { traceInternals } = replay.getOptions()._experiments;
+
   // If session exists and is passed, use it instead of always hitting session storage
   const session = currentSession || (stickySession && fetchSession(traceInternals));
 
   if (session) {
     // 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, timeouts);
+    const isExpired = isSessionExpired(session, {
+      maxReplayDuration: replay.getOptions().maxReplayDuration,
+      ...replay.timeouts,
+    });
 
     if (!isExpired || (allowBuffering && session.shouldRefresh)) {
       return { type: 'saved', session };

packages/replay/src/types/replay.ts

@@ -31,7 +31,6 @@ export interface SendReplayData {
 export interface Timeouts {
   sessionIdlePause: number;
   sessionIdleExpire: number;
-  maxSessionLife: number;
 }
 
 /**
@@ -187,6 +186,12 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
    */
   minReplayDuration: number;
 
+  /**
+   * The max. duration (in ms) a replay session may be.
+   * This is capped at max. 60min.
+   */
+  maxReplayDuration: number;
+
   /**
    * Callback before adding a custom recording event
    *

packages/replay/src/util/isSessionExpired.ts

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

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

@@ -3,7 +3,7 @@ import { captureException, getCurrentHub } from '@sentry/core';
 import {
   BUFFER_CHECKOUT_TIME,
   DEFAULT_FLUSH_MIN_DELAY,
-  MAX_SESSION_LIFE,
+  MAX_REPLAY_DURATION,
   REPLAY_SESSION_KEY,
   SESSION_IDLE_EXPIRE_DURATION,
   WINDOW,
@@ -428,7 +428,7 @@ describe('Integration | errorSampleRate', () => {
   // simply stop the session replay completely and wait for a new page load to
   // resample.
   it.each([
-    ['MAX_SESSION_LIFE', MAX_SESSION_LIFE],
+    ['MAX_REPLAY_DURATION', MAX_REPLAY_DURATION],
     ['SESSION_IDLE_DURATION', SESSION_IDLE_EXPIRE_DURATION],
   ])(
     'stops replay if session had an error and exceeds %s and does not start a new session thereafter',
@@ -493,7 +493,7 @@ describe('Integration | errorSampleRate', () => {
   );
 
   it.each([
-    ['MAX_SESSION_LIFE', MAX_SESSION_LIFE],
+    ['MAX_REPLAY_DURATION', MAX_REPLAY_DURATION],
     ['SESSION_IDLE_EXPIRE_DURATION', SESSION_IDLE_EXPIRE_DURATION],
   ])('continues buffering replay if session had no error and exceeds %s', async (_label, waitTime) => {
     const oldSessionId = replay.session?.id;
@@ -761,7 +761,7 @@ describe('Integration | errorSampleRate', () => {
     jest.runAllTimers();
     await new Promise(process.nextTick);
 
-    jest.advanceTimersByTime(2 * MAX_SESSION_LIFE);
+    jest.advanceTimersByTime(2 * MAX_REPLAY_DURATION);
 
     // in production, this happens at a time interval, here we mock this
     mockRecord.takeFullSnapshot(true);
@@ -786,7 +786,7 @@ describe('Integration | errorSampleRate', () => {
           data: {
             isCheckout: true,
           },
-          timestamp: BASE_TIMESTAMP + 2 * MAX_SESSION_LIFE + DEFAULT_FLUSH_MIN_DELAY + 40,
+          timestamp: BASE_TIMESTAMP + 2 * MAX_REPLAY_DURATION + DEFAULT_FLUSH_MIN_DELAY + 40,
           type: 2,
         },
       ]),
@@ -796,7 +796,7 @@ describe('Integration | errorSampleRate', () => {
     mockRecord.takeFullSnapshot.mockClear();
     (getCurrentHub().getClient()!.getTransport()!.send as unknown as jest.SpyInstance<any>).mockClear();
 
-    jest.advanceTimersByTime(MAX_SESSION_LIFE);
+    jest.advanceTimersByTime(MAX_REPLAY_DURATION);
     await new Promise(process.nextTick);
 
     mockRecord._emitter(TEST_EVENT);
@@ -917,7 +917,7 @@ it('handles buffer sessions that previously had an error', async () => {
 
   // Waiting for max life should eventually stop recording
   // We simulate a full checkout which would otherwise be done automatically
-  for (let i = 0; i < MAX_SESSION_LIFE / 60_000; i++) {
+  for (let i = 0; i < MAX_REPLAY_DURATION / 60_000; i++) {
     jest.advanceTimersByTime(60_000);
     await new Promise(process.nextTick);
     mockRecord.takeFullSnapshot(true);
@@ -954,7 +954,7 @@ it('handles buffer sessions that never had an error', async () => {
 
   // Waiting for max life should eventually stop recording
   // We simulate a full checkout which would otherwise be done automatically
-  for (let i = 0; i < MAX_SESSION_LIFE / 60_000; i++) {
+  for (let i = 0; i < MAX_REPLAY_DURATION / 60_000; i++) {
     jest.advanceTimersByTime(60_000);
     await new Promise(process.nextTick);
     mockRecord.takeFullSnapshot(true);

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

@@ -1,6 +1,6 @@
 import * as SentryUtils from '@sentry/utils';
 
-import { DEFAULT_FLUSH_MIN_DELAY, MAX_SESSION_LIFE, WINDOW } from '../../src/constants';
+import { DEFAULT_FLUSH_MIN_DELAY, MAX_REPLAY_DURATION, WINDOW } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import { clearSession } from '../../src/session/clearSession';
 import type { EventBuffer } from '../../src/types';
@@ -291,7 +291,7 @@ describe('Integration | flush', () => {
   });
 
   it('does not flush if session is too long', async () => {
-    replay.timeouts.maxSessionLife = 100_000;
+    replay.getOptions().maxReplayDuration = 100_000;
     jest.setSystemTime(BASE_TIMESTAMP);
 
     sessionStorage.clear();
@@ -319,7 +319,7 @@ describe('Integration | flush', () => {
     expect(mockFlush).toHaveBeenCalledTimes(1);
     expect(mockSendReplay).toHaveBeenCalledTimes(0);
 
-    replay.timeouts.maxSessionLife = MAX_SESSION_LIFE;
+    replay.getOptions().maxReplayDuration = MAX_REPLAY_DURATION;
     replay['_loadAndCheckSession'] = _tmp;
   });