feat(browser): Emit web vitals as streamed spans

.size-limit.js

@@ -15,7 +15,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '24.5 KB',
+    limit: '25 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
 
@@ -103,7 +103,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'sendFeedback'),
     gzip: true,
-    limit: '31 KB',
+    limit: '32 KB',
   },
   {
     name: '@sentry/browser (incl. FeedbackAsync)',
@@ -117,7 +117,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'metrics'),
     gzip: true,
-    limit: '27 KB',
+    limit: '28 KB',
   },
   {
     name: '@sentry/browser (incl. Logs)',
@@ -148,7 +148,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '45.1 KB',
+    limit: '46 KB',
   },
   // Vue SDK (ESM)
   {
@@ -220,13 +220,13 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback)',
     path: createCDNPath('bundle.tracing.replay.feedback.min.js'),
     gzip: true,
-    limit: '86 KB',
+    limit: '87 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics)',
     path: createCDNPath('bundle.tracing.replay.feedback.logs.metrics.min.js'),
     gzip: true,
-    limit: '87 KB',
+    limit: '88 KB',
   },
   // browser CDN bundles (non-gzipped)
   {
@@ -241,7 +241,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: false,
     brotli: false,
-    limit: '129 KB',
+    limit: '130 KB',
   },
   {
     name: 'CDN Bundle (incl. Logs, Metrics) - uncompressed',
@@ -255,7 +255,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '132 KB',
+    limit: '134 KB',
   },
   {
     name: 'CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed',
@@ -269,7 +269,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '246 KB',
+    limit: '247 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed',
@@ -317,7 +317,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '57 KB',
+    limit: '59 KB',
   },
   // Node SDK (ESM)
   {
@@ -326,14 +326,14 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '176 KB',
+    limit: '177 KB',
   },
   {
     name: '@sentry/node - without tracing',
     path: 'packages/node/build/esm/index.js',
     import: createImport('initWithoutDefaultIntegrations', 'getDefaultIntegrationsWithoutPerformance'),
     gzip: true,
-    limit: '98 KB',
+    limit: '100 KB',
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
@@ -356,7 +356,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '114 KB',
+    limit: '117 KB',
   },
 ];
 

dev-packages/browser-integration-tests/suites/public-api/startSpan/streamed/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.spanStreamingIntegration()],
+  tracesSampleRate: 1.0,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/public-api/startSpan/streamed/subject.js

@@ -0,0 +1,13 @@
+Sentry.startSpan({ name: 'test-span', op: 'test' }, () => {
+  Sentry.startSpan({ name: 'test-child-span', op: 'test-child' }, () => {
+    // noop
+  });
+
+  const inactiveSpan = Sentry.startInactiveSpan({ name: 'test-inactive-span' });
+  inactiveSpan.end();
+
+  Sentry.startSpanManual({ name: 'test-manual-span' }, span => {
+    // noop
+    span.end();
+  });
+});

dev-packages/browser-integration-tests/suites/public-api/startSpan/streamed/test.ts

