Skip to content

Commit 3e48b91

Browse files
edwardgou-sentryedwardgou-sentry
committed
fix for loop and add test
1 parent e5e72b0 commit 3e48b91

File tree

8 files changed

+166
-32
lines changed

8 files changed

+166
-32
lines changed

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/assets/script.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
const delay = e => {
2-
const startTime = Date.now();
1+
const createDelayFunction =
2+
(delay = 70) =>
3+
e => {
4+
const startTime = Date.now();
35

4-
function getElasped() {
5-
const time = Date.now();
6-
return time - startTime;
7-
}
6+
function getElasped() {
7+
const time = Date.now();
8+
return time - startTime;
9+
}
810

9-
while (getElasped() < 70) {
10-
//
11-
}
11+
while (getElasped() < delay) {
12+
//
13+
}
1214

13-
e.target.classList.add('clicked');
14-
};
15+
e.target.classList.add('clicked');
16+
};
1517

16-
document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
17-
document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);
18+
document.querySelector('[data-test-id=interaction-button]').addEventListener('click', createDelayFunction());
19+
document.querySelector('[data-test-id=annotated-button]').addEventListener('click', createDelayFunction());
20+
document.querySelector('[data-test-id=slow-interaction-button]').addEventListener('click', createDelayFunction(200));

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/template.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<body>
77
<div>Rendered Before Long Task</div>
88
<button data-test-id="interaction-button">Click Me</button>
9+
<button data-test-id="slow-interaction-button">Also Click Me</button>
910
<button data-test-id="annotated-button" data-sentry-component="AnnotatedButton">Click Me</button>
1011
<script src="https://example.com/path/to/script.js"></script>
1112
</body>

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,3 +160,62 @@ sentryTest('should capture an INP click event span. @firefox', async ({ browserN
160160
expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(0);
161161
expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
162162
});
163+
164+
sentryTest(
165+
'should choose the slowest interaction click event when INP is triggered. @firefox',
166+
async ({ browserName, getLocalTestPath, page }) => {
167+
const supportedBrowsers = ['chromium', 'firefox'];
168+
169+
if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
170+
sentryTest.skip();
171+
}
172+
173+
await page.route('**/path/to/script.js', (route: Route) =>
174+
route.fulfill({ path: `${__dirname}/assets/script.js` }),
175+
);
176+
await page.route('https://dsn.ingest.sentry.io/**/*', route => {
177+
return route.fulfill({
178+
status: 200,
179+
contentType: 'application/json',
180+
body: JSON.stringify({ id: 'test-id' }),
181+
});
182+
});
183+
184+
const url = await getLocalTestPath({ testDir: __dirname });
185+
186+
await page.goto(url);
187+
await getFirstSentryEnvelopeRequest<SentryEvent>(page);
188+
189+
await page.locator('[data-test-id=interaction-button]').click();
190+
await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
191+
192+
// Wait for the interaction transaction from the enableInteractions experiment
193+
await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
194+
195+
await page.locator('[data-test-id=slow-interaction-button]').click();
196+
await page.locator('.clicked[data-test-id=slow-interaction-button]').isVisible();
197+
198+
// Wait for the interaction transaction from the enableInteractions experiment
199+
await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
200+
201+
const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<
202+
SpanJSON & { exclusive_time: number; measurements: Measurements }
203+
>(page, 1, {
204+
envelopeType: 'span',
205+
});
206+
// Page hide to trigger INP
207+
await page.evaluate(() => {
208+
window.dispatchEvent(new Event('pagehide'));
209+
});
210+
211+
// Get the INP span envelope
212+
const spanEnvelopes = await spanEnvelopesPromise;
213+
214+
expect(spanEnvelopes).toHaveLength(1);
215+
expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
216+
expect(spanEnvelopes[0].description).toBe('body > button.clicked');
217+
expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(150);
218+
expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(150);
219+
expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
220+
},
221+
);

‎dev-packages/browser-integration-tests/suites/tracing/browsertracing/interactions/assets/script.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
const delay = e => {
2-
const startTime = Date.now();
1+
const createDelayFunction =
2+
(delay = 70) =>
3+
e => {
4+
const startTime = Date.now();
35

4-
function getElasped() {
5-
const time = Date.now();
6-
return time - startTime;
7-
}
6+
function getElasped() {
7+
const time = Date.now();
8+
return time - startTime;
9+
}
810

9-
while (getElasped() < 70) {
10-
//
11-
}
11+
while (getElasped() < delay) {
12+
//
13+
}
1214

13-
e.target.classList.add('clicked');
14-
};
15+
e.target.classList.add('clicked');
16+
};
1517

16-
document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
17-
document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);
18+
document.querySelector('[data-test-id=interaction-button]').addEventListener('click', createDelayFunction());
19+
document.querySelector('[data-test-id=annotated-button]').addEventListener('click', createDelayFunction());
20+
document.querySelector('[data-test-id=slow-interaction-button]').addEventListener('click', createDelayFunction(200));

