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,
@@ -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);
@@ -1072,7 +1061,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');
       }
 
@@ -1145,10 +1134,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/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)
   );
 }