feat(browser): Send standalone fetch and XHR spans if there's no active parent span (#11783)

Enable sending standalone `http.client` spans for outgoing
`fetch` and XHR requests if there's no active parent span. These spans
will belong to the same trace id as a potentially previously started
pageload or navigation span.

Adjusted integration tests to test the newly sent spans and their trace
lifetime.

Author: Lms24

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

@@ -2,8 +2,6 @@ import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 
-window._sentryTransactionsCount = 0;
-
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   // disable auto span creation
@@ -16,8 +14,4 @@ Sentry.init({
   tracePropagationTargets: ['http://example.com'],
   tracesSampleRate: 1,
   autoSessionTracking: false,
-  beforeSendTransaction() {
-    window._sentryTransactionsCount++;
-    return null;
-  },
 });

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

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

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

@@ -0,0 +1,96 @@
+import type { SpanEnvelope } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getFirstSentryEnvelopeRequest,
+  properFullEnvelopeRequestParser,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
+
+import { expect } from '@playwright/test';
+
+sentryTest(
+  "should create standalone span for fetch requests if there's no active span and should attach tracing headers",
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    let sentryTraceHeader = '';
+    let baggageHeader = '';
+
+    await page.route('http://example.com/**', route => {
+      sentryTraceHeader = route.request().headers()['sentry-trace'];
+      baggageHeader = route.request().headers()['baggage'];
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({}),
+      });
+    });
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const spanEnvelopePromise = getFirstSentryEnvelopeRequest<SpanEnvelope>(
+      page,
+      undefined,
+      properFullEnvelopeRequestParser,
+    );
+
+    await page.goto(url);
+
+    const spanEnvelope = await spanEnvelopePromise;
+
+    const spanEnvelopeHeaders = spanEnvelope[0];
+    const spanEnvelopeItem = spanEnvelope[1][0][1];
+
+    const traceId = spanEnvelopeHeaders.trace!.trace_id;
+    const spanId = spanEnvelopeItem.span_id;
+
+    expect(traceId).toMatch(/[a-f0-9]{32}/);
+    expect(spanId).toMatch(/[a-f0-9]{16}/);
+
+    expect(spanEnvelopeHeaders).toEqual({
+      sent_at: expect.any(String),
+      trace: {
+        environment: 'production',
+        public_key: 'public',
+        sample_rate: '1',
+        sampled: 'true',
+        trace_id: traceId,
+        transaction: 'GET http://example.com/0',
+      },
+    });
+
+    expect(spanEnvelopeItem).toEqual({
+      data: expect.objectContaining({
+        'http.method': 'GET',
+        'http.response.status_code': 200,
+        'http.response_content_length': expect.any(Number),
+        'http.url': 'http://example.com/0',
+        'sentry.op': 'http.client',
+        'sentry.origin': 'auto.http.browser',
+        'sentry.sample_rate': 1,
+        'sentry.source': 'custom',
+        'server.address': 'example.com',
+        type: 'fetch',
+        url: 'http://example.com/0',
+      }),
+      description: 'GET http://example.com/0',
+      op: 'http.client',
+      origin: 'auto.http.browser',
+      status: 'ok',
+      trace_id: traceId,
+      span_id: spanId,
+      segment_id: spanId,
+      is_segment: true,
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+    });
+
+    // the standalone span was sampled, so we propagate the positive sampling decision
+    expect(sentryTraceHeader).toBe(`${traceId}-${spanId}-1`);
+    expect(baggageHeader).toBe(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${traceId},sentry-sample_rate=1,sentry-transaction=GET%20http%3A%2F%2Fexample.com%2F0,sentry-sampled=true`,
+    );
+  },
+);

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

@@ -2,8 +2,6 @@ import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 
-window._sentryTransactionsCount = 0;
-
 Sentry.init({
   dsn: 'https://[email protected]/1337',
   // disable auto span creation
@@ -16,8 +14,4 @@ Sentry.init({
   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

@@ -0,0 +1,3 @@
+const xhr_1 = new XMLHttpRequest();
+xhr_1.open('GET', 'http://example.com/0');
+xhr_1.send();

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

@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+
+import type { SpanEnvelope } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import {
+  getFirstSentryEnvelopeRequest,
+  properFullEnvelopeRequestParser,
+  shouldSkipTracingTest,
+} from '../../../../utils/helpers';
+
+sentryTest(
+  "should create standalone span for XHR requests if there's no active span and should attach tracing headers",
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    let sentryTraceHeader = '';
+    let baggageHeader = '';
+
+    await page.route('http://example.com/**', route => {
+      sentryTraceHeader = route.request().headers()['sentry-trace'];
+      baggageHeader = route.request().headers()['baggage'];
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({}),
+      });
+    });
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const spanEnvelopePromise = getFirstSentryEnvelopeRequest<SpanEnvelope>(
+      page,
+      undefined,
+      properFullEnvelopeRequestParser,
+    );
+
+    await page.goto(url);
+
+    const spanEnvelope = await spanEnvelopePromise;
+
+    const spanEnvelopeHeaders = spanEnvelope[0];
+    const spanEnvelopeItem = spanEnvelope[1][0][1];
+
+    const traceId = spanEnvelopeHeaders.trace!.trace_id;
+    const spanId = spanEnvelopeItem.span_id;
+
+    expect(traceId).toMatch(/[a-f0-9]{32}/);
+    expect(spanId).toMatch(/[a-f0-9]{16}/);
+
+    expect(spanEnvelopeHeaders).toEqual({
+      sent_at: expect.any(String),
+      trace: {
+        environment: 'production',
+        public_key: 'public',
+        sample_rate: '1',
+        sampled: 'true',
+        trace_id: traceId,
+        transaction: 'GET http://example.com/0',
+      },
+    });
+
+    expect(spanEnvelopeItem).toEqual({
+      data: {
+        'http.method': 'GET',
+        'http.response.status_code': 200,
+        'http.url': 'http://example.com/0',
+        'sentry.op': 'http.client',
+        'sentry.origin': 'auto.http.browser',
+        'sentry.sample_rate': 1,
+        'sentry.source': 'custom',
+        'server.address': 'example.com',
+        type: 'xhr',
+        url: 'http://example.com/0',
+      },
+      description: 'GET http://example.com/0',
+      op: 'http.client',
+      origin: 'auto.http.browser',
+      status: 'ok',
+      trace_id: traceId,
+      span_id: spanId,
+      segment_id: spanId,
+      is_segment: true,
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+    });
+
+    // the standalone span was sampled, so we propagate the positive sampling decision
+    expect(sentryTraceHeader).toBe(`${traceId}-${spanId}-1`);
+    expect(baggageHeader).toBe(
+      `sentry-environment=production,sentry-public_key=public,sentry-trace_id=${traceId},sentry-sample_rate=1,sentry-transaction=GET%20http%3A%2F%2Fexample.com%2F0,sentry-sampled=true`,
+    );
+  },
+);