Skip to content

ref(tests): Update replay integration tests to avoid flakes. #9025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions packages/browser-integration-tests/suites/replay/bufferMode/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,13 @@ sentryTest(
await reqErrorPromise;
expect(callsToSentry).toEqual(2);

await page.evaluate(async () => {
const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
await replayIntegration.flush();
});

const req0 = await reqPromise0;
const [req0] = await Promise.all([
reqPromise0,
page.evaluate(async () => {
const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
await replayIntegration.flush();
}),
]);

// 2 errors, 1 flush
await reqErrorPromise;
Expand Down Expand Up @@ -226,12 +227,13 @@ sentryTest(
await reqErrorPromise;
expect(callsToSentry).toEqual(2);

await page.evaluate(async () => {
const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
await replayIntegration.flush({ continueRecording: false });
});

const req0 = await reqPromise0;
const [req0] = await Promise.all([
reqPromise0,
page.evaluate(async () => {
const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
await replayIntegration.flush({ continueRecording: false });
}),
]);

// 2 errors, 1 flush
await reqErrorPromise;
Expand Down Expand Up @@ -346,9 +348,12 @@ sentryTest(

// Error sample rate is now at 1.0, this error should create a replay
const reqErrorPromise1 = waitForErrorRequest(page);
await page.click('#error2');
// 1 unsampled error, 1 sampled error -> 1 flush
const req0 = await reqPromise0;
const [req0] = await Promise.all([
// 1 unsampled error, 1 sampled error -> 1 flush
reqPromise0,
page.click('#error2'),
]);

const reqError1 = await reqErrorPromise1;
const errorEvent1 = envelopeRequestParser(reqError1);
expect(callsToSentry).toEqual(3);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
sentryTest.skip();
}

const reqPromise0 = waitForReplayRequest(page, 0);

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
Expand All @@ -20,10 +18,11 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
});
});

const reqPromise0 = waitForReplayRequest(page, 0);

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);
await reqPromise0;
await Promise.all([page.goto(url), reqPromise0]);

const reqPromise1 = waitForReplayRequest(
page,
Expand All @@ -38,11 +37,10 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
await page.click('[data-log]');

// Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
await page.click('[data-log]');

const [req1] = await Promise.all([reqPromise1, page.click('[data-log]')]);
await forceFlushReplay();

const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
const { breadcrumbs } = getCustomRecordingEvents(req1);

expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
expect.arrayContaining([
Expand All @@ -65,8 +63,6 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
sentryTest.skip();
}

const reqPromise0 = waitForReplayRequest(page, 0);

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
Expand All @@ -75,10 +71,11 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
});
});

const reqPromise0 = waitForReplayRequest(page, 0);

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);
await reqPromise0;
await Promise.all([page.goto(url), reqPromise0]);

const reqPromise1 = waitForReplayRequest(
page,
Expand All @@ -90,14 +87,10 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
5_000,
);

await page.click('[data-log-large]');

// Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
await page.click('[data-log-large]');

const [req1] = await Promise.all([reqPromise1, page.click('[data-log-large]')]);
await forceFlushReplay();

const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
const { breadcrumbs } = getCustomRecordingEvents(req1);

expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
expect.arrayContaining([
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,26 +50,25 @@ sentryTest(

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);
await page.click('#go-background');
await new Promise(resolve => setTimeout(resolve, 1000));
await Promise.all([
page.goto(url),
page.click('#go-background'),
new Promise(resolve => setTimeout(resolve, 1000)),
]);

expect(callsToSentry).toEqual(0);

await page.click('#error');
const req0 = await reqPromise0;
const [req0] = await Promise.all([reqPromise0, page.click('#error')]);

expect(callsToSentry).toEqual(2); // 1 error, 1 replay event

await page.click('#go-background');
const req1 = await reqPromise1;
await reqErrorPromise;
const [req1] = await Promise.all([reqPromise1, page.click('#go-background'), reqErrorPromise]);

expect(callsToSentry).toEqual(3); // 1 error, 2 replay events

await page.click('#log');
await page.click('#go-background');
const req2 = await reqPromise2;

const [req2] = await Promise.all([reqPromise2, page.click('#go-background')]);

const event0 = getReplayEvent(req0);
const content0 = getReplayRecordingContent(req0);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ sentryTest(
sentryTest.skip();
}

const reqPromise0 = waitForReplayRequest(page, 0);

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
Expand All @@ -22,26 +20,17 @@ sentryTest(

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);
const res0 = await reqPromise0;

const reqPromise1 = waitForReplayRequest(page);

void page.click('#button-add');
const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
await forceFlushReplay();
const res1 = await reqPromise1;

const reqPromise2 = waitForReplayRequest(page);

void page.click('#button-modify');
const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add')]);
await forceFlushReplay();
const res2 = await reqPromise2;

const reqPromise3 = waitForReplayRequest(page);
const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify')]);
await forceFlushReplay();

void page.click('#button-remove');
const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove')]);
await forceFlushReplay();
const res3 = await reqPromise3;

const replayData0 = getReplayRecordingContent(res0);
const replayData1 = getReplayRecordingContent(res1);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ sentryTest(
sentryTest.skip();
}

const reqPromise0 = waitForReplayRequest(page, 0);

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
Expand All @@ -25,23 +23,24 @@ sentryTest(
});
});

const reqPromise0 = waitForReplayRequest(page, 0);

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);
const res0 = await reqPromise0;
const [res0] = await Promise.all([reqPromise0, page.goto(url)]);
await forceFlushReplay();

const reqPromise1 = waitForReplayRequest(page);

void page.click('#button-add');
const [res1] = await Promise.all([reqPromise1, page.click('#button-add')]);
await forceFlushReplay();
const res1 = await reqPromise1;

// replay should be stopped due to mutation limit
let replay = await getReplaySnapshot(page);
expect(replay.session).toBe(undefined);
expect(replay._isEnabled).toBe(false);

void page.click('#button-modify');
await page.click('#button-modify');
await forceFlushReplay();

await page.click('#button-remove');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa
sentryTest.skip();
}

const reqPromise0 = waitForReplayRequest(page, 0);
const reqPromise1 = waitForReplayRequest(page, 1);

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
Expand All @@ -22,33 +19,42 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa
});
});

const reqPromise0 = waitForReplayRequest(page, 0);
const reqPromise1 = waitForReplayRequest(page, 1);

const url = await getLocalTestPath({ testDir: __dirname });

await page.goto(url);

await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2));

await page.reload();
await page.click('#button1');
await Promise.all([page.reload(), page.click('#button1')]);

// After the second reload, we should have a new session (because we exceeded max age)
const reqPromise3 = waitForReplayRequest(page, 0);

await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2 + 100));

void page.click('#button1');
await page.evaluate(`Object.defineProperty(document, 'visibilityState', {
const [req0, req1] = await Promise.all([
reqPromise0,
reqPromise1,
page.click('#button1'),
page.evaluate(
`Object.defineProperty(document, 'visibilityState', {
configurable: true,
get: function () {
return 'hidden';
},
});
document.dispatchEvent(new Event('visibilitychange'));`);

const replayEvent0 = getReplayEvent(await reqPromise0);
document.dispatchEvent(new Event('visibilitychange'));`,
),
]);

const replayEvent0 = getReplayEvent(req0);
expect(replayEvent0).toEqual(getExpectedReplayEvent({}));

const replayEvent1 = getReplayEvent(await reqPromise1);
const replayEvent1 = getReplayEvent(req1);
expect(replayEvent1).toEqual(
getExpectedReplayEvent({
segment_id: 1,
Expand Down
Loading