[WIP] feat: Span Streaming POC

.size-limit.js

@@ -47,12 +47,19 @@ module.exports = [
     gzip: true,
     limit: '48 KB',
   },
+  // {
+  //   name: '@sentry/browser (incl. Tracing Span-First)',
+  //   path: 'packages/browser/build/npm/esm/index.js',
+  //   import: createImport('init', 'browserTracingIntegration', 'spanStreamingIntegration'),
+  //   gzip: true,
+  //   limit: '44 KB',
+  // },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '80 KB',
+    limit: '82 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',
@@ -82,14 +89,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '85 KB',
+    limit: '86 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '97 KB',
+    limit: '98 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
@@ -103,7 +110,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'sendFeedback'),
     gzip: true,
-    limit: '30 KB',
+    limit: '31 KB',
   },
   {
     name: '@sentry/browser (incl. FeedbackAsync)',
@@ -127,15 +134,15 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '44 KB',
+    limit: '45 KB',
   },
   // Vue SDK (ESM)
   {
     name: '@sentry/vue',
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '30 KB',
+    limit: '31 KB',
   },
   {
     name: '@sentry/vue (incl. Tracing)',
@@ -163,7 +170,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '42.5 KB',
+    limit: '43 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -213,7 +220,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '46 KB',
+    limit: '47 KB',
   },
   // SvelteKit SDK (ESM)
   {
@@ -222,7 +229,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '42 KB',
+    limit: '43 KB',
   },
   // Node-Core SDK (ESM)
   {
@@ -240,7 +247,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '160 KB',
+    limit: '161 KB',
   },
   {
     name: '@sentry/node - without tracing',

.vscode/settings.json

@@ -28,5 +28,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "angular.enable-strict-mode-prompt": false
 }

CHANGELOG.md

@@ -502,6 +502,16 @@ Work in this release was contributed by @hanseo0507. Thank you for your contribu
 
 Work in this release was contributed by @0xbad0c0d3. Thank you for your contribution!
 
+## 10.21.0-alpha.1
+
+This release is a preview release for sending spans in browser via spanV2 instead of transaction event envelopes. All of this is experimental and subject to change. Use at your own risk. [More Details.](https://github.com/getsentry/sentry-javascript/pull/17852)
+
+- export withStreamSpan from `@sentry/browser`
+
+## 10.21.0-alpha.0
+
+This release is a preview release for sending spans in browser via spanV2 instead of transaction event envelopes. All of this is experimental and subject to change. Use at your own risk. [More Details.](https://github.com/getsentry/sentry-javascript/pull/17852)
+
 ## 10.20.0
 
 ### Important Changes

dev-packages/browser-integration-tests/suites/span-first/backgroundtab-pageload/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',
+  traceLifecycle: 'stream',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+});

dev-packages/browser-integration-tests/suites/span-first/backgroundtab-pageload/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/span-first/backgroundtab-pageload/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/span-first/backgroundtab-pageload/test.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../utils/helpers';
+import { getSpanOp, waitForV2Spans } from '../../../utils/spanFirstUtils';
+
+sentryTest('ends pageload span when the page goes to background', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const spanPromise = waitForV2Spans(page, spans => !!spans.find(span => getSpanOp(span) === 'pageload'));
+
+  await page.goto(url);
+  await page.locator('#go-background').click();
+
+  const pageloadSpan = (await spanPromise).find(span => getSpanOp(span) === 'pageload');
+
+  expect(pageloadSpan?.status).toBe('error'); // a cancelled span previously mapped to status error with message cancelled.
+  expect(pageloadSpan?.attributes?.['sentry.op']?.value).toBe('pageload');
+  expect(pageloadSpan?.attributes?.['sentry.cancellation_reason']?.value).toBe('document.hidden');
+});

dev-packages/browser-integration-tests/suites/span-first/error/init.js

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  traceLifecycle: 'stream',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/span-first/error/test.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../utils/fixtures';
+import {
+  envelopeRequestParser,
+  runScriptInSandbox,
+  shouldSkipTracingTest,
+  waitForErrorRequest,
+} from '../../../utils/helpers';
+import { getSpanOp, waitForV2Spans } from '../../../utils/spanFirstUtils';
+
+sentryTest(
+  'puts the pageload span name onto an error event caught during pageload',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    if (browserName === 'webkit') {
+      // This test fails on Webkit as errors thrown from `runScriptInSandbox` are Script Errors and skipped by Sentry
+      sentryTest.skip();
+    }
+
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const errorEventPromise = waitForErrorRequest(page);
+    const spanPromise = waitForV2Spans(page, spans => !!spans.find(span => getSpanOp(span) === 'pageload'));
+
+    await page.goto(url);
+
+    await runScriptInSandbox(page, {
+      content: `
+          throw new Error('Error during pageload');
+        `,
+    });
+
+    const errorEvent = envelopeRequestParser<Event>(await errorEventPromise);
+    const pageloadSpan = (await spanPromise).find(span => getSpanOp(span) === 'pageload');
+
+    expect(pageloadSpan?.attributes?.['sentry.op']?.value).toEqual('pageload');
+    expect(errorEvent.exception?.values?.[0]).toBeDefined();
+
+    expect(pageloadSpan?.name).toEqual('/index.html');
+
+    expect(pageloadSpan?.status).toBe('error');
+    expect(pageloadSpan?.attributes?.['sentry.idle_span_finish_reason']?.value).toBe('idleTimeout');
+
+    expect(errorEvent.transaction).toEqual(pageloadSpan?.name);
+  },
+);

