Merge branch 'lforst-request-span-hook' into lforst-nextjs-client-prefetch-op

Author: Luca Forstner

.size-limit.js

@@ -139,7 +139,7 @@ module.exports = [
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '39.5 KB',
+    limit: '40 KB',
   },
   // Svelte SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/on-request-span-start/init.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 1000,
+      onRequestSpanStart(span, { headers }) {
+        span.setAttribute('hook.called.headers', headers.get('foo'));
+      },
+    }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/on-request-span-start/subject.js

@@ -0,0 +1,11 @@
+fetch('http://sentry-test-site-fetch.example/', {
+  headers: {
+    foo: 'fetch',
+  },
+});
+
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'http://sentry-test-site-xhr.example/');
+xhr.setRequestHeader('foo', 'xhr');
+xhr.send();

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/on-request-span-start/test.ts

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should call onRequestSpanStart hook', async ({ browserName, getLocalTestUrl, page }) => {
+  const supportedBrowsers = ['chromium', 'firefox'];
+
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
+
+  await page.route('http://sentry-test-site-fetch.example/', async route => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: '',
+    });
+  });
+  await page.route('http://sentry-test-site-xhr.example/', async route => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: '',
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const envelopes = await getMultipleSentryEnvelopeRequests<Event>(page, 2, { url, timeout: 10000 });
+
+  const tracingEvent = envelopes[envelopes.length - 1]; // last envelope contains tracing data on all browsers
+
+  expect(tracingEvent.spans).toContainEqual(
+    expect.objectContaining({
+      op: 'http.client',
+      data: {
+        'hook.called.headers': 'fetch',
+      },
+    }),
+  );
+
+  expect(tracingEvent.spans).toContainEqual(
+    expect.objectContaining({
+      op: 'http.client',
+      data: {
+        'hook.called.headers': 'xhr',
+      },
+    }),
+  );
+});

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -197,9 +197,11 @@ export interface BrowserTracingOptions {
   shouldCreateSpanForRequest?(this: void, url: string): boolean;
 
   /**
-   * Is called when spans are started for outgoing requests.
+   * This callback is invoked directly after a span is started for an outgoing fetch or XHR request.
+   * You can use it to annotate the span with additional data or attributes, for example by setting
+   * attributes based on the passed request headers.
    */
-  onRequestSpanStart(span: Span, requestInformation: { headers?: WebFetchHeaders }): void;
+  onRequestSpanStart?(span: Span, requestInformation: { headers?: WebFetchHeaders }): void;
 }
 
 const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {

packages/browser/src/tracing/request.ts

@@ -102,7 +102,7 @@ export interface RequestInstrumentationOptions {
   /**
    * Is called when spans are started for outgoing requests.
    */
-  onRequestSpanStart(span: Span, requestInformation: { headers?: WebFetchHeaders }): void;
+  onRequestSpanStart?(span: Span, requestInformation: { headers?: WebFetchHeaders }): void;
 }
 
 const responseToSpanId = new WeakMap<object, string>();
@@ -113,9 +113,6 @@ export const defaultRequestInstrumentationOptions: RequestInstrumentationOptions
   traceXHR: true,
   enableHTTPTimings: true,
   trackFetchStreamPerformance: false,
-  onRequestSpanStart() {
-    // noop
-  },
 };
 
 /** Registers span creators for xhr and fetch requests  */
@@ -191,7 +188,7 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
           addHTTPTimings(createdSpan);
         }
 
-        onRequestSpanStart(createdSpan, { headers: handlerData.headers });
+        onRequestSpanStart?.(createdSpan, { headers: handlerData.headers });
       }
     });
   }
@@ -210,7 +207,7 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
         } catch {
           // noop
         }
-        onRequestSpanStart(createdSpan, { headers });
+        onRequestSpanStart?.(createdSpan, { headers });
       }
     });
   }