test(browser): Add span streaming integration tests (#19581)

This PR adds browser integration to test testing span streaming:

- Added test helpers:
  - `waitForStreamedSpan`: Returns a promise of a single matching span
- `waitForStreamedSpans`: Returns a promise of all spans in an array
whenever the callback returns true
- `waitForStreamedSpanEnvelope`: Returns an entire streamed span (v2)
envelope (including headers)
- `observeStreamedSpan`: Can be used to observe sent span envelopes
without blocking the test if no envelopes are sent (good for testing
that spans are _not_ sent)
- `getSpanOp`: Small helper to easily get the op of a span which we
almost always need for the `waitFor*` function callbacks

Added 50+ tests, mostly converted from transaction integration tests
around spans from `browserTracingIntegration`:
- tests asserting the entire span v2 envelope payloads of manually
started, pageload and navigation span trees
- tests for trace linking and trace lifetime
- tests for spans coming from browserTracingIntegration (fetch, xhr,
long animation frame, long tasks)

Also, this PR fixes two bugs discovered through tests:
- negatively sampled spans were still sent (because non-recording spans
go through the same span life cycle)
- cancelled spans received status `error` instead of `ok`. We want them
to have status `ok` but an attribute detailing the cancellation reason.

Lastly, I discovered a problem with timing data on fetch and XHR spans.
Will try to fix as a follow-up. Tracked in #19613

ref #17836

Author: Lms24

.size-limit.js

@@ -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)
   {

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')),
+);