feat(replay): Ensure min/max duration when flushing (#8596)

This PR adds a safeguard to ensure we do not flush (=send) a replay that
is either too short or too long.

We allow to configure a `minReplayDuration`, which defaults to 5s and
maxes out at 15s. Whenever we try to flush and the duration is shorter
than this, we'll just skip flushing.

Additionally, we also skip flushing if the replay is longer than
MAX_SESSION_LIFE + 5s (=60min + 5s). This _should not_ happen,
technically, but apparently it still does. So while we figure out the
root cause of this, we can at least avoid sending stuff in that case.

Author: mydea

packages/browser-integration-tests/scripts/detectFlakyTests.ts

@@ -3,8 +3,6 @@ import * as path from 'path';
 import * as childProcess from 'child_process';
 import { promisify } from 'util';
 
-const exec = promisify(childProcess.exec);
-
 async function run(): Promise<void> {
   let testPaths: string[] = [];
 

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 }) => {
+  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 + 100));
+  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({