Skip to content

Commit adccbe6

Browse files
mydeamydea
authored
feat(tracing): Expose new browserTracingIntegration (#10351)
Extracted this out of #10327. This PR: * Introduces a new `browserTracingIntegration()` * Does NOT deprecate BrowserTracing yet, as custom implementations in Angular, Next, Sveltekit have not been migrated over yet, which would be weird. We can deprecate it once we moved these over. * Makes sure that custom implementations in Next & Sveltekit are "fixed" automatically * Uses a slim fork for the CDN bundles, to avoid shipping multiple implementations in there. * This means that in the CDN bundles, you can already use the new syntax, but you cannot pass a custom routing instrumentation anymore, and you also don't have the utility functions for it yet. I think this is the best tradeoff for now, and it's probably not a super common case to have custom routing instrumentation when using the Loader/CDN bundles (and if you do, you have to stick to `new BrowserTracing()` until v8). I copied the browser integration tests we have, which all pass!
1 parent 2879478 commit adccbe6

File tree

81 files changed

+2008
-139
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+2008
-139
lines changed

‎.size-limit.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@ module.exports = [
4747
gzip: true,
4848
limit: '35 KB',
4949
},
50+
{
51+
name: '@sentry/browser (incl. browserTracingIntegration) - Webpack (gzipped)',
52+
path: 'packages/browser/build/npm/esm/index.js',
53+
import: '{ init, browserTracingIntegration }',
54+
gzip: true,
55+
limit: '35 KB',
56+
},
5057
{
5158
name: '@sentry/browser (incl. Feedback) - Webpack (gzipped)',
5259
path: 'packages/browser/build/npm/esm/index.js',

‎dev-packages/browser-integration-tests/suites/replay/replayIntegrationShim /init.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
5+
// Replay should not actually work, but still not error out
6+
window.Replay = new Sentry.replayIntegration({
7+
flushMinDelay: 200,
8+
flushMaxDelay: 200,
9+
minReplayDuration: 0,
10+
});
11+
12+
Sentry.init({
13+
dsn: 'https://[email protected]/1337',
14+
sampleRate: 1,
15+
replaysSessionSampleRate: 1.0,
16+
replaysOnErrorSampleRate: 0.0,
17+
integrations: [window.Replay],
18+
});
19+
20+
// Ensure none of these break
21+
window.Replay.start();
22+
window.Replay.stop();
23+
window.Replay.flush();

‎dev-packages/browser-integration-tests/suites/replay/replayIntegrationShim /template.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button onclick="console.log('Test log')">Click me</button>
8+
</body>
9+
</html>

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { expect } from '@playwright/test';
2+
3+
import { sentryTest } from '../../../utils/fixtures';
4+
5+
sentryTest(
6+
'exports a shim replayIntegration integration for non-replay bundles',
7+
async ({ getLocalTestPath, page, forceFlushReplay }) => {
8+
const bundle = process.env.PW_BUNDLE;
9+
10+
if (!bundle || !bundle.startsWith('bundle_') || bundle.includes('replay')) {
11+
sentryTest.skip();
12+
}
13+
14+
const consoleMessages: string[] = [];
15+
page.on('console', msg => consoleMessages.push(msg.text()));
16+
17+
let requestCount = 0;
18+
await page.route('https://dsn.ingest.sentry.io/**/*', route => {
19+
requestCount++;
20+
return route.fulfill({
21+
status: 200,
22+
contentType: 'application/json',
23+
body: JSON.stringify({ id: 'test-id' }),
24+
});
25+
});
26+
27+
const url = await getLocalTestPath({ testDir: __dirname });
28+
29+
await page.goto(url);
30+
await forceFlushReplay();
31+
32+
expect(requestCount).toBe(0);
33+
expect(consoleMessages).toEqual(['You are using new Replay() even though this bundle does not include replay.']);
34+
},
35+
);

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/init.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
5+
Sentry.init({
6+
dsn: 'https://[email protected]/1337',
7+
integrations: [Sentry.browserTracingIntegration({ idleTimeout: 9000 })],
8+
tracesSampleRate: 1,
9+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-custom/subject.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.getElementById('go-background').addEventListener('click', () => {
2+
Object.defineProperty(document, 'hidden', { value: true, writable: true });
3+
const ev = document.createEvent('Event');
4+
ev.initEvent('visibilitychange');
5+
document.dispatchEvent(ev);
6+
});
7+
8+
document.getElementById('start-transaction').addEventListener('click', () => {
9+
window.transaction = Sentry.startTransaction({ name: 'test-transaction' });
10+
Sentry.getCurrentHub().configureScope(scope => scope.setSpan(window.transaction));
11+
});

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button id="start-transaction">Start Transaction</button>
8+
<button id="go-background">New Tab</button>
9+
</body>
10+
</html>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { JSHandle } from '@playwright/test';
2+
import { expect } from '@playwright/test';
3+
import type { Event } from '@sentry/types';
4+
5+
import { sentryTest } from '../../../../utils/fixtures';
6+
import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
7+
8+
async function getPropertyValue(handle: JSHandle, prop: string) {
9+
return (await handle.getProperty(prop))?.jsonValue();
10+
}
11+
12+
sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
13+
if (shouldSkipTracingTest()) {
14+
sentryTest.skip();
15+
}
16+
17+
const url = await getLocalTestPath({ testDir: __dirname });
18+
19+
const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
20+
expect(pageloadTransaction).toBeDefined();
21+
22+
await page.locator('#start-transaction').click();
23+
const transactionHandle = await page.evaluateHandle('window.transaction');
24+
25+
const id_before = await getPropertyValue(transactionHandle, 'span_id');
26+
const name_before = await getPropertyValue(transactionHandle, 'name');
27+
const status_before = await getPropertyValue(transactionHandle, 'status');
28+
const tags_before = await getPropertyValue(transactionHandle, 'tags');
29+
30+
expect(name_before).toBe('test-transaction');
31+
expect(status_before).toBeUndefined();
32+
expect(tags_before).toStrictEqual({});
33+
34+
await page.locator('#go-background').click();
35+
36+
const id_after = await getPropertyValue(transactionHandle, 'span_id');
37+
const name_after = await getPropertyValue(transactionHandle, 'name');
38+
const status_after = await getPropertyValue(transactionHandle, 'status');
39+
const tags_after = await getPropertyValue(transactionHandle, 'tags');
40+
41+
expect(id_before).toBe(id_after);
42+
expect(name_after).toBe(name_before);
43+
expect(status_after).toBe('cancelled');
44+
expect(tags_after).toStrictEqual({ visibilitychange: 'document.hidden' });
45+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload/subject.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
document.getElementById('go-background').addEventListener('click', () => {
2+
setTimeout(() => {
3+
Object.defineProperty(document, 'hidden', { value: true, writable: true });
4+
const ev = document.createEvent('Event');
5+
ev.initEvent('visibilitychange');
6+
document.dispatchEvent(ev);
7+
}, 250);
8+
});

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button id="go-background">New Tab</button>
8+
</body>
9+
</html>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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('should finish pageload transaction when the page goes background', async ({ getLocalTestPath, page }) => {
8+
if (shouldSkipTracingTest()) {
9+
sentryTest.skip();
10+
}
11+
const url = await getLocalTestPath({ testDir: __dirname });
12+
13+
await page.goto(url);
14+
await page.locator('#go-background').click();
15+
16+
const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page);
17+
18+
expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
19+
expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
20+
expect(pageloadTransaction.contexts?.trace?.tags).toMatchObject({
21+
visibilitychange: 'document.hidden',
22+
});
23+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/http-timings/init.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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: 1000,
10+
_experiments: {
11+
enableHTTPTimings: true,
12+
},
13+
}),
14+
],
15+
tracesSampleRate: 1,
16+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/http-timings/subject.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { expect } from '@playwright/test';
2+
import type { SerializedEvent } from '@sentry/types';
3+
4+
import { sentryTest } from '../../../../utils/fixtures';
5+
import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
6+
7+
sentryTest('should create fetch spans with http timing @firefox', async ({ browserName, getLocalTestPath, page }) => {
8+
const supportedBrowsers = ['chromium', 'firefox'];
9+
10+
if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
11+
sentryTest.skip();
12+
}
13+
await page.route('http://example.com/*', async route => {
14+
const request = route.request();
15+
const postData = await request.postDataJSON();
16+
17+
await route.fulfill({
18+
status: 200,
19+
contentType: 'application/json',
20+
body: JSON.stringify(Object.assign({ id: 1 }, postData)),
21+
});
22+
});
23+
24+
const url = await getLocalTestPath({ testDir: __dirname });
25+
26+
const envelopes = await getMultipleSentryEnvelopeRequests<SerializedEvent>(page, 2, { url, timeout: 10000 });
27+
const tracingEvent = envelopes[envelopes.length - 1]; // last envelope contains tracing data on all browsers
28+
29+
// eslint-disable-next-line deprecation/deprecation
30+
const requestSpans = tracingEvent.spans?.filter(({ op }) => op === 'http.client');
31+
32+
expect(requestSpans).toHaveLength(3);
33+
34+
await page.pause();
35+
requestSpans?.forEach((span, index) =>
36+
expect(span).toMatchObject({
37+
description: `GET http://example.com/${index}`,
38+
parent_span_id: tracingEvent.contexts?.trace?.span_id,
39+
span_id: expect.any(String),
40+
start_timestamp: expect.any(Number),
41+
timestamp: expect.any(Number),
42+
trace_id: tracingEvent.contexts?.trace?.trace_id,
43+
data: expect.objectContaining({
44+
'http.request.redirect_start': expect.any(Number),
45+
'http.request.fetch_start': expect.any(Number),
46+
'http.request.domain_lookup_start': expect.any(Number),
47+
'http.request.domain_lookup_end': expect.any(Number),
48+
'http.request.connect_start': expect.any(Number),
49+
'http.request.secure_connection_start': expect.any(Number),
50+
'http.request.connection_end': expect.any(Number),
51+
'http.request.request_start': expect.any(Number),
52+
'http.request.response_start': expect.any(Number),
53+
'http.request.response_end': expect.any(Number),
54+
'network.protocol.version': expect.any(String),
55+
}),
56+
}),
57+
);
58+
});

‎dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/init.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
5+
Sentry.init({
6+
dsn: 'https://[email protected]/1337',
7+
integrations: [Sentry.browserTracingIntegration()],
8+
tracesSampleRate: 1,
9+
});

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const delay = e => {
2+
const startTime = Date.now();
3+
4+
function getElasped() {
5+
const time = Date.now();
6+
return time - startTime;
7+
}
8+
9+
while (getElasped() < 70) {
10+
//
11+
}
12+
13+
e.target.classList.add('clicked');
14+
};
15+
16+
document.querySelector('[data-test-id=interaction-button]').addEventListener('click', delay);
17+
document.querySelector('[data-test-id=annotated-button]').addEventListener('click', delay);

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

Lines changed: 17 additions & 0 deletions
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: 1000,
10+
enableLongTask: false,
11+
_experiments: {
12+
enableInteractions: true,
13+
},
14+
}),
15+
],
16+
tracesSampleRate: 1,
17+
});

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<div>Rendered Before Long Task</div>
8+
<button data-test-id="interaction-button">Click Me</button>
9+
<button data-test-id="annotated-button" data-sentry-component="AnnotatedButton">Click Me</button>
10+
<script src="https://example.com/path/to/script.js"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)