From 0c16c1eae475c33af94a879bbe76dd42922b0e97 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 23 Feb 2023 15:08:53 +0100 Subject: [PATCH 01/10] test(replay): Potentially fix flaky flush test --- .../suites/replay/flushing/template.html | 1 + .../suites/replay/flushing/test.ts | 109 ++++++++++-------- 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/template.html b/packages/integration-tests/suites/replay/flushing/template.html index 31cfc73ec3c3..95d88fe7ee24 100644 --- a/packages/integration-tests/suites/replay/flushing/template.html +++ b/packages/integration-tests/suites/replay/flushing/template.html @@ -5,5 +5,6 @@ + diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index e448a57dd964..3df7eca76826 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -7,56 +7,63 @@ import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../. // Sync this with init.js - not we take seconds here instead of ms const FLUSH_DELAY_SECONDS = 0.5; -sentryTest('replay recording flushes every 5s', async ({ getLocalTestPath, page }) => { - if (shouldSkipReplayTest()) { - sentryTest.skip(); - } - - const reqPromise0 = waitForReplayRequest(page, 0); - const reqPromise1 = waitForReplayRequest(page, 1); - const reqPromise2 = waitForReplayRequest(page, 2); - - await page.route('https://dsn.ingest.sentry.io/**/*', route => { - return route.fulfill({ - status: 200, - contentType: 'application/json', - body: JSON.stringify({ id: 'test-id' }), +for (let index = 0; index < 25; index++) { + console.log('test', index); + sentryTest(`replay recording flushes every FLUSH_DELAY_SECONDS (${index})}`, async ({ getLocalTestPath, page }) => { + if (shouldSkipReplayTest()) { + sentryTest.skip(); + } + + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + const reqPromise2 = waitForReplayRequest(page, 2); + + 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); - const replayEvent0 = getReplayEvent(await reqPromise0); - expect(replayEvent0).toEqual(getExpectedReplayEvent()); - - // trigger mouse click - void page.click('#go-background'); - - const replayEvent1 = getReplayEvent(await reqPromise1); - expect(replayEvent1).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] })); - - // trigger mouse click every 100ms, it should still flush after 5s even if clicks are ongoing - for (let i = 0; i < 70; i++) { - setTimeout(async () => { - try { - await page.click('#go-background'); - } catch { - // ignore errors here, we don't care if the page is closed - } - }, i * 100); - } - - const replayEvent2 = getReplayEvent(await reqPromise2); - expect(replayEvent2).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] })); - - // Ensure time diff is about 500ms between each event - const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; - const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - - // We want to check that the diff is between 0.1 and 0.9 seconds, to accomodate for some wiggle room - expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); - expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); -}); + const url = await getLocalTestPath({ testDir: __dirname }); + + await page.goto(url); + const replayEvent0 = getReplayEvent(await reqPromise0); + expect(replayEvent0).toEqual(getExpectedReplayEvent()); + + // trigger mouse click + void page.click('#go-background'); + + const replayEvent1 = getReplayEvent(await reqPromise1); + expect(replayEvent1).toEqual( + getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), + ); + + // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing + for (let i = 0; i < 70; i++) { + setTimeout(async () => { + try { + await page.click('#something'); + } catch { + // ignore errors here, we don't care if the page is closed + } + }, i * 100); + } + + const replayEvent2 = getReplayEvent(await reqPromise2); + expect(replayEvent2).toEqual( + getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] }), + ); + + // Ensure time diff is about 500ms between each event + const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; + const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; + + // We want to check that the diff is between 0.1 and 0.9 seconds, to accomodate for some wiggle room + expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); + expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); + expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); + expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); + }); +} From 896f1bb7760aeb7b83072239ccf87adf7d66f609 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 23 Feb 2023 15:34:15 +0100 Subject: [PATCH 02/10] loosen time margin and ease up click events --- .../suites/replay/flushing/test.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 3df7eca76826..ac6ed256136c 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -8,7 +8,6 @@ import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../. const FLUSH_DELAY_SECONDS = 0.5; for (let index = 0; index < 25; index++) { - console.log('test', index); sentryTest(`replay recording flushes every FLUSH_DELAY_SECONDS (${index})}`, async ({ getLocalTestPath, page }) => { if (shouldSkipReplayTest()) { sentryTest.skip(); @@ -48,7 +47,7 @@ for (let index = 0; index < 25; index++) { } catch { // ignore errors here, we don't care if the page is closed } - }, i * 100); + }, i * 150); } const replayEvent2 = getReplayEvent(await reqPromise2); @@ -60,10 +59,10 @@ for (let index = 0; index < 25; index++) { const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - // We want to check that the diff is between 0.1 and 0.9 seconds, to accomodate for some wiggle room - expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); - expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.4); - expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); + // We want to check that the diff is between 0.05 and 0.95 seconds, to accomodate for some wiggle room + expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.45); + expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.45); + expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.45); + expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.45); }); } From ae301880abea273f05a2add864fed80df13176fb Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 23 Feb 2023 17:39:11 +0100 Subject: [PATCH 03/10] click more often --- packages/integration-tests/suites/replay/flushing/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index ac6ed256136c..0e69fcd6abec 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -47,7 +47,7 @@ for (let index = 0; index < 25; index++) { } catch { // ignore errors here, we don't care if the page is closed } - }, i * 150); + }, i * 50); } const replayEvent2 = getReplayEvent(await reqPromise2); From 727c05f9c21ee342ba8e99530cde0fa7a46c3279 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 23 Feb 2023 18:00:32 +0100 Subject: [PATCH 04/10] click less often --- packages/integration-tests/suites/replay/flushing/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 0e69fcd6abec..eadbe793dd22 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -47,7 +47,7 @@ for (let index = 0; index < 25; index++) { } catch { // ignore errors here, we don't care if the page is closed } - }, i * 50); + }, i * 200); } const replayEvent2 = getReplayEvent(await reqPromise2); From a381cb949795b2b966d253511db4eac4f2520758 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 24 Feb 2023 16:00:25 +0100 Subject: [PATCH 05/10] =?UTF-8?q?only=20click=20once=20=F0=9F=A5=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../suites/replay/flushing/test.ts | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index eadbe793dd22..0b11ff6644e1 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -39,16 +39,17 @@ for (let index = 0; index < 25; index++) { getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), ); - // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing - for (let i = 0; i < 70; i++) { - setTimeout(async () => { - try { - await page.click('#something'); - } catch { - // ignore errors here, we don't care if the page is closed - } - }, i * 200); - } + // // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing + // for (let i = 0; i < 70; i++) { + // setTimeout(async () => { + // try { + // await page.click('#something'); + // } catch { + // // ignore errors here, we don't care if the page is closed + // } + // }, i * 100); + // } + await page.click('#something'); const replayEvent2 = getReplayEvent(await reqPromise2); expect(replayEvent2).toEqual( From 436a4c9eb994c5c6f2bb04ce0b2ff8078555f8e0 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 24 Feb 2023 16:15:42 +0100 Subject: [PATCH 06/10] avoid going to background --- packages/integration-tests/suites/replay/flushing/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index 0b11ff6644e1..d02595b084b1 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -32,7 +32,7 @@ for (let index = 0; index < 25; index++) { expect(replayEvent0).toEqual(getExpectedReplayEvent()); // trigger mouse click - void page.click('#go-background'); + void page.click('#something'); const replayEvent1 = getReplayEvent(await reqPromise1); expect(replayEvent1).toEqual( From 2bba4b98386ea94899b009489e040ddd9f04d934 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 27 Feb 2023 17:58:46 +0100 Subject: [PATCH 07/10] ease up time expectation --- .../suites/replay/flushing/test.ts | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index d02595b084b1..dc478460c4b4 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -32,24 +32,23 @@ for (let index = 0; index < 25; index++) { expect(replayEvent0).toEqual(getExpectedReplayEvent()); // trigger mouse click - void page.click('#something'); + void page.click('#go-background'); const replayEvent1 = getReplayEvent(await reqPromise1); expect(replayEvent1).toEqual( getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), ); - // // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing - // for (let i = 0; i < 70; i++) { - // setTimeout(async () => { - // try { - // await page.click('#something'); - // } catch { - // // ignore errors here, we don't care if the page is closed - // } - // }, i * 100); - // } - await page.click('#something'); + // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing + for (let i = 0; i < 70; i++) { + setTimeout(async () => { + try { + await page.click('#go-background'); + } catch { + // ignore errors here, we don't care if the page is closed + } + }, i * 100); + } const replayEvent2 = getReplayEvent(await reqPromise2); expect(replayEvent2).toEqual( @@ -60,10 +59,13 @@ for (let index = 0; index < 25; index++) { const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - // We want to check that the diff is between 0.05 and 0.95 seconds, to accomodate for some wiggle room - expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS + 0.45); - expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.45); - expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS + 0.45); - expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.45); + // Playwright is very inconsistent with timing, so we have to ease up the expectations a lot here. + // Generally, we'd expect to see a diff of FLUSH_DELAY_SECONDS, but we've observed test flakes up to 2.5s. + // The beste we can do here is ensure that the flushes actually happen in a somewhat reasonable time frame within + // one order of magnitude of FLUSH_DELAY_SECONDS. + expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS * 10); + expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); + expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS * 10); + expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); }); } From 3e744582526b10c4025056827dc701e8385566c9 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 28 Feb 2023 10:00:27 +0100 Subject: [PATCH 08/10] don't compression, change test expectation --- .../suites/replay/flushing/init.js | 1 + .../suites/replay/flushing/template.html | 1 - .../suites/replay/flushing/test.ts | 112 ++++++++---------- 3 files changed, 51 insertions(+), 63 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/init.js b/packages/integration-tests/suites/replay/flushing/init.js index f64b8fff4e50..db6a0aa21821 100644 --- a/packages/integration-tests/suites/replay/flushing/init.js +++ b/packages/integration-tests/suites/replay/flushing/init.js @@ -4,6 +4,7 @@ window.Sentry = Sentry; window.Replay = new Sentry.Replay({ flushMinDelay: 500, flushMaxDelay: 500, + useCompression: false, }); Sentry.init({ diff --git a/packages/integration-tests/suites/replay/flushing/template.html b/packages/integration-tests/suites/replay/flushing/template.html index 95d88fe7ee24..d8efabb30090 100644 --- a/packages/integration-tests/suites/replay/flushing/template.html +++ b/packages/integration-tests/suites/replay/flushing/template.html @@ -4,7 +4,6 @@ - diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index dc478460c4b4..f59c4071ad33 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -4,68 +4,56 @@ import { sentryTest } from '../../../utils/fixtures'; import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates'; import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; -// Sync this with init.js - not we take seconds here instead of ms -const FLUSH_DELAY_SECONDS = 0.5; - -for (let index = 0; index < 25; index++) { - sentryTest(`replay recording flushes every FLUSH_DELAY_SECONDS (${index})}`, async ({ getLocalTestPath, page }) => { - if (shouldSkipReplayTest()) { - sentryTest.skip(); - } - - const reqPromise0 = waitForReplayRequest(page, 0); - const reqPromise1 = waitForReplayRequest(page, 1); - const reqPromise2 = waitForReplayRequest(page, 2); - - await page.route('https://dsn.ingest.sentry.io/**/*', route => { - return route.fulfill({ - status: 200, - contentType: 'application/json', - body: JSON.stringify({ id: 'test-id' }), +for (let index = 0; index < 50; index++) { + sentryTest( + `replay events are flushed after max flash delay was reached (${index})`, + async ({ getLocalTestPath, page }) => { + if (shouldSkipReplayTest()) { + sentryTest.skip(); + } + + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + const reqPromise2 = waitForReplayRequest(page, 2); + + 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); - const replayEvent0 = getReplayEvent(await reqPromise0); - expect(replayEvent0).toEqual(getExpectedReplayEvent()); - - // trigger mouse click - void page.click('#go-background'); - - const replayEvent1 = getReplayEvent(await reqPromise1); - expect(replayEvent1).toEqual( - getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), - ); - - // trigger mouse click every 100ms, it should still flush after 0.5s even if clicks are ongoing - for (let i = 0; i < 70; i++) { - setTimeout(async () => { - try { - await page.click('#go-background'); - } catch { - // ignore errors here, we don't care if the page is closed - } - }, i * 100); - } - - const replayEvent2 = getReplayEvent(await reqPromise2); - expect(replayEvent2).toEqual( - getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] }), - ); - - // Ensure time diff is about 500ms between each event - const diff1 = replayEvent1.timestamp! - replayEvent0.timestamp!; - const diff2 = replayEvent2.timestamp! - replayEvent1.timestamp!; - // Playwright is very inconsistent with timing, so we have to ease up the expectations a lot here. - // Generally, we'd expect to see a diff of FLUSH_DELAY_SECONDS, but we've observed test flakes up to 2.5s. - // The beste we can do here is ensure that the flushes actually happen in a somewhat reasonable time frame within - // one order of magnitude of FLUSH_DELAY_SECONDS. - expect(diff1).toBeLessThan(FLUSH_DELAY_SECONDS * 10); - expect(diff1).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); - expect(diff2).toBeLessThan(FLUSH_DELAY_SECONDS * 10); - expect(diff2).toBeGreaterThanOrEqual(FLUSH_DELAY_SECONDS - 0.4); - }); + const url = await getLocalTestPath({ testDir: __dirname }); + + await page.goto(url); + const replayEvent0 = getReplayEvent(await reqPromise0); + expect(replayEvent0).toEqual(getExpectedReplayEvent()); + + // trigger one mouse click + void page.click('#something'); + + // this must eventually lead to a flush after the max delay was reached + const replayEvent1 = getReplayEvent(await reqPromise1); + expect(replayEvent1).toEqual( + getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), + ); + + // trigger mouse click every 100ms, it should still flush after the max delay even if clicks are ongoing + for (let i = 0; i < 700; i++) { + setTimeout(async () => { + try { + await page.click('#something'); + } catch { + // ignore errors here, we don't care if the page is closed + } + }, i * 100); + } + + const replayEvent2 = getReplayEvent(await reqPromise2); + expect(replayEvent2).toEqual( + getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] }), + ); + }, + ); } From c567ade0ad7b62bbeaca556825add7ae64f4cba2 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 28 Feb 2023 10:03:53 +0100 Subject: [PATCH 09/10] add comment --- packages/integration-tests/suites/replay/flushing/test.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index f59c4071ad33..cd8986f5ca74 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -5,6 +5,14 @@ import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates'; import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; for (let index = 0; index < 50; index++) { + /* + * In this test we're explicitly not forcing a flush by triggering a visibility change. + * Instead, we want to verify that the `flushMaxDelay` works in the sense that eventually + * a flush is triggered if some events are in the buffer. + * Note: Due to timing problems and inconsistencies in Playwright/CI, we can't reliably + * assert on the flush timestamps. Therefore we only assert that events were eventually + * sent (i.e. flushed). + */ sentryTest( `replay events are flushed after max flash delay was reached (${index})`, async ({ getLocalTestPath, page }) => { From 2ad89abed5ef8b3ceb9df91cca50a7932b6639ac Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 28 Feb 2023 11:18:02 +0100 Subject: [PATCH 10/10] cleanup --- .../suites/replay/flushing/test.ts | 109 ++++++++---------- 1 file changed, 50 insertions(+), 59 deletions(-) diff --git a/packages/integration-tests/suites/replay/flushing/test.ts b/packages/integration-tests/suites/replay/flushing/test.ts index cd8986f5ca74..dfc361398def 100644 --- a/packages/integration-tests/suites/replay/flushing/test.ts +++ b/packages/integration-tests/suites/replay/flushing/test.ts @@ -4,64 +4,55 @@ import { sentryTest } from '../../../utils/fixtures'; import { getExpectedReplayEvent } from '../../../utils/replayEventTemplates'; import { getReplayEvent, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers'; -for (let index = 0; index < 50; index++) { - /* - * In this test we're explicitly not forcing a flush by triggering a visibility change. - * Instead, we want to verify that the `flushMaxDelay` works in the sense that eventually - * a flush is triggered if some events are in the buffer. - * Note: Due to timing problems and inconsistencies in Playwright/CI, we can't reliably - * assert on the flush timestamps. Therefore we only assert that events were eventually - * sent (i.e. flushed). - */ - sentryTest( - `replay events are flushed after max flash delay was reached (${index})`, - async ({ getLocalTestPath, page }) => { - if (shouldSkipReplayTest()) { - sentryTest.skip(); +/* + * In this test we're explicitly not forcing a flush by triggering a visibility change. + * Instead, we want to verify that the `flushMaxDelay` works in the sense that eventually + * a flush is triggered if some events are in the buffer. + * Note: Due to timing problems and inconsistencies in Playwright/CI, we can't reliably + * assert on the flush timestamps. Therefore we only assert that events were eventually + * sent (i.e. flushed). + */ +sentryTest('replay events are flushed after max flush delay was reached', async ({ getLocalTestPath, page }) => { + if (shouldSkipReplayTest()) { + sentryTest.skip(); + } + + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + const reqPromise2 = waitForReplayRequest(page, 2); + + 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); + const replayEvent0 = getReplayEvent(await reqPromise0); + expect(replayEvent0).toEqual(getExpectedReplayEvent()); + + // trigger one mouse click + void page.click('#something'); + + // this must eventually lead to a flush after the max delay was reached + const replayEvent1 = getReplayEvent(await reqPromise1); + expect(replayEvent1).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] })); + + // trigger mouse click every 100ms, it should still flush after the max delay even if clicks are ongoing + for (let i = 0; i < 700; i++) { + setTimeout(async () => { + try { + await page.click('#something'); + } catch { + // ignore errors here, we don't care if the page is closed } + }, i * 100); + } - const reqPromise0 = waitForReplayRequest(page, 0); - const reqPromise1 = waitForReplayRequest(page, 1); - const reqPromise2 = waitForReplayRequest(page, 2); - - 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); - const replayEvent0 = getReplayEvent(await reqPromise0); - expect(replayEvent0).toEqual(getExpectedReplayEvent()); - - // trigger one mouse click - void page.click('#something'); - - // this must eventually lead to a flush after the max delay was reached - const replayEvent1 = getReplayEvent(await reqPromise1); - expect(replayEvent1).toEqual( - getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 1, urls: [] }), - ); - - // trigger mouse click every 100ms, it should still flush after the max delay even if clicks are ongoing - for (let i = 0; i < 700; i++) { - setTimeout(async () => { - try { - await page.click('#something'); - } catch { - // ignore errors here, we don't care if the page is closed - } - }, i * 100); - } - - const replayEvent2 = getReplayEvent(await reqPromise2); - expect(replayEvent2).toEqual( - getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] }), - ); - }, - ); -} + const replayEvent2 = getReplayEvent(await reqPromise2); + expect(replayEvent2).toEqual(getExpectedReplayEvent({ replay_start_timestamp: undefined, segment_id: 2, urls: [] })); +});