dev-packages/browser-integration-tests/suites/span-first/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',
+  traceLifecycle: 'stream',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+});

dev-packages/browser-integration-tests/suites/span-first/linked-traces/test.ts

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test';
+import { SEMANTIC_LINK_ATTRIBUTE_LINK_TYPE } from '@sentry/core';
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../utils/helpers';
+import { getSpanOp, waitForV2Spans } from '../../../utils/spanFirstUtils';
+
+sentryTest("navigation spans link back to previous trace's root span", async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const pageloadSpan = await sentryTest.step('Initial pageload', async () => {
+    const pageloadSpanPromise = waitForV2Spans(page, spans => !!spans.find(span => getSpanOp(span) === 'pageload'));
+    await page.goto(url);
+    return (await pageloadSpanPromise).find(span => getSpanOp(span) === 'pageload');
+  });
+
+  const navigation1Span = await sentryTest.step('First navigation', async () => {
+    const navigation1SpanPromise = waitForV2Spans(
+      page,
+      spans => !!spans.find(span => getSpanOp(span) === 'navigation'),
+    );
+    await page.goto(`${url}#foo`);
+    return (await navigation1SpanPromise).find(span => getSpanOp(span) === 'navigation');
+  });
+
+  const navigation2Span = await sentryTest.step('Second navigation', async () => {
+    const navigation2SpanPromise = waitForV2Spans(
+      page,
+      spans => !!spans.find(span => getSpanOp(span) === 'navigation'),
+    );
+    await page.goto(`${url}#bar`);
+    return (await navigation2SpanPromise).find(span => getSpanOp(span) === 'navigation');
+  });
+
+  const pageloadTraceId = pageloadSpan?.trace_id;
+  const navigation1TraceId = navigation1Span?.trace_id;
+  const navigation2TraceId = navigation2Span?.trace_id;
+
+  expect(pageloadSpan?.links).toBeUndefined();
+
+  expect(navigation1Span?.links).toEqual([
+    {
+      trace_id: pageloadTraceId,
+      span_id: pageloadSpan?.span_id,
+      sampled: true,
+      attributes: {
+        [SEMANTIC_LINK_ATTRIBUTE_LINK_TYPE]: { value: 'previous_trace', type: 'string' },
+      },
+    },
+  ]);
+
+  expect(navigation1Span?.attributes).toMatchObject({
+    'sentry.previous_trace': { type: 'string', value: `${pageloadTraceId}-${pageloadSpan?.span_id}-1` },
+  });
+
+  expect(navigation2Span?.links).toEqual([
+    {
+      trace_id: navigation1TraceId,
+      span_id: navigation1Span?.span_id,
+      sampled: true,
+      attributes: {
+        [SEMANTIC_LINK_ATTRIBUTE_LINK_TYPE]: { value: 'previous_trace', type: 'string' },
+      },
+    },
+  ]);
+
+  expect(navigation2Span?.attributes).toMatchObject({
+    'sentry.previous_trace': { type: 'string', value: `${navigation1TraceId}-${navigation1Span?.span_id}-1` },
+  });
+
+  expect(pageloadTraceId).not.toEqual(navigation1TraceId);
+  expect(navigation1TraceId).not.toEqual(navigation2TraceId);
+  expect(pageloadTraceId).not.toEqual(navigation2TraceId);
+});
+
+sentryTest("doesn't link between hard page reloads by default", async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await sentryTest.step('First pageload', async () => {
+    const pageloadRequestPromise = waitForV2Spans(page, spans => !!spans.find(span => getSpanOp(span) === 'pageload'));
+    await page.goto(url);
+    return (await pageloadRequestPromise).find(span => getSpanOp(span) === 'pageload');
+  });
+
+  await sentryTest.step('Second pageload', async () => {
+    const pageload2RequestPromise = waitForV2Spans(page, spans => !!spans.find(span => getSpanOp(span) === 'pageload'));
+    await page.reload();
+    const pageload2Span = (await pageload2RequestPromise).find(span => getSpanOp(span) === 'pageload');
+
+    expect(pageload2Span?.trace_id).toBeDefined();
+    expect(pageload2Span?.links).toBeUndefined();
+  });
+});

dev-packages/browser-integration-tests/suites/span-first/pageload/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',
+  traceLifecycle: 'stream',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+});