Skip to content

Commit ba4e746

Browse files
mydeamydea
committed
feat(replay): Share performance instrumentation with tracing
1 parent 921b8df commit ba4e746

File tree

32 files changed

+1042
-999
lines changed

32 files changed

+1042
-999
lines changed

‎packages/browser-integration-tests/suites/replay/eventBufferError/test.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { envelopeRequestParser } from '../../../utils/helpers';
55
import {
66
getDecompressedRecordingEvents,
77
getReplaySnapshot,
8+
isCustomSnapshot,
89
isReplayEvent,
910
REPLAY_DEFAULT_FLUSH_MAX_DELAY,
1011
shouldSkipReplayTest,
@@ -41,8 +42,8 @@ sentryTest(
4142
// We only want to count replays here
4243
if (event && isReplayEvent(event)) {
4344
const events = getDecompressedRecordingEvents(route.request());
44-
// this makes sure we ignore e.g. mouse move events which can otherwise lead to flakes
45-
if (events.length > 0) {
45+
// Make sure to not count mouse moves or performance spans
46+
if (events.filter(event => !isCustomSnapshot(event) || event.data.tag !== 'performanceSpan').length > 0) {
4647
called++;
4748
}
4849
}

‎packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/template.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<meta charset="utf-8" />
55
</head>
66
<body>
7-
<button id="button-add">Add items</button>
8-
<button id="button-modify">Modify items</button>
9-
<button id="button-remove">Remove items</button>
7+
<button id="noop" type="button">Noop</button>
8+
<button id="button-add" type="button">Add items</button>
9+
<button id="button-modify" type="button">Modify items</button>
10+
<button id="button-remove" type="button">Remove items</button>
1011
<ul class="list"></ul>
1112

1213
<script>

‎packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ sentryTest(
2121
const url = await getLocalTestPath({ testDir: __dirname });
2222

2323
const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
24+
// Ensure LCP is captured
25+
await Promise.all([waitForReplayRequest(page), page.click('#noop')]);
2426
await forceFlushReplay();
2527

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

‎packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/template.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<meta charset="utf-8" />
55
</head>
66
<body>
7-
<button id="button-add">Add items</button>
8-
<button id="button-modify">Modify items</button>
9-
<button id="button-remove">Remove items</button>
7+
<button id="noop" type="button">Noop</button>
8+
<button id="button-add" type="button">Add items</button>
9+
<button id="button-modify" type="button">Modify items</button>
10+
<button id="button-remove" type="button">Remove items</button>
1011
<ul class="list"></ul>
1112

1213
<script>

‎packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,14 @@ sentryTest(
2323
});
2424
});
2525

26-
const reqPromise0 = waitForReplayRequest(page, 0);
27-
2826
const url = await getLocalTestPath({ testDir: __dirname });
2927

30-
const [res0] = await Promise.all([reqPromise0, page.goto(url)]);
28+
const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
29+
// Ensure LCP is captured
30+
await Promise.all([waitForReplayRequest(page), page.click('#noop')]);
3131
await forceFlushReplay();
3232

33-
const reqPromise1 = waitForReplayRequest(page);
34-
35-
const [res1] = await Promise.all([reqPromise1, page.click('#button-add')]);
33+
const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add')]);
3634
await forceFlushReplay();
3735

3836
// replay should be stopped due to mutation limit

‎packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
<body>
77
<div id="content"></div>
88
<img src="https://example.com/path/to/image.png" />
9+
<button type="button">Test button</button>
910
</body>
1011
</html>

‎packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
1515
);
1616

1717
const url = await getLocalTestPath({ testDir: __dirname });
18-
await page.goto(url);
19-
20-
const eventData = await getFirstSentryEnvelopeRequest<Event>(page);
18+
const [eventData] = await Promise.all([
19+
getFirstSentryEnvelopeRequest<Event>(page),
20+
page.goto(url),
21+
page.click('button'),
22+
]);
2123

2224
expect(eventData.measurements).toBeDefined();
2325
expect(eventData.measurements?.lcp?.value).toBeDefined();

‎packages/browser-integration-tests/utils/replayHelpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ function isFullSnapshot(event: RecordingEvent): event is FullRecordingSnapshot {
153153
return event.type === EventType.FullSnapshot;
154154
}
155155

156-
function isCustomSnapshot(event: RecordingEvent): event is RecordingEvent & { data: CustomRecordingEvent } {
156+
export function isCustomSnapshot(event: RecordingEvent): event is RecordingEvent & { data: CustomRecordingEvent } {
157157
return event.type === EventType.Custom;
158158
}
159159

‎packages/e2e-tests/test-applications/react-create-hash-router/tests/behaviour-test.spec.ts

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,9 @@ test('Sends a Replay recording to Sentry', async ({ browser }) => {
183183
return window.sentryReplayId;
184184
});
185185

186+
// Keypress event ensures LCP is finished
187+
await page.type('body', 'Y');
188+
186189
// Wait for replay to be sent
187190

188191
if (replayId === undefined) {
@@ -229,10 +232,7 @@ test('Sends a Replay recording to Sentry', async ({ browser }) => {
229232
{ headers: { Authorization: `Bearer ${authToken}` } },
230233
);
231234

232-
return {
233-
status: response.status,
234-
data: response.data,
235-
};
235+
return response.status === 200 ? response.data[0] : response.status;
236236
} catch (e) {
237237
if (e instanceof AxiosError && e.response) {
238238
if (e.response.status !== 404) {
@@ -249,8 +249,5 @@ test('Sends a Replay recording to Sentry', async ({ browser }) => {
249249
timeout: EVENT_POLLING_TIMEOUT,
250250
},
251251
)
252-
.toEqual({
253-
status: 200,
254-
data: ReplayRecordingData,
255-
});
252+
.toEqual(ReplayRecordingData);
256253
});

0 commit comments

Comments
 (0)