test(V7/browser-integration-tests): Check for sentry-trace header in TwP (#11555)

Author: Lms24

.size-limit.js

@@ -131,7 +131,7 @@ module.exports = [
     name: '@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)',
     path: 'packages/browser/build/bundles/bundle.tracing.es5.min.js',
     gzip: true,
-    limit: '40 KB',
+    limit: '41 KB',
   },
 
   // React

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

@@ -5,6 +5,8 @@ window.Sentry = Sentry;
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   // disable pageload transaction
-  integrations: [Sentry.BrowserTracing({ tracingOrigins: ['http://example.com'], startTransactionOnPageLoad: false })],
+  integrations: [
+    new Sentry.BrowserTracing({ tracingOrigins: ['http://example.com'], startTransactionOnPageLoad: false }),
+  ],
   tracesSampleRate: 1,
 });

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

@@ -4,7 +4,7 @@ import { sentryTest } from '../../../../utils/fixtures';
 import { envelopeUrlRegex, shouldSkipTracingTest } from '../../../../utils/helpers';
 
 sentryTest(
-  'there should be no span created for fetch requests with no active span',
+  'should not create span for fetch requests with no active span but should attach sentry-trace header',
   async ({ getLocalTestPath, page }) => {
     if (shouldSkipTracingTest()) {
       sentryTest.skip();
@@ -13,7 +13,12 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     let requestCount = 0;
+    const sentryTraceHeaders: string[] = [];
     page.on('request', request => {
+      const sentryTraceHeader = request.headers()['sentry-trace'];
+      if (sentryTraceHeader) {
+        sentryTraceHeaders.push(sentryTraceHeader);
+      }
       expect(envelopeUrlRegex.test(request.url())).toBe(false);
       requestCount++;
     });
@@ -31,5 +36,12 @@ sentryTest(
     } else {
       expect(requestCount).toBe(6);
     }
+
+    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-with-no-sample-rate/init.js

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

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

@@ -0,0 +1 @@
+fetch('http://example.com/0').then(fetch('http://example.com/1').then(fetch('http://example.com/2')));

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

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeUrlRegex, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not create span for fetch requests with no active span but should attach sentry-trace header if no sample rate is set',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    let requestCount = 0;
+    const sentryTraceHeaders: string[] = [];
+    page.on('request', request => {
+      const sentryTraceHeader = request.headers()['sentry-trace'];
+      if (sentryTraceHeader) {
+        sentryTraceHeaders.push(sentryTraceHeader);
+      }
+      expect(envelopeUrlRegex.test(request.url())).toBe(false);
+      requestCount++;
+    });
+
+    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);
+    }
+
+    // TODO: This is incorrect behavior. Even if `tracesSampleRate` is not set (which in browser
+    // realistically is the only way to truly get "Tracing without performance"), we should still
+    // attach the `sentry-trace` header to the fetch requests.
+    // Right now, we don't do this, as this test demonstrates.
+    expect(sentryTraceHeaders).toHaveLength(0);
+  },
+);