test(browser): Add span streaming integration tests

.size-limit.js

@@ -124,7 +124,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'logger'),
     gzip: true,
-    limit: '27 KB',
+    limit: '28 KB',
   },
   {
     name: '@sentry/browser (incl. Metrics & Logs)',
@@ -148,7 +148,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '45 KB',
+    limit: '46 KB',
   },
   // Vue SDK (ESM)
   {
@@ -262,7 +262,7 @@ module.exports = [
     path: createCDNPath('bundle.replay.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '209 KB',
+    limit: '210 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay) - uncompressed',

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>

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

@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
+
+sentryTest('finishes streamed pageload span when the page goes background', async ({ getLocalTestUrl, page }) => {
+  sentryTest.skip(shouldSkipTracingTest() || testingCdnBundle());
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+
+  await page.goto(url);
+  await page.locator('#go-background').click();
+  const pageloadSpan = await pageloadSpanPromise;
+
+  // TODO: Is this what we want?
+  expect(pageloadSpan.status).toBe('ok');
+  expect(pageloadSpan.attributes?.['sentry.cancellation_reason']?.value).toBe('document.hidden');
+});

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

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

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

@@ -0,0 +1,3 @@
+fetch('http://sentry-test-site.example/0').then(
+  fetch('http://sentry-test-site.example/1').then(fetch('http://sentry-test-site.example/2')),
+);