feat(browser)!: Extract performance.{mark,measure} spans into new userTimingSpansIntegration

MIGRATION.md

@@ -342,6 +342,29 @@ Sentry.init({
 
 - The experimental `_experiments.enableStandaloneClsSpans` and `_experiments.enableStandaloneLcpSpans` options were removed from both `browserTracingIntegration` and `webVitalsIntegration`. CLS and LCP are no longer configurable: they are recorded as measurements on the pageload span, unless span streaming is enabled (`traceLifecycle: 'stream'`), in which case they are sent as dedicated spans.
 
+- `browserTracingIntegration` no longer captures spans created by `performance.mark()` and `performance.measure()` by default. Add `userTimingSpansIntegration()` to continue capturing them. The `ignorePerformanceApiSpans` option moved to the new integration as `ignore`.
+
+```js
+// before
+Sentry.init({
+  integrations: [
+    Sentry.browserTracingIntegration({
+      ignorePerformanceApiSpans: ['third-party-mark'],
+    }),
+  ],
+});
+
+// after
+Sentry.init({
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.userTimingSpansIntegration({
+      ignore: ['third-party-mark'],
+    }),
+  ],
+});
+```
+
 ### `@sentry/node` / Server-side SDKs
 
 - `SentryContextManager` is no longer exported. It is no longer needed now that Sentry does not set up OpenTelemetry by default.

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans-domexception-details/init.js

@@ -24,7 +24,7 @@ window.Sentry = Sentry;
 Sentry.init({
   traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [Sentry.browserTracingIntegration({})],
+  integrations: [Sentry.browserTracingIntegration(), Sentry.userTimingSpansIntegration()],
   tracesSampleRate: 1,
 });
 

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans/init.js

@@ -12,6 +12,6 @@ window.Sentry = Sentry;
 Sentry.init({
   traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [Sentry.browserTracingIntegration()],
+  integrations: [Sentry.browserTracingIntegration(), Sentry.userTimingSpansIntegration()],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans-disabled/init.js

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});
+
+performance.mark('app-ready');
+performance.measure('app-initialization');

dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans-disabled/test.ts

@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('does not capture mark and measure spans by default', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const transactionRequestPromise = waitForTransactionRequest(
+    page,
+    event => event.type === 'transaction' && event.contexts?.trace?.op === 'pageload',
+  );
+
+  await page.goto(url);
+
+  const transactionEvent = envelopeRequestParser(await transactionRequestPromise);
+  const userTimingSpans = transactionEvent.spans?.filter(({ op }) => op === 'mark' || op === 'measure');
+  expect(userTimingSpans).toHaveLength(0);
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans-streamed/init.js

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.userTimingSpansIntegration(),
+    Sentry.spanStreamingIntegration(),
+  ],
+  traceLifecycle: 'stream',
+  tracesSampleRate: 1,
+});
+
+performance.mark('app-ready');
+performance.measure('app-initialization');

dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans-streamed/test.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpans } from '../../../../utils/spanUtils';
+
+sentryTest('captures each mark and measure once with span streaming', async ({ getLocalTestUrl, page }) => {
+  sentryTest.skip(shouldSkipTracingTest());
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const spansPromise = waitForStreamedSpans(page, spans => spans.some(span => getSpanOp(span) === 'pageload'));
+
+  await page.goto(url);
+
+  const spans = await spansPromise;
+  const userTimingSpans = spans.filter(span => ['mark', 'measure'].includes(getSpanOp(span) ?? ''));
+  expect(userTimingSpans).toHaveLength(3);
+  expect(userTimingSpans.map(span => span.name).sort()).toEqual([
+    'app-initialization',
+    'app-ready',
+    'sentry-tracing-init',
+  ]);
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/ignoreMeasureSpans/init.js → dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans/init.js

@@ -6,9 +6,8 @@ Sentry.init({
   traceLifecycle: 'static',
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
   integrations: [
-    Sentry.browserTracingIntegration({
-      ignorePerformanceApiSpans: ['measure-ignore', /mark-i/],
-    }),
+    Sentry.browserTracingIntegration(),
+    Sentry.userTimingSpansIntegration({ ignore: ['measure-ignore', /mark-i/] }),
   ],
   tracesSampleRate: 1,
 });

dev-packages/browser-integration-tests/suites/tracing/metrics/user-timing-spans/test.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('captures non-ignored mark and measure spans', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const transactionRequestPromise = waitForTransactionRequest(
+    page,
+    evt => evt.type === 'transaction' && evt.contexts?.trace?.op === 'pageload',
+  );
+
+  await page.goto(url);
+
+  const transactionEvent = envelopeRequestParser(await transactionRequestPromise);
+  const markAndMeasureSpans = transactionEvent.spans?.filter(({ op }) => op && ['mark', 'measure'].includes(op));
+
+  expect(markAndMeasureSpans?.length).toBe(3);
+  expect(markAndMeasureSpans).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        description: 'mark-pass',
+        op: 'mark',
+      }),
+      expect.objectContaining({
+        description: 'measure-pass',
+        op: 'measure',
+      }),
+      expect.objectContaining({
+        description: 'sentry-tracing-init',
+        op: 'mark',
+      }),
+    ]),
+  );
+});

packages/browser-utils/src/index.ts

@@ -21,6 +21,8 @@ export {
 // eslint-disable-next-line typescript/no-deprecated
 export { elementTimingIntegration, startTrackingElementTiming } from './metrics/elementTiming';
 
+export { userTimingSpansIntegration } from './metrics/userTimingSpans';
+
 export { extractNetworkProtocol } from './metrics/utils';
 
 export { trackClsAsSpan, trackInpAsSpan, trackLcpAsSpan } from './metrics/webVitalSpans';