build(cdn): Move tracing CDN bundle generation to @sentry/browser (#7617)

Author: mydea

.github/workflows/build.yml

@@ -371,7 +371,6 @@ jobs:
           path: |
             ${{ github.workspace }}/packages/browser/build/bundles/**
             ${{ github.workspace }}/packages/integrations/build/bundles/**
-            ${{ github.workspace }}/packages/tracing/build/bundles/**
             ${{ github.workspace }}/packages/replay/build/bundles/**
             ${{ github.workspace }}/packages/**/*.tgz
 
@@ -482,7 +481,7 @@ jobs:
           yarn test:integration
 
   job_browser_playwright_tests:
-    name: Playwright (${{ matrix.bundle }})${{ (matrix.tracing_only && ' tracing only') || '' }} Tests
+    name: Playwright (${{ matrix.bundle }}) Tests
     needs: [job_get_metadata, job_build]
     if: needs.job_get_metadata.outputs.changed_browser_integration == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-20.04
@@ -499,16 +498,13 @@ jobs:
           - bundle_es6_min
           - bundle_replay_es6
           - bundle_replay_es6_min
-        tracing_only:
-          - true
-          - false
-        exclude:
-          # `tracing_only` only makes a difference for bundles - tests of the esm and cjs builds always include the
-          # tracing tests
-          - bundle: esm
-            tracing_only: false
-          - bundle: cjs
-            tracing_only: false
+          - bundle_tracing_es5
+          - bundle_tracing_es5_min
+          - bundle_tracing_es6
+          - bundle_tracing_es6_min
+          - bundle_tracing_replay_es6
+          - bundle_tracing_replay_es6_min
+
     steps:
       - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
         uses: actions/checkout@v3
@@ -543,7 +539,6 @@ jobs:
       - name: Run Playwright tests
         env:
           PW_BUNDLE: ${{ matrix.bundle }}
-          PW_TRACING_ONLY: ${{ matrix.tracing_only }}
         run: |
           cd packages/browser-integration-tests
           yarn test:ci

.size-limit.js

@@ -53,13 +53,13 @@ module.exports = [
   },
   {
     name: '@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)',
-    path: 'packages/tracing/build/bundles/bundle.tracing.es5.min.js',
+    path: 'packages/browser/build/bundles/bundle.tracing.es5.min.js',
     gzip: true,
     limit: '37 KB',
   },
   {
     name: '@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)',
-    path: 'packages/tracing/build/bundles/bundle.tracing.min.js',
+    path: 'packages/browser/build/bundles/bundle.tracing.min.js',
     gzip: true,
     limit: '35 KB',
   },
@@ -80,7 +80,7 @@ module.exports = [
   },
   {
     name: '@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)',
-    path: 'packages/tracing/build/bundles/bundle.tracing.replay.min.js',
+    path: 'packages/browser/build/bundles/bundle.tracing.replay.min.js',
     gzip: true,
     limit: '80 KB',
   },

packages/browser-integration-tests/package.json

@@ -25,6 +25,12 @@
     "test:bundle:es6:min": "PW_BUNDLE=bundle_es6_min yarn test",
     "test:bundle:replay:es6": "PW_BUNDLE=bundle_replay_es6 yarn test",
     "test:bundle:replay:es6:min": "PW_BUNDLE=bundle_replay_es6_min yarn test",
+    "test:bundle:tracing:es5": "PW_BUNDLE=bundle_tracing_es5 yarn test",
+    "test:bundle:tracing:es5:min": "PW_BUNDLE=bundle_tracing_es5_min yarn test",
+    "test:bundle:tracing:es6": "PW_BUNDLE=bundle_tracing_es6 yarn test",
+    "test:bundle:tracing:es6:min": "PW_BUNDLE=bundle_tracing_es6_min yarn test",
+    "test:bundle:tracing:replay:es6": "PW_BUNDLE=bundle_tracing_replay_es6 yarn test",
+    "test:bundle:tracing:replay:es6:min": "PW_BUNDLE=bundle_tracing_replay_es6_min yarn test",
     "test:cjs": "PW_BUNDLE=cjs yarn test",
     "test:esm": "PW_BUNDLE=esm yarn test",
     "test:ci": "playwright test ./suites --browser='all' --reporter='line'",

packages/browser-integration-tests/suites/public-api/startTransaction/basic_usage/test.ts

@@ -2,9 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should report a transaction in an envelope', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
   const transaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
 
@@ -13,6 +17,10 @@ sentryTest('should report a transaction in an envelope', async ({ getLocalTestPa
 });
 
 sentryTest('should report finished spans as children of the root transaction', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
   const transaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
 

packages/browser-integration-tests/suites/public-api/startTransaction/circular_data/test.ts

@@ -2,9 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should be able to handle circular data', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
 

packages/browser-integration-tests/suites/public-api/startTransaction/setMeasurement/test.ts

@@ -2,9 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should attach measurement to transaction', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
   const event = await getFirstSentryEnvelopeRequest<Event>(page, url);
 

packages/browser-integration-tests/suites/replay/dsc/test.ts

@@ -2,12 +2,16 @@ import { expect } from '@playwright/test';
 import type { EventEnvelopeHeaders } from '@sentry/types';
 
 import { sentryTest } from '../../../utils/fixtures';
-import { envelopeHeaderRequestParser, getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
+import {
+  envelopeHeaderRequestParser,
+  getFirstSentryEnvelopeRequest,
+  shouldSkipTracingTest,
+} from '../../../utils/helpers';
 import { getReplaySnapshot, shouldSkipReplayTest, waitForReplayRunning } from '../../../utils/replayHelpers';
 
 sentryTest('should add replay_id to dsc of transactions', async ({ getLocalTestPath, page, browserName }) => {
   // This is flaky on webkit, so skipping there...
-  if (shouldSkipReplayTest() || browserName === 'webkit') {
+  if (shouldSkipReplayTest() || shouldSkipTracingTest() || browserName === 'webkit') {
     sentryTest.skip();
   }
 

packages/browser-integration-tests/suites/tracing/browserTracingIntegrationShim/test.ts

@@ -1,14 +1,13 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../utils/helpers';
 
 sentryTest(
   'exports a shim Integrations.BrowserTracing integration for non-tracing bundles',
   async ({ getLocalTestPath, page }) => {
-    const bundle = process.env.PW_BUNDLE;
-    const tracingOnly = Boolean(process.env.PW_TRACING_ONLY);
-
-    if (!bundle || !bundle.startsWith('bundle_') || tracingOnly) {
+    // Skip in tracing tests
+    if (!shouldSkipTracingTest()) {
       sentryTest.skip();
     }
 

packages/browser-integration-tests/suites/tracing/browserTracingShim/test.ts

@@ -1,12 +1,11 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../utils/helpers';
 
 sentryTest('exports a shim BrowserTracing integration for non-tracing bundles', async ({ getLocalTestPath, page }) => {
-  const bundle = process.env.PW_BUNDLE;
-  const tracingOnly = Boolean(process.env.PW_TRACING_ONLY);
-
-  if (!bundle || !bundle.startsWith('bundle_') || tracingOnly) {
+  // Skip in tracing tests
+  if (!shouldSkipTracingTest()) {
     sentryTest.skip();
   }
 

packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-custom/test.ts

@@ -3,13 +3,17 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 async function getPropertyValue(handle: JSHandle, prop: string) {
   return (await handle.getProperty(prop))?.jsonValue();
 }
 
 sentryTest('should finish a custom transaction when the page goes background', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
   const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page, url);

packages/browser-integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts

@@ -2,13 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest(
   'should finish pageload transaction when the page goes background',
   async ({ browserName, getLocalTestPath, page }) => {
     // TODO: This is flakey on firefox... trace.status is sometimes undefined
-    if (['firefox'].includes(browserName)) {
+    if (shouldSkipTracingTest() || ['firefox'].includes(browserName)) {
       sentryTest.skip();
     }
     const url = await getLocalTestPath({ testDir: __dirname });

packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts

@@ -3,7 +3,11 @@ import { expect } from '@playwright/test';
 import type { Event, Span, SpanContext, Transaction } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest, getMultipleSentryEnvelopeRequests } from '../../../../utils/helpers';
+import {
+  getFirstSentryEnvelopeRequest,
+  getMultipleSentryEnvelopeRequests,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
 
 type TransactionJSON = ReturnType<Transaction['toJSON']> & {
   spans: ReturnType<Span['toJSON']>[];
@@ -17,7 +21,7 @@ const wait = (time: number) => new Promise(res => setTimeout(res, time));
 sentryTest('should capture interaction transaction.', async ({ browserName, getLocalTestPath, page }) => {
   const supportedBrowsers = ['chromium', 'firefox'];
 
-  if (!supportedBrowsers.includes(browserName)) {
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
     sentryTest.skip();
   }
 
@@ -54,7 +58,7 @@ sentryTest('should capture interaction transaction.', async ({ browserName, getL
 sentryTest('should create only one transaction per interaction', async ({ browserName, getLocalTestPath, page }) => {
   const supportedBrowsers = ['chromium', 'firefox'];
 
-  if (!supportedBrowsers.includes(browserName)) {
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
     sentryTest.skip();
   }
 

packages/browser-integration-tests/suites/tracing/browsertracing/long-tasks-disabled/test.ts

@@ -3,11 +3,11 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should not capture long task when flag is disabled.', async ({ browserName, getLocalTestPath, page }) => {
   // Long tasks only work on chrome
-  if (browserName !== 'chromium') {
+  if (shouldSkipTracingTest() || browserName !== 'chromium') {
     sentryTest.skip();
   }
 

packages/browser-integration-tests/suites/tracing/browsertracing/long-tasks-enabled/test.ts

@@ -3,11 +3,11 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should capture long task.', async ({ browserName, getLocalTestPath, page }) => {
   // Long tasks only work on chrome
-  if (browserName !== 'chromium') {
+  if (shouldSkipTracingTest() || browserName !== 'chromium') {
     sentryTest.skip();
   }
 

packages/browser-integration-tests/suites/tracing/browsertracing/meta/test.ts

@@ -2,11 +2,19 @@ import { expect } from '@playwright/test';
 import type { Event, EventEnvelopeHeaders } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { envelopeHeaderRequestParser, getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import {
+  envelopeHeaderRequestParser,
+  getFirstSentryEnvelopeRequest,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
 
 sentryTest(
   'should create a pageload transaction based on `sentry-trace` <meta>',
   async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
     const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
@@ -24,6 +32,10 @@ sentryTest(
 sentryTest(
   'should pick up `baggage` <meta> tag, propagate the content in transaction and not add own data',
   async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
     const envHeader = await getFirstSentryEnvelopeRequest<EventEnvelopeHeaders>(page, url, envelopeHeaderRequestParser);
@@ -41,6 +53,10 @@ sentryTest(
 sentryTest(
   "should create a navigation that's not influenced by `sentry-trace` <meta>",
   async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
     const pageloadRequest = await getFirstSentryEnvelopeRequest<Event>(page, url);

packages/browser-integration-tests/suites/tracing/browsertracing/navigation/test.ts

@@ -2,9 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should create a navigation transaction on page navigation', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
   const pageloadRequest = await getFirstSentryEnvelopeRequest<Event>(page, url);

packages/browser-integration-tests/suites/tracing/browsertracing/pageload/test.ts

@@ -2,9 +2,13 @@ import { expect } from '@playwright/test';
 import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest('should create a pageload transaction', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);

packages/browser-integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargets/test.ts

@@ -2,10 +2,15 @@ import type { Request } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../../utils/helpers';
 
 sentryTest(
   'should attach `sentry-trace` and `baggage` header to request matching tracePropagationTargets',
   async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
     const requests = (

packages/browser-integration-tests/suites/tracing/browsertracing/tracePropagationTargets/customTargetsAndOrigins/test.ts

@@ -2,10 +2,15 @@ import type { Request } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../../utils/helpers';
 
 sentryTest(
   '[pre-v8] should prefer custom tracePropagationTargets over tracingOrigins',
   async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
     const requests = (