feat(replay): Ensure too short/long sessions are not flushed

Author: mydea

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -5,6 +5,7 @@ window.Sentry = Sentry;
 window.Replay = new Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: true,
 });
 

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
   blockAllMedia: false,
 });

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

@@ -5,6 +5,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
 });
 

packages/browser-integration-tests/suites/replay/errors/droppedError/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/errors/errorModeCustomTransport/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/errors/errorNotSent/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/errors/errorsInSession/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestBody/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo', 'http://sentry-test.io/foo'],
   networkCaptureBodies: true,

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestHeaders/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkRequestHeaders: ['X-Test-Header'],

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseBody/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkCaptureBodies: true,

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseHeaders/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkResponseHeaders: ['X-Test-Header'],

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureRequestBody/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo', 'http://sentry-test.io/foo'],
   networkCaptureBodies: true,

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureRequestHeaders/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkRequestHeaders: ['X-Test-Header'],

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureResponseBody/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkCaptureBodies: true,

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureResponseHeaders/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 
   networkDetailAllowUrls: ['http://localhost:7654/foo'],
   networkResponseHeaders: ['X-Test-Header'],

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
   maskAllInputs: false,
 });

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
 });
 

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   mutationLimit: 250,
 });
 

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

@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  minReplayDuration: 2000,
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay],
+});

packages/browser-integration-tests/suites/replay/minReplayDuration/template.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button onclick="console.log('Test log 1')" id="button1">Click me</button>
+    <button onclick="console.log('Test log 2')" id="button2">Click me</button>
+  </body>
+</html>

packages/browser-integration-tests/suites/replay/minReplayDuration/test.ts

@@ -0,0 +1,63 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates';
+import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+
+const MIN_DURATION = 2000;
+
+sentryTest('doest not send replay before min. duration', async ({ getLocalTestPath, page, forceFlushReplay }) => {
+  if (shouldSkipReplayTest()) {
+    sentryTest.skip();
+  }
+
+  let counter = 0;
+  const reqPromise0 = waitForReplayRequest(page, () => {
+    counter++;
+    return true;
+  });
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+
+  // This triggers a page blur, which should trigger a flush
+  // However, as we are only here too short, this should not actually _send_ anything
+  await page.evaluate(`Object.defineProperty(document, 'visibilityState', {
+  configurable: true,
+  get: function () {
+    return 'hidden';
+  },
+});
+document.dispatchEvent(new Event('visibilitychange'));`);
+  expect(counter).toBe(0);
+
+  // Now wait for 2s until min duration is reached, and try again
+  await new Promise(resolve => setTimeout(resolve, MIN_DURATION));
+  await page.evaluate(`Object.defineProperty(document, 'visibilityState', {
+    configurable: true,
+    get: function () {
+      return 'visible';
+    },
+  });
+  document.dispatchEvent(new Event('visibilitychange'));`);
+  await page.evaluate(`Object.defineProperty(document, 'visibilityState', {
+    configurable: true,
+    get: function () {
+      return 'hidden';
+    },
+  });
+  document.dispatchEvent(new Event('visibilitychange'));`);
+
+  const replayEvent0 = getReplayEvent(await reqPromise0);
+  expect(replayEvent0).toEqual(getExpectedReplayEvent({}));
+  expect(counter).toBe(1);
+});

packages/browser-integration-tests/suites/replay/multiple-pages/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
   blockAllMedia: false,
   block: ['link[rel="icon"]', 'video', '.nested-hide'],

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
 });
 

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
   maskAllInputs: false,
 });

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
   maskAllInputs: true,
 });

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

@@ -6,6 +6,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   useCompression: false,
 });
 

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

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

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/slowClick/disable/init.js

@@ -4,6 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 200,
   flushMaxDelay: 200,
+  minReplayDuration: 0,
   slowClickTimeout: 0,
 });