‎dev-packages/browser-integration-tests/suites/tracing/browsertracing/interactions/template.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<body>
77
<div>Rendered Before Long Task</div>
88
<button data-test-id="interaction-button">Click Me</button>
9+
<button data-test-id="slow-interaction-button">Also Click Me</button>
910
<button data-test-id="annotated-button" data-sentry-component="AnnotatedButton">Click Me</button>
1011
<script src="https://example.com/path/to/script.js"></script>
1112
</body>

‎dev-packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import type { Route } from '@playwright/test';
22
import { expect } from '@playwright/test';
3-
import type { Measurements, SerializedEvent, Span, SpanContext, SpanJSON, Transaction } from '@sentry/types';
3+
import type {
4+
Event as SentryEvent,
5+
Measurements,
6+
SerializedEvent,
7+
Span,
8+
SpanContext,
9+
SpanJSON,
10+
Transaction,
11+
} from '@sentry/types';
412

513
import { sentryTest } from '../../../../utils/fixtures';
614
import {
@@ -132,7 +140,7 @@ sentryTest('should capture an INP click event span. @firefox', async ({ browserN
132140
const url = await getLocalTestPath({ testDir: __dirname });
133141

134142
await page.goto(url);
135-
await getFirstSentryEnvelopeRequest<Event>(page);
143+
await getFirstSentryEnvelopeRequest<SentryEvent>(page);
136144

137145
await page.locator('[data-test-id=interaction-button]').click();
138146
await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
@@ -160,3 +168,62 @@ sentryTest('should capture an INP click event span. @firefox', async ({ browserN
160168
expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(0);
161169
expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
162170
});
171+
172+
sentryTest(
173+
'should choose the slowest interaction click event when INP is triggered. @firefox',
174+
async ({ browserName, getLocalTestPath, page }) => {
175+
const supportedBrowsers = ['chromium', 'firefox'];
176+
177+
if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
178+
sentryTest.skip();
179+
}
180+
181+
await page.route('**/path/to/script.js', (route: Route) =>
182+
route.fulfill({ path: `${__dirname}/assets/script.js` }),
183+
);
184+
await page.route('https://dsn.ingest.sentry.io/**/*', route => {
185+
return route.fulfill({
186+
status: 200,
187+
contentType: 'application/json',
188+
body: JSON.stringify({ id: 'test-id' }),
189+
});
190+
});
191+
192+
const url = await getLocalTestPath({ testDir: __dirname });
193+
194+
await page.goto(url);
195+
await getFirstSentryEnvelopeRequest<SentryEvent>(page);
196+
197+
await page.locator('[data-test-id=interaction-button]').click();
198+
await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
199+
200+
// Wait for the interaction transaction from the enableInteractions experiment
201+
await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
202+
203+
await page.locator('[data-test-id=slow-interaction-button]').click();
204+
await page.locator('.clicked[data-test-id=slow-interaction-button]').isVisible();
205+
206+
// Wait for the interaction transaction from the enableInteractions experiment
207+
await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
208+
209+
const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<
210+
SpanJSON & { exclusive_time: number; measurements: Measurements }
211+
>(page, 1, {
212+
envelopeType: 'span',
213+
});
214+
// Page hide to trigger INP
215+
await page.evaluate(() => {
216+
window.dispatchEvent(new Event('pagehide'));
217+
});
218+
219+
// Get the INP span envelope
220+
const spanEnvelopes = await spanEnvelopesPromise;
221+
222+
expect(spanEnvelopes).toHaveLength(1);
223+
expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
224+
expect(spanEnvelopes[0].description).toBe('body > button.clicked');
225+
expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(150);
226+
expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(150);
227+
expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
228+
},
229+
);

‎packages/tracing-internal/src/browser/browserTracingIntegration.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,7 @@ function registerInpInteractionListener(
560560
const activeTransaction = getActiveTransaction();
561561
const currentScope = getCurrentScope();
562562
const user = currentScope !== undefined ? currentScope.getUser() : undefined;
563-
for (const entry of entries) {
563+
entries.forEach(entry => {
564564
if (isPerformanceEventTiming(entry)) {
565565
const interactionId = entry.interactionId;
566566
if (interactionId === undefined) {
@@ -622,7 +622,7 @@ function registerInpInteractionListener(
622622
}
623623
}
624624
}
625-
}
625+
});
626626
};
627627
addPerformanceInstrumentationHandler('event', handleEntries);
628628
addPerformanceInstrumentationHandler('first-input', handleEntries);

‎packages/tracing-internal/src/browser/browsertracing.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ export class BrowserTracing implements Integration {
502502
const activeTransaction = getActiveTransaction();
503503
const currentScope = getCurrentScope();
504504
const user = currentScope !== undefined ? currentScope.getUser() : undefined;
505-
for (const entry of entries) {
505+
entries.forEach(entry => {
506506
if (isPerformanceEventTiming(entry)) {
507507
const interactionId = entry.interactionId;
508508
if (interactionId === undefined) {
@@ -565,7 +565,7 @@ export class BrowserTracing implements Integration {
565565
}
566566
}
567567
}
568-
}
568+
});
569569
};
570570
addPerformanceInstrumentationHandler('event', handleEntries);
571571
addPerformanceInstrumentationHandler('first-input', handleEntries);

0 commit comments

Comments
 (0)