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/errors/errorsInSession/init.js

@@ -19,5 +19,4 @@ Sentry.init({
     return event;
   },
   integrations: [window.Replay],
-  debug: true,
 });

packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/init.js

@@ -13,7 +13,6 @@ Sentry.init({
   sampleRate: 0,
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-  debug: true,
 
   integrations: [window.Replay],
 });

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/maxReplayDuration/test.ts

@@ -4,7 +4,7 @@ import { sentryTest } from '../../../utils/fixtures';
 import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates';
 import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
 
-const SESSION_MAX_AGE = 2000;
+const MAX_REPLAY_DURATION = 2000;
 
 sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -26,15 +26,15 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa
 
   await page.goto(url);
 
-  await new Promise(resolve => setTimeout(resolve, SESSION_MAX_AGE / 2));
+  await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2));
 
   await page.reload();
   await page.click('#button1');
 
   // After the second reload, we should have a new session (because we exceeded max age)
   const reqPromise3 = waitForReplayRequest(page, 0);
 
-  await new Promise(resolve => setTimeout(resolve, SESSION_MAX_AGE / 2 + 100));
+  await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2 + 100));
 
   void page.click('#button1');
   await page.evaluate(`Object.defineProperty(document, 'visibilityState', {

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

@@ -12,7 +12,6 @@ Sentry.init({
   sampleRate: 0,
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-  debug: true,
 
   integrations: [window.Replay],
 });

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

@@ -12,13 +12,11 @@ Sentry.init({
   sampleRate: 0,
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-  debug: true,
 
   integrations: [window.Replay],
 });
 
 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

@@ -12,13 +12,11 @@ Sentry.init({
   sampleRate: 0,
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-  debug: true,
 
   integrations: [window.Replay],
 });
 
 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,20 +5,19 @@ window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
   minReplayDuration: 0,
+  maxReplayDuration: 4000,
 });
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   sampleRate: 0,
   replaysSessionSampleRate: 1.0,
   replaysOnErrorSampleRate: 0.0,
-  debug: true,
 
   integrations: [window.Replay],
 });
 
 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/browser-integration-tests/suites/replay/sessionMaxAge/test.ts

@@ -12,7 +12,7 @@ import {
 } from '../../../utils/replayHelpers';
 
 // Session should be max. 4s long
-const SESSION_MAX_AGE = 4000;
+const MAX_REPLAY_DURATION = 4000;
 
 /*
   The main difference between this and sessionExpiry test, is that here we wait for the overall time (4s)
@@ -58,7 +58,7 @@ sentryTest('handles session that exceeds max age', async ({ getLocalTestPath, pa
   // Wait for an incremental snapshot
   // Wait half of the session max age (after initial flush), but account for potentially slow runners
   const timePassed1 = Date.now() - startTimestamp;
-  await new Promise(resolve => setTimeout(resolve, Math.max(SESSION_MAX_AGE / 2 - timePassed1, 0)));
+  await new Promise(resolve => setTimeout(resolve, Math.max(MAX_REPLAY_DURATION / 2 - timePassed1, 0)));
   await page.click('#button1');
 
   const req1 = await reqPromise1;
@@ -71,7 +71,7 @@ sentryTest('handles session that exceeds max age', async ({ getLocalTestPath, pa
 
   // Wait for session to expire
   const timePassed2 = Date.now() - startTimestamp;
-  await new Promise(resolve => setTimeout(resolve, Math.max(SESSION_MAX_AGE - timePassed2, 0)));
+  await new Promise(resolve => setTimeout(resolve, Math.max(MAX_REPLAY_DURATION - timePassed2, 0)));
   await page.click('#button2');
 
   const req2 = await reqPromise2;

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.min(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,
@@ -150,7 +149,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;
@@ -483,7 +481,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);
@@ -929,7 +927,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);
@@ -1108,7 +1109,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // 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 + 30_000) {
+      if (timestamp - this._context.initialTimestamp > this._options.maxReplayDuration + 30_000) {
         throw new Error('Session is too long, not sending replay');
       }
 
@@ -1181,10 +1182,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/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/addEvent.ts

@@ -41,9 +41,9 @@ export async function addEvent(
   }
 
   // Throw out events that are +60min from the initial timestamp
-  if (timestampInMs > replay.getContext().initialTimestamp + replay.timeouts.maxSessionLife) {
+  if (timestampInMs > replay.getContext().initialTimestamp + replay.getOptions().maxReplayDuration) {
     logInfo(
-      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxSessionLife`,
+      `[Replay] Skipping event with timestamp ${timestampInMs} because it is after maxReplayDuration`,
       replay.getOptions()._experiments.traceInternals,
     );
     return null;

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,
@@ -430,7 +430,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',
@@ -494,7 +494,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;
@@ -760,7 +760,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);
@@ -785,7 +785,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,
         },
       ]),
@@ -795,7 +795,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);
@@ -960,7 +960,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);
@@ -997,7 +997,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);