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

mydea · web-flow · commit 07e2e43f7412 · 2023-07-20T17:39:14.000+02:00
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.
diff --git a/packages/browser-integration-tests/scripts/detectFlakyTests.ts b/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[] = [];
 
diff --git a/packages/browser-integration-tests/suites/replay/bufferMode/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/captureReplayFromReplayPackage/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/compression/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/customEvents/init.js b/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,
 });
diff --git a/packages/browser-integration-tests/suites/replay/dsc/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/errors/droppedError/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/errors/errorModeCustomTransport/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/errors/errorNotSent/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/errors/errorsInSession/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/errors/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestBody/init.js b/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,
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestHeaders/init.js b/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'],
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseBody/init.js b/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,
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseHeaders/init.js b/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'],
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureRequestBody/init.js b/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,
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureRequestHeaders/init.js b/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'],
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureResponseBody/init.js b/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,
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureResponseHeaders/init.js b/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'],
diff --git a/packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/fileInput/init.js b/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,
 });
diff --git a/packages/browser-integration-tests/suites/replay/flushing/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/keyboardEvents/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/minReplayDuration/init.js b/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://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay],
+});
diff --git a/packages/browser-integration-tests/suites/replay/minReplayDuration/template.html b/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>
diff --git a/packages/browser-integration-tests/suites/replay/minReplayDuration/test.ts b/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);
+});
diff --git a/packages/browser-integration-tests/suites/replay/multiple-pages/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/privacyBlock/init.js b/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'],
diff --git a/packages/browser-integration-tests/suites/replay/privacyDefault/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/privacyInput/init.js b/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,
 });
diff --git a/packages/browser-integration-tests/suites/replay/privacyInputMaskAll/init.js b/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,
 });
diff --git a/packages/browser-integration-tests/suites/replay/replayShim/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/requests/init.js b/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,
 });
 
diff --git a/packages/browser-integration-tests/suites/replay/sampling/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/sessionExpiry/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/sessionInactive/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/sessionMaxAge/init.js b/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({
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/disable/init.js b/packages/browser-integration-tests/suites/replay/slowClick/disable/init.js
diff --git a/packages/browser-integration-tests/suites/replay/slowClick/init.js b/packages/browser-integration-tests/suites/replay/slowClick/init.js
diff --git a/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js b/packages/browser-integration-tests/suites/replay/throttleBreadcrumbs/init.js
diff --git a/packages/browser-integration-tests/suites/replay/unicode/compressed/init.js b/packages/browser-integration-tests/suites/replay/unicode/compressed/init.js
diff --git a/packages/browser-integration-tests/suites/replay/unicode/uncompressed/init.js b/packages/browser-integration-tests/suites/replay/unicode/uncompressed/init.js
diff --git a/packages/replay/src/constants.ts b/packages/replay/src/constants.ts
diff --git a/packages/replay/src/integration.ts b/packages/replay/src/integration.ts
diff --git a/packages/replay/src/replay.ts b/packages/replay/src/replay.ts
diff --git a/packages/replay/src/types/replay.ts b/packages/replay/src/types/replay.ts
diff --git a/packages/replay/test/integration/errorSampleRate.test.ts b/packages/replay/test/integration/errorSampleRate.test.ts
diff --git a/packages/replay/test/integration/flush.test.ts b/packages/replay/test/integration/flush.test.ts
diff --git a/packages/replay/test/mocks/mockSdk.ts b/packages/replay/test/mocks/mockSdk.ts
diff --git a/packages/replay/test/utils/setupReplayContainer.ts b/packages/replay/test/utils/setupReplayContainer.ts
