fix(browser): Ensure tracing without performance (TWP) works

dev-packages/browser-integration-tests/suites/tracing/request/fetch-no-tracing/init.js

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  tracePropagationTargets: ['http://example.com'],
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-no-tracing/subject.js

@@ -0,0 +1,5 @@
+fetch('http://example.com/0').then(
+  fetch('http://example.com/1', { headers: { 'X-Test-Header': 'existing-header' } }).then(
+    fetch('http://example.com/2'),
+  ),
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-no-tracing/test.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not attach `sentry-trace` header to fetch requests without tracing',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    for (const request of requests) {
+      const requestHeaders = request.headers();
+      expect(requestHeaders['sentry-trace']).toBeUndefined();
+      expect(requestHeaders['baggage']).toBeUndefined();
+    }
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://example.com'],
+  tracesSampleRate: 0,
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled/subject.js

@@ -0,0 +1,5 @@
+fetch('http://example.com/0').then(
+  fetch('http://example.com/1', { headers: { 'X-Test-Header': 'existing-header' } }).then(
+    fetch('http://example.com/2'),
+  ),
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-unsampled/test.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should attach `sentry-trace` header to unsampled fetch requests', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const requests = (
+    await Promise.all([
+      page.goto(url),
+      Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+    ])
+  )[1];
+
+  expect(requests).toHaveLength(3);
+
+  const request1 = requests[0];
+  const requestHeaders1 = request1.headers();
+  expect(requestHeaders1).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-0$/),
+    baggage: expect.any(String),
+  });
+
+  const request2 = requests[1];
+  const requestHeaders2 = request2.headers();
+  expect(requestHeaders2).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-0$/),
+    baggage: expect.any(String),
+    'x-test-header': 'existing-header',
+  });
+
+  const request3 = requests[2];
+  const requestHeaders3 = request3.headers();
+  expect(requestHeaders3).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-0$/),
+    baggage: expect.any(String),
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-without-performance/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://example.com'],
+  // no tracesSampleRate defined means TWP mode
+});

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-without-performance/subject.js

@@ -0,0 +1,5 @@
+fetch('http://example.com/0').then(
+  fetch('http://example.com/1', { headers: { 'X-Test-Header': 'existing-header' } }).then(
+    fetch('http://example.com/2'),
+  ),
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-tracing-without-performance/test.ts

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should attach `sentry-trace` header to tracing without performance (TWP) fetch requests',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    const request1 = requests[0];
+    const requestHeaders1 = request1.headers();
+    expect(requestHeaders1).toMatchObject({
+      'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+      baggage: expect.any(String),
+    });
+
+    const request2 = requests[1];
+    const requestHeaders2 = request2.headers();
+    expect(requestHeaders2).toMatchObject({
+      'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+      baggage: expect.any(String),
+      'x-test-header': 'existing-header',
+    });
+
+    const request3 = requests[2];
+    const requestHeaders3 = request3.headers();
+    expect(requestHeaders3).toMatchObject({
+      'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+      baggage: expect.any(String),
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch-with-no-active-span/init.js

@@ -2,10 +2,22 @@ import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 
+window._sentryTransactionsCount = 0;
+
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  // disable pageload transaction
-  integrations: [Sentry.browserTracingIntegration({ instrumentPageLoad: false })],
+  // disable auto span creation
+  integrations: [
+    Sentry.browserTracingIntegration({
+      instrumentPageLoad: false,
+      instrumentNavigation: false,
+    }),
+  ],
   tracePropagationTargets: ['http://example.com'],
   tracesSampleRate: 1,
+  autoSessionTracking: false,
+  beforeSendTransaction() {
+    window._sentryTransactionsCount++;
+    return null;
+  },
 });

dev-packages/browser-integration-tests/suites/tracing/request/fetch-with-no-active-span/test.ts

@@ -1,35 +1,41 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { envelopeUrlRegex, shouldSkipTracingTest } from '../../../../utils/helpers';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest(
-  'there should be no span created for fetch requests with no active span',
-  async ({ getLocalTestPath, page }) => {
+  'should not create span for fetch requests with no active span but should attach sentry-trace header',
+  async ({ getLocalTestUrl, page }) => {
     if (shouldSkipTracingTest()) {
       sentryTest.skip();
     }
 
-    const url = await getLocalTestPath({ testDir: __dirname });
+    const sentryTraceHeaders: string[] = [];
 
-    let requestCount = 0;
-    page.on('request', request => {
-      expect(envelopeUrlRegex.test(request.url())).toBe(false);
-      requestCount++;
+    await page.route('http://example.com/**', route => {
+      const sentryTraceHeader = route.request().headers()['sentry-trace'];
+      if (sentryTraceHeader) {
+        sentryTraceHeaders.push(sentryTraceHeader);
+      }
+
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({}),
+      });
     });
 
-    await page.goto(url);
-
-    // Here are the requests that should exist:
-    // 1. HTML page
-    // 2. Init JS bundle
-    // 3. Subject JS bundle
-    // 4 [OPTIONAl] CDN JS bundle
-    // and then 3 fetch requests
-    if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
-      expect(requestCount).toBe(7);
-    } else {
-      expect(requestCount).toBe(6);
-    }
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    await Promise.all([page.goto(url), ...[0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))]);
+
+    expect(await page.evaluate('window._sentryTransactionsCount')).toBe(0);
+
+    expect(sentryTraceHeaders).toHaveLength(3);
+    expect(sentryTraceHeaders).toEqual([
+      expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+      expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+      expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})$/),
+    ]);
   },
 );