@@ -0,0 +1,217 @@
+import { expect } from '@playwright/test';
+import {
+  SDK_VERSION,
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
+  SEMANTIC_ATTRIBUTE_SENTRY_SDK_NAME,
+  SEMANTIC_ATTRIBUTE_SENTRY_SDK_VERSION,
+  SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_ID,
+  SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_NAME,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+} from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { waitForStreamedSpanEnvelope } from '../../../../utils/spanUtils';
+
+sentryTest(
+  'sends a streamed span envelope if spanStreamingIntegration is enabled',
+  async ({ getLocalTestUrl, page }) => {
+    sentryTest.skip(shouldSkipTracingTest() || testingCdnBundle());
+
+    const spanEnvelopePromise = waitForStreamedSpanEnvelope(page);
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    await page.goto(url);
+
+    const spanEnvelope = await spanEnvelopePromise;
+
+    const envelopeHeader = spanEnvelope[0];
+    const envelopeItem = spanEnvelope[1];
+    const spans = envelopeItem[0][1].items;
+
+    expect(envelopeHeader).toEqual({
+      sdk: {
+        name: 'sentry.javascript.browser',
+        version: SDK_VERSION,
+      },
+      sent_at: expect.any(String),
+      trace: {
+        environment: 'production',
+        public_key: 'public',
+        sample_rand: expect.any(String),
+        sample_rate: '1',
+        sampled: 'true',
+        trace_id: expect.stringMatching(/^[\da-f]{32}$/),
+        transaction: 'test-span',
+      },
+    });
+
+    const numericSampleRand = parseFloat(envelopeHeader.trace!.sample_rand!);
+    const traceId = envelopeHeader.trace!.trace_id;
+
+    expect(Number.isNaN(numericSampleRand)).toBe(false);
+
+    expect(envelopeItem).toEqual([
+      [
+        { content_type: 'application/vnd.sentry.items.span.v2+json', item_count: 4, type: 'span' },
+        {
+          items: expect.any(Array),
+        },
+      ],
+    ]);
+
+    const segmentSpanId = spans.find(s => !!s.is_segment)?.span_id;
+    expect(segmentSpanId).toBeDefined();
+
+    expect(spans).toEqual([
+      {
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: {
+            type: 'string',
+            value: 'test-child',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: {
+            type: 'string',
+            value: 'manual',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_NAME]: {
+            type: 'string',
+            value: 'sentry.javascript.browser',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_VERSION]: {
+            type: 'string',
+            value: SDK_VERSION,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_ID]: {
+            type: 'string',
+            value: segmentSpanId,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_NAME]: {
+            type: 'string',
+            value: 'test-span',
+          },
+        },
+        end_timestamp: expect.any(Number),
+        is_segment: false,
+        name: 'test-child-span',
+        parent_span_id: segmentSpanId,
+        span_id: expect.stringMatching(/^[\da-f]{16}$/),
+        start_timestamp: expect.any(Number),
+        status: 'ok',
+        trace_id: traceId,
+      },
+      {
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: {
+            type: 'string',
+            value: 'manual',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_NAME]: {
+            type: 'string',
+            value: 'sentry.javascript.browser',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_VERSION]: {
+            type: 'string',
+            value: SDK_VERSION,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_ID]: {
+            type: 'string',
+            value: segmentSpanId,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_NAME]: {
+            type: 'string',
+            value: 'test-span',
+          },
+        },
+        end_timestamp: expect.any(Number),
+        is_segment: false,
+        name: 'test-inactive-span',
+        parent_span_id: segmentSpanId,
+        span_id: expect.stringMatching(/^[\da-f]{16}$/),
+        start_timestamp: expect.any(Number),
+        status: 'ok',
+        trace_id: traceId,
+      },
+      {
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: {
+            type: 'string',
+            value: 'manual',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_NAME]: {
+            type: 'string',
+            value: 'sentry.javascript.browser',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_VERSION]: {
+            type: 'string',
+            value: SDK_VERSION,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_ID]: {
+            type: 'string',
+            value: segmentSpanId,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_NAME]: {
+            type: 'string',
+            value: 'test-span',
+          },
+        },
+        end_timestamp: expect.any(Number),
+        is_segment: false,
+        name: 'test-manual-span',
+        parent_span_id: segmentSpanId,
+        span_id: expect.stringMatching(/^[\da-f]{16}$/),
+        start_timestamp: expect.any(Number),
+        status: 'ok',
+        trace_id: traceId,
+      },
+      {
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: {
+            type: 'string',
+            value: 'test',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: {
+            type: 'string',
+            value: 'manual',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: {
+            type: 'integer',
+            value: 1,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_NAME]: {
+            type: 'string',
+            value: 'sentry.javascript.browser',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SDK_VERSION]: {
+            type: 'string',
+            value: SDK_VERSION,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_ID]: {
+            type: 'string',
+            value: segmentSpanId,
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SEGMENT_NAME]: {
+            type: 'string',
+            value: 'test-span',
+          },
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: {
+            type: 'string',
+            value: 'custom',
+          },
+          'sentry.span.source': {
+            type: 'string',
+            value: 'custom',
+          },
+        },
+        end_timestamp: expect.any(Number),
+        is_segment: true,
+        name: 'test-span',
+        span_id: segmentSpanId,
+        start_timestamp: expect.any(Number),
+        status: 'ok',
+        trace_id: traceId,
+      },
+    ]);
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/backgroundtab-pageload-streamed/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracesSampleRate: 1,
+  debug: true,
+});

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

@@ -0,0 +1,8 @@
+document.getElementById('go-background').addEventListener('click', () => {
+  setTimeout(() => {
+    Object.defineProperty(document, 'hidden', { value: true, writable: true });
+    const ev = document.createEvent('Event');
+    ev.initEvent('visibilitychange');
+    document.dispatchEvent(ev);
+  }, 250);
+});

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

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button id="go-background">New Tab</button>
+  </body>
+</html>