test(tracing): Add test to validate that spans only added when active span exists

Author: mydea

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

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

dev-packages/browser-integration-tests/suites/tracing/request/fetch-with-no-active-span/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-active-span/test.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+
+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',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    let requestCount = 0;
+    page.on('request', request => {
+      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);
+    }
+  },
+);

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

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

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

@@ -0,0 +1,11 @@
+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.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-with-no-active-span/test.ts

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeUrlRegex, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'there should be no span created for xhr requests with no active span',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    let requestCount = 0;
+    page.on('request', request => {
+      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);
+    }
+  },
+);

dev-packages/browser-integration-tests/utils/helpers.ts

@@ -1,7 +1,7 @@
 import type { Page, Request } from '@playwright/test';
 import type { EnvelopeItemType, Event, EventEnvelopeHeaders } from '@sentry/types';
 
-const envelopeUrlRegex = /\.sentry\.io\/api\/\d+\/envelope\//;
+export const envelopeUrlRegex = /\.sentry\.io\/api\/\d+\/envelope\//;
 
 export const envelopeParser = (request: Request | null): unknown[] => {
   // https://develop.sentry.dev/sdk/envelopes/