dev-packages/browser-integration-tests/suites/tracing/request/fetch/subject.js

@@ -1 +1,5 @@
-fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));
+fetch('http://example.com/0').then(
+  fetch('http://example.com/1', { headers: { 'X-Test-Header': 'existing-header' } }).then(
+    fetch('http://example.com/2'),
+  ),
+);

dev-packages/browser-integration-tests/suites/tracing/request/fetch/test.ts

@@ -4,7 +4,7 @@ import type { Event } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
 
-sentryTest('should create spans for multiple fetch requests', async ({ getLocalTestPath, page }) => {
+sentryTest('should create spans for fetch requests', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
@@ -40,7 +40,7 @@ sentryTest('should create spans for multiple fetch requests', async ({ getLocalT
   );
 });
 
-sentryTest('should attach `sentry-trace` header to multiple fetch requests', async ({ getLocalTestPath, page }) => {
+sentryTest('should attach `sentry-trace` header to fetch requests', async ({ getLocalTestPath, page }) => {
   if (shouldSkipTracingTest()) {
     sentryTest.skip();
   }
@@ -56,10 +56,25 @@ sentryTest('should attach `sentry-trace` header to multiple fetch requests', asy
 
   expect(requests).toHaveLength(3);
 
-  for (const request of requests) {
-    const requestHeaders = request.headers();
-    expect(requestHeaders).toMatchObject({
-      'sentry-trace': expect.any(String),
-    });
-  }
+  const request1 = requests[0];
+  const requestHeaders1 = request1.headers();
+  expect(requestHeaders1).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-1$/),
+    baggage: expect.any(String),
+  });
+
+  const request2 = requests[1];
+  const requestHeaders2 = request2.headers();
+  expect(requestHeaders2).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-1$/),
+    baggage: expect.any(String),
+    'x-test-header': 'existing-header',
+  });
+
+  const request3 = requests[2];
+  const requestHeaders3 = request3.headers();
+  expect(requestHeaders3).toMatchObject({
+    'sentry-trace': expect.stringMatching(/^([a-f0-9]{32})-([a-f0-9]{16})-1$/),
+    baggage: expect.any(String),
+  });
 });

dev-packages/browser-integration-tests/suites/tracing/request/xhr-no-tracing/init.js

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  tracePropagationTargets: ['http://example.com'],
+});

dev-packages/browser-integration-tests/suites/tracing/request/xhr-no-tracing/subject.js

@@ -0,0 +1,12 @@
+const xhr_1 = new XMLHttpRequest();
+xhr_1.open('GET', 'http://example.com/0');
+xhr_1.send();
+
+const xhr_2 = new XMLHttpRequest();
+xhr_2.open('GET', 'http://example.com/1');
+xhr_2.setRequestHeader('X-Test-Header', 'existing-header');
+xhr_2.send();
+
+const xhr_3 = new XMLHttpRequest();
+xhr_3.open('GET', 'http://example.com/2');
+xhr_3.send();

dev-packages/browser-integration-tests/suites/tracing/request/xhr-no-tracing/test.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not attach `sentry-trace` header to fetch requests without tracing',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const requests = (
+      await Promise.all([
+        page.goto(url),
+        Promise.all([0, 1, 2].map(idx => page.waitForRequest(`http://example.com/${idx}`))),
+      ])
+    )[1];
+
+    expect(requests).toHaveLength(3);
+
+    for (const request of requests) {
+      const requestHeaders = request.headers();
+      expect(requestHeaders['sentry-trace']).toBeUndefined();
+      expect(requestHeaders['baggage']).toBeUndefined();
+    }
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/request/xhr-tracing-unsampled/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://example.com'],
+  tracesSampleRate: 0,
+});

dev-packages/browser-integration-tests/suites/tracing/request/xhr-tracing-unsampled/subject.js

@@ -0,0 +1,12 @@
+const xhr_1 = new XMLHttpRequest();
+xhr_1.open('GET', 'http://example.com/0');
+xhr_1.send();
+
+const xhr_2 = new XMLHttpRequest();
+xhr_2.open('GET', 'http://example.com/1');
+xhr_2.setRequestHeader('X-Test-Header', 'existing-header');
+xhr_2.send();
+
+const xhr_3 = new XMLHttpRequest();
+xhr_3.open('GET', 'http://example.com/2');
+xhr_3.send();