Skip to content

Commit fa684ab

Browse files
Lms24Lms24
authored
fix(browser): Avoid recording long animation frame spans starting before their parent span (#14186)
- Check for start time of parent navigation span and don't start long animation frame span if its start timestamp is earlier than the navigation start time stamp - Refactor span starting logic to use common helper function to compensate the bundle size increase - Add regression test that failed previously - Improve regression test from #14183 to avoid flakes and improve the in-test navigation
1 parent 7c7272b commit fa684ab

File tree

8 files changed

+97
-9
lines changed

8 files changed

+97
-9
lines changed

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-before-navigation/init.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
5+
Sentry.init({
6+
dsn: 'https://[email protected]/1337',
7+
integrations: [
8+
Sentry.browserTracingIntegration({
9+
idleTimeout: 9000,
10+
enableLongTask: false,
11+
enableLongAnimationFrame: true,
12+
instrumentPageLoad: false,
13+
enableInp: false,
14+
}),
15+
],
16+
tracesSampleRate: 1,
17+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-before-navigation/subject.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
function getElapsed(startTime) {
2+
const time = Date.now();
3+
return time - startTime;
4+
}
5+
6+
function handleClick() {
7+
const startTime = Date.now();
8+
while (getElapsed(startTime) < 105) {
9+
//
10+
}
11+
window.history.pushState({}, '', `#myHeading`);
12+
}
13+
14+
const button = document.getElementById('clickme');
15+
16+
console.log('button', button);
17+
18+
button.addEventListener('click', handleClick);

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-before-navigation/template.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button id="clickme">
8+
click me to start the long animation!
9+
</button>
10+
11+
<h1 id="myHeading">My Heading</h1>
12+
</body>
13+
</html>

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-before-navigation/test.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { expect } from '@playwright/test';
2+
import type { Event } from '@sentry/types';
3+
4+
import { sentryTest } from '../../../../utils/fixtures';
5+
import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
6+
7+
sentryTest(
8+
"doesn't capture long animation frame that starts before a navigation.",
9+
async ({ browserName, getLocalTestPath, page }) => {
10+
// Long animation frames only work on chrome
11+
if (shouldSkipTracingTest() || browserName !== 'chromium') {
12+
sentryTest.skip();
13+
}
14+
15+
const url = await getLocalTestPath({ testDir: __dirname });
16+
17+
await page.goto(url);
18+
19+
const navigationTransactionEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
20+
21+
await page.locator('#clickme').click();
22+
23+
const navigationTransactionEvent = await navigationTransactionEventPromise;
24+
25+
expect(navigationTransactionEvent.contexts?.trace?.op).toBe('navigation');
26+
27+
const loafSpans = navigationTransactionEvent.spans?.filter(s => s.op?.startsWith('ui.long-animation-frame'));
28+
29+
expect(loafSpans?.length).toEqual(0);
30+
},
31+
);

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-before-navigation/init.js

-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,4 @@ Sentry.init({
1515
}),
1616
],
1717
tracesSampleRate: 1,
18-
debug: true,
1918
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-before-navigation/subject.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ longTaskButton?.addEventListener('click', () => {
1313
}
1414

1515
// trigger a navigation in the same event loop tick
16-
window.history.pushState({}, '', '/#myHeading');
16+
window.history.pushState({}, '', '#myHeading');
1717
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-tasks-before-navigation/test.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ sentryTest(
1515

1616
await page.goto(url);
1717

18+
const navigationTransactionEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
19+
1820
await page.locator('#myButton').click();
1921

20-
const navigationTransactionEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);
22+
const navigationTransactionEvent = await navigationTransactionEventPromise;
2123

2224
expect(navigationTransactionEvent.contexts?.trace?.op).toBe('navigation');
2325

‎packages/browser-utils/src/metrics/browserMetrics.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ export function startTrackingLongAnimationFrames(): void {
143143
// we directly observe `long-animation-frame` events instead of through the web-vitals
144144
// `observe` helper function.
145145
const observer = new PerformanceObserver(list => {
146-
if (!getActiveSpan()) {
146+
const parent = getActiveSpan();
147+
if (!parent) {
147148
return;
148149
}
149150
for (const entry of list.getEntries() as PerformanceLongAnimationFrameTiming[]) {
@@ -152,6 +153,17 @@ export function startTrackingLongAnimationFrames(): void {
152153
}
153154

154155
const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime);
156+
157+
const { start_timestamp: parentStartTimestamp, op: parentOp } = spanToJSON(parent);
158+
159+
if (parentOp === 'navigation' && parentStartTimestamp && startTime < parentStartTimestamp) {
160+
// Skip adding the span if the long animation frame started before the navigation started.
161+
// `startAndEndSpan` will otherwise adjust the parent's start time to the span's start
162+
// time, potentially skewing the duration of the actual navigation as reported via our
163+
// routing instrumentations
164+
continue;
165+
}
166+
155167
const duration = msToSec(entry.duration);
156168

157169
const attributes: SpanAttributes = {
@@ -172,15 +184,11 @@ export function startTrackingLongAnimationFrames(): void {
172184
attributes['browser.script.source_char_position'] = sourceCharPosition;
173185
}
174186

175-
const span = startInactiveSpan({
187+
startAndEndSpan(parent, startTime, startTime + duration, {
176188
name: 'Main UI thread blocked',
177189
op: 'ui.long-animation-frame',
178-
startTime,
179190
attributes,
180191
});
181-
if (span) {
182-
span.end(startTime + duration);
183-
}
184192
}
185193
});
186194

0 commit comments

Comments
 (0)