[WIP] feat: Span Streaming POC

.size-limit.js

@@ -8,14 +8,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '25 KB',
+    limit: '26KB',
   },
   {
     name: '@sentry/browser - with treeshaking flags',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '24.1 KB',
+    limit: '25 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
 
@@ -38,7 +38,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '42 KB',
+    limit: '43 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Profiling)',
@@ -47,6 +47,13 @@ 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',
@@ -82,35 +89,35 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '85 KB',
+    limit: '87 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: '98 KB',
+    limit: '99 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'feedbackIntegration'),
     gzip: true,
-    limit: '42 KB',
+    limit: '43 KB',
   },
   {
     name: '@sentry/browser (incl. sendFeedback)',
     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)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'feedbackAsyncIntegration'),
     gzip: true,
-    limit: '35 KB',
+    limit: '36 KB',
   },
   {
     name: '@sentry/browser (incl. Metrics)',
@@ -140,57 +147,57 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '27 KB',
+    limit: '28 KB',
   },
   {
     name: '@sentry/react (incl. Tracing)',
     path: 'packages/react/build/esm/index.js',
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '44 KB',
+    limit: '46 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)',
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '44 KB',
+    limit: '45 KB',
   },
   // Svelte SDK (ESM)
   {
     name: '@sentry/svelte',
     path: 'packages/svelte/build/esm/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '25 KB',
+    limit: '26 KB',
   },
   // Browser CDN bundles
   {
     name: 'CDN Bundle',
     path: createCDNPath('bundle.min.js'),
     gzip: true,
-    limit: '27.5 KB',
+    limit: '28.5 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '42.5 KB',
+    limit: '44 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: true,
-    limit: '80 KB',
+    limit: '81 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback)',
@@ -204,21 +211,21 @@ module.exports = [
     path: createCDNPath('bundle.min.js'),
     gzip: false,
     brotli: false,
-    limit: '82 KB',
+    limit: '83 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing) - uncompressed',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: false,
     brotli: false,
-    limit: '127 KB',
+    limit: '129 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay) - uncompressed',
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '245 KB',
+    limit: '247 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',
@@ -234,7 +241,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '46.5 KB',
+    limit: '48 KB',
   },
   // SvelteKit SDK (ESM)
   {
@@ -243,7 +250,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '42 KB',
+    limit: '44 KB',
   },
   // Node-Core SDK (ESM)
   {
@@ -252,7 +259,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '52 KB',
+    limit: '53 KB',
   },
   // Node SDK (ESM)
   {
@@ -261,14 +268,14 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '162 KB',
+    limit: '166 KB',
   },
   {
     name: '@sentry/node - without tracing',
     path: 'packages/node/build/esm/index.js',
     import: createImport('initWithoutDefaultIntegrations', 'getDefaultIntegrationsWithoutPerformance'),
     gzip: true,
-    limit: '95 KB',
+    limit: '97 KB',
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
@@ -291,7 +298,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '111 KB',
+    limit: '112 KB',
   },
 ];
 

.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

@@ -685,6 +685,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://[email protected]/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,24 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest, testingCdnBundle } from '../../../utils/helpers';
+import { getSpanOp, waitForV2Spans } from '../../../utils/spanFirstUtils';
+
+sentryTest('ends pageload span when the page goes to background', async ({ getLocalTestUrl, page }) => {
+  // for now, spanStreamingIntegration is only exported in the NPM package, so we skip the test for bundles.
+  if (shouldSkipTracingTest() || testingCdnBundle()) {
+    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://[email protected]/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,48 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../utils/fixtures';
+import {
+  envelopeRequestParser,
+  runScriptInSandbox,
+  shouldSkipTracingTest,
+  testingCdnBundle,
+  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 }) => {
+    // for now, spanStreamingIntegration is only exported in the NPM package, so we skip the test for bundles.
+    // This test fails on Webkit as errors thrown from `runScriptInSandbox` are Script Errors and skipped by Sentry
+    if (shouldSkipTracingTest() || testingCdnBundle() || browserName === 'webkit') {
+      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://[email protected]/1337',
+  traceLifecycle: 'stream',
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
+  tracePropagationTargets: ['http://sentry-test-site.example'],
+  tracesSampleRate: 1,
+  sendDefaultPii: true,
+});