test: Fix flaky replay test (#7307)

Author: mydea

packages/integration-tests/suites/replay/errors/errorMode/test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { envelopeRequestParser } from '../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../utils/helpers';
 import {
   expectedClickBreadcrumb,
   expectedConsoleBreadcrumb,
@@ -10,6 +10,7 @@ import {
 import {
   getReplayEvent,
   getReplayRecordingContent,
+  isReplayEvent,
   shouldSkipReplayTest,
   waitForReplayRequest,
 } from '../../../../utils/replayHelpers';
@@ -26,14 +27,18 @@ sentryTest(
     const reqPromise0 = waitForReplayRequest(page, 0);
     const reqPromise1 = waitForReplayRequest(page, 1);
     const reqPromise2 = waitForReplayRequest(page, 2);
+    const reqErrorPromise = waitForErrorRequest(page);
 
     await page.route('https://dsn.ingest.sentry.io/**/*', route => {
       const event = envelopeRequestParser(route.request());
       // error events have no type field
       if (event && !event.type && event.event_id) {
         errorEventId = event.event_id;
       }
-      callsToSentry++;
+      // We only want to count errors & replays here
+      if (event && (!event.type || isReplayEvent(event))) {
+        callsToSentry++;
+      }
 
       return route.fulfill({
         status: 200,
@@ -46,13 +51,16 @@ sentryTest(
 
     await page.goto(url);
     await page.click('#go-background');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
     expect(callsToSentry).toEqual(0);
 
     await page.click('#error');
     const req0 = await reqPromise0;
 
     await page.click('#go-background');
     const req1 = await reqPromise1;
+    await reqErrorPromise;
 
     expect(callsToSentry).toEqual(3); // 1 error, 2 replay events
 
@@ -69,11 +77,12 @@ sentryTest(
     const event2 = getReplayEvent(req2);
     const content2 = getReplayRecordingContent(req2);
 
+    expect(callsToSentry).toBe(4); // 1 error, 3 replay events
+
     expect(event0).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
-        error_ids: [errorEventId],
+        error_ids: [errorEventId!],
         replay_type: 'error',
       }),
     );
@@ -97,7 +106,6 @@ sentryTest(
     expect(event1).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
         replay_type: 'error', // although we're in session mode, we still send 'error' as replay_type
         replay_start_timestamp: undefined,
         segment_id: 1,
@@ -108,14 +116,12 @@ sentryTest(
     // Also the second snapshot should have a full snapshot, as we switched from error to session
     // mode which triggers another checkout
     expect(content1.fullSnapshots).toHaveLength(1);
-    expect(content1.incrementalSnapshots).toHaveLength(0);
 
     // The next event should just be a normal replay event as we're now in session mode and
     // we continue recording everything
     expect(event2).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
         replay_type: 'error',
         replay_start_timestamp: undefined,
         segment_id: 2,

packages/integration-tests/suites/replay/errors/errorsInSession/test.ts

@@ -39,7 +39,6 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await page.click('#go-background');
     const req0 = await reqPromise0;
 
     await page.click('#error');
@@ -57,7 +56,6 @@ sentryTest(
       getExpectedReplayEvent({
         replay_start_timestamp: undefined,
         segment_id: 1,
-        // @ts-ignore this is fine
         error_ids: [errorEventId],
         urls: [],
       }),

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

@@ -2,8 +2,8 @@ import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
-  flushMinDelay: 500,
-  flushMaxDelay: 500,
+  flushMinDelay: 1000,
+  flushMaxDelay: 1000,
 });
 
 Sentry.init({

packages/integration-tests/utils/helpers.ts

@@ -108,6 +108,23 @@ async function getSentryEvents(page: Page, url?: string): Promise<Array<Event>>
   return eventsHandle.jsonValue();
 }
 
+export function waitForErrorRequest(page: Page): Promise<Request> {
+  return page.waitForRequest(req => {
+    const postData = req.postData();
+    if (!postData) {
+      return false;
+    }
+
+    try {
+      const event = envelopeRequestParser(req);
+
+      return !event.type;
+    } catch {
+      return false;
+    }
+  });
+}
+
 /**
  * Waits until a number of requests matching urlRgx at the given URL arrive.
  * If the timout option is configured, this function will abort waiting, even if it hasn't reveived the configured

packages/integration-tests/utils/replayHelpers.ts

@@ -64,7 +64,7 @@ export function waitForReplayRequest(page: Page, segmentId?: number): Promise<Re
   });
 }
 
-function isReplayEvent(event: Event): event is ReplayEvent {
+export function isReplayEvent(event: Event): event is ReplayEvent {
   return event.type === 'replay_event';
 }