Skip to content

test(browser): Fix flaky long task, pageload cancellation and CLS timing assertions #25518

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.

Sign up for GitHub

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

Open
sentry-junior wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

test(browser): Fix flaky long task, pageload cancellation and CLS timing assertions #25518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions ...ests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled-static/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);

Expand Down Expand Up @@ -111,6 +111,6 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);
4 changes: 2 additions & 2 deletions ...ation-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);

Expand Down Expand Up @@ -114,5 +114,5 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
});
4 changes: 2 additions & 2 deletions ...s/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled-static/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);

Expand Down Expand Up @@ -113,6 +113,6 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);
4 changes: 2 additions & 2 deletions ...s/suites/tracing/browserTracingIntegration/long-tasks-and-animation-frame-enabled/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ sentryTest(
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
},
);

Expand Down Expand Up @@ -116,5 +116,5 @@ sentryTest('captures long animation frame span for event listener.', async ({ br
const duration = end - start;

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
});
13 changes: 7 additions & 6 deletions ...egration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled-static/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,19 @@ sentryTest('should capture long task.', async ({ browserName, getLocalTestUrl, p

expect(uiSpans?.length).toBeGreaterThan(0);

const [firstUISpan] = uiSpans || [];
expect(firstUISpan).toEqual(
const getDuration = (span: { start_timestamp?: number; timestamp?: number }): number =>
(span.timestamp ?? 0) - (span.start_timestamp ?? 0);
// Other long tasks (e.g. SDK evaluation) can happen during pageload, so look at the longest one, which is the blocking script
const [longTaskSpan] = [...(uiSpans || [])].sort((a, b) => getDuration(b) - getDuration(a));
expect(longTaskSpan).toEqual(
expect.objectContaining({
op: 'ui.long_task',
description: 'Main UI thread blocked',
parent_span_id: eventData.contexts?.trace?.span_id,
}),
);
const start = firstUISpan.start_timestamp ?? 0;
const end = firstUISpan.timestamp ?? 0;
const duration = end - start;
const duration = getDuration(longTaskSpan);

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
});
13 changes: 7 additions & 6 deletions ...ser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-enabled/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,11 @@ sentryTest('captures long task.', async ({ browserName, getLocalTestUrl, page })
const uiSpans = spans.filter(s => getSpanOp(s)?.startsWith('ui'));
expect(uiSpans.length).toBeGreaterThan(0);

const [firstUISpan] = uiSpans;
expect(firstUISpan).toEqual(
const getDuration = (span: { start_timestamp?: number; end_timestamp?: number }): number =>
(span.end_timestamp ?? 0) - (span.start_timestamp ?? 0);
// Other long tasks (e.g. SDK evaluation) can happen during pageload, so look at the longest one, which is the blocking script
const [longTaskSpan] = [...uiSpans].sort((a, b) => getDuration(b) - getDuration(a));
expect(longTaskSpan).toEqual(
expect.objectContaining({
name: 'Main UI thread blocked',
parent_span_id: pageloadSpan.span_id,
Expand All @@ -35,10 +38,8 @@ sentryTest('captures long task.', async ({ browserName, getLocalTestUrl, page })
}),
);

const start = firstUISpan.start_timestamp ?? 0;
const end = firstUISpan.end_timestamp ?? 0;
const duration = end - start;
const duration = getDuration(longTaskSpan);

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
});
13 changes: 7 additions & 6 deletions ...tion-tests/suites/tracing/browserTracingIntegration/long-tasks-no-animation-frame/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,19 @@ sentryTest('should capture long task.', async ({ browserName, getLocalTestUrl, p

expect(uiSpans.length).toBeGreaterThan(0);

const [firstUISpan] = uiSpans;
expect(firstUISpan).toEqual(
const getDuration = (span: { start_timestamp?: number; end_timestamp?: number }): number =>
(span.end_timestamp ?? 0) - (span.start_timestamp ?? 0);
// Other long tasks (e.g. SDK evaluation) can happen during pageload, so look at the longest one, which is the blocking script
const [longTaskSpan] = [...uiSpans].sort((a, b) => getDuration(b) - getDuration(a));
expect(longTaskSpan).toEqual(
expect.objectContaining({
attributes: expect.objectContaining({ [SENTRY_OP]: { type: 'string', value: 'ui.long_task' } }),
name: 'Main UI thread blocked',
parent_span_id: pageloadSpan.span_id,
}),
);
const start = firstUISpan.start_timestamp ?? 0;
const end = firstUISpan.end_timestamp ?? 0;
const duration = end - start;
const duration = getDuration(longTaskSpan);

expect(duration).toBeGreaterThanOrEqual(0.1);
expect(duration).toBeLessThanOrEqual(0.15);
expect(duration).toBeLessThan(1);
});
5 changes: 3 additions & 2 deletions ...tests/suites/tracing/browserTracingIntegration/reportPageLoaded-static/navigation/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ sentryTest(
[SENTRY_IDLE_SPAN_FINISH_REASON]: 'cancelled',
});

// ending span after 1s but adding a margin of 0.5s to account for timing weirdness in CI to avoid flakes
expect(spanDurationSeconds).toBeLessThan(1.5);
// The navigation starts 1s after init, but init itself can run well after the time origin on slow CI machines.
// Calling `reportPageLoaded()` would only end the span after 2.5s.
expect(spanDurationSeconds).toBeLessThan(2.5);
},
);
5 changes: 3 additions & 2 deletions ...ration-tests/suites/tracing/browserTracingIntegration/reportPageLoaded/navigation/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ sentryTest(
[SENTRY_IDLE_SPAN_FINISH_REASON]: { type: 'string', value: 'cancelled' },
});

// ending span after 1s but adding a margin of 0.5s to account for timing weirdness in CI to avoid flakes
expect(spanDurationSeconds).toBeLessThan(1.5);
// The navigation starts 1s after init, but init itself can run well after the time origin on slow CI machines.
// Calling `reportPageLoaded()` would only end the span after 2.5s.
expect(spanDurationSeconds).toBeLessThan(2.5);
},
);
2 changes: 1 addition & 1 deletion dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ sentryTest('captures CLS as a streamed span with source attributes', async ({ ge
[
{ cls: 0.05, min: 0.03, max: 0.07, source: 'body > div#content > p#partial' },
{ cls: 0.21, min: 0.18, max: 0.23, source: 'body > div#content > p' },
{ cls: 0.35, min: 0.34, max: 0.36, source: 'body > div#content > p' },
{ cls: 0.35, min: 0.32, max: 0.38, source: 'body > div#content > p' },
].forEach(({ cls, min, max, source }) => {
sentryTest(`captures CLS ${cls} with its source`, async ({ getLocalTestUrl, page }) => {
const url = await getLocalTestUrl({ testDir: __dirname });
Expand Down
Loading