feat: added hook to browser integration settings

Author: logaretm

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -1,5 +1,13 @@
 /* eslint-disable max-lines */
-import type { Client, IntegrationFn, Span, StartSpanOptions, TransactionSource, WebFetchHeaders } from '@sentry/core';
+import type {
+  Client,
+  IntegrationFn,
+  RequestHookInfo,
+  ResponseHookInfo,
+  Span,
+  StartSpanOptions,
+  TransactionSource,
+} from '@sentry/core';
 import {
   addNonEnumerableProperty,
   browserPerformanceTimeOrigin,
@@ -297,7 +305,12 @@ export interface BrowserTracingOptions {
    * 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: RequestHookInfo): void;
+
+  /**
+   * Is called when spans end for outgoing requests, providing access to response headers.
+   */
+  onRequestSpanEnd?(span: Span, responseInformation: ResponseHookInfo): void;
 }
 
 const DEFAULT_BROWSER_TRACING_OPTIONS: BrowserTracingOptions = {
@@ -365,6 +378,7 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
     consistentTraceSampling,
     enableReportPageLoaded,
     onRequestSpanStart,
+    onRequestSpanEnd,
   } = {
     ...DEFAULT_BROWSER_TRACING_OPTIONS,
     ...options,
@@ -692,6 +706,7 @@ export const browserTracingIntegration = ((options: Partial<BrowserTracingOption
         shouldCreateSpanForRequest,
         enableHTTPTimings,
         onRequestSpanStart,
+        onRequestSpanEnd,
       });
     },
   };

packages/browser/src/tracing/request.ts

@@ -1,4 +1,11 @@
-import type { Client, HandlerDataXhr, SentryWrappedXMLHttpRequest, Span, WebFetchHeaders } from '@sentry/core';
+import type {
+  Client,
+  HandlerDataXhr,
+  RequestHookInfo,
+  ResponseHookInfo,
+  SentryWrappedXMLHttpRequest,
+  Span,
+} from '@sentry/core';
 import {
   addFetchEndInstrumentationHandler,
   addFetchInstrumentationHandler,
@@ -26,7 +33,7 @@ import {
   SENTRY_XHR_DATA_KEY,
 } from '@sentry-internal/browser-utils';
 import type { BrowserClient } from '../client';
-import { WINDOW } from '../helpers';
+import { baggageHeaderHasSentryValues, createHeadersSafely, getFullURL, isPerformanceResourceTiming } from './utils';
 
 /** Options for Request Instrumentation */
 export interface RequestInstrumentationOptions {
@@ -102,7 +109,12 @@ export interface RequestInstrumentationOptions {
   /**
    * Is called when spans are started for outgoing requests.
    */
-  onRequestSpanStart?(span: Span, requestInformation: { headers?: WebFetchHeaders }): void;
+  onRequestSpanStart?(span: Span, requestInformation: RequestHookInfo): void;
+
+  /**
+   * Is called when spans end for outgoing requests, providing access to response headers.
+   */
+  onRequestSpanEnd?(span: Span, responseInformation: ResponseHookInfo): void;
 }
 
 const responseToSpanId = new WeakMap<object, string>();
@@ -125,6 +137,7 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
     enableHTTPTimings,
     tracePropagationTargets,
     onRequestSpanStart,
+    onRequestSpanEnd,
   } = {
     ...defaultRequestInstrumentationOptions,
     ..._options,
@@ -171,6 +184,7 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
     addFetchInstrumentationHandler(handlerData => {
       const createdSpan = instrumentFetchRequest(handlerData, shouldCreateSpan, shouldAttachHeadersWithTargets, spans, {
         propagateTraceparent,
+        onRequestSpanEnd,
       });
 
       if (handlerData.response && handlerData.fetchData.__span) {
@@ -205,34 +219,22 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
         shouldAttachHeadersWithTargets,
         spans,
         propagateTraceparent,
+        onRequestSpanEnd,
       );
 
       if (createdSpan) {
         if (enableHTTPTimings) {
           addHTTPTimings(createdSpan);
         }
 
-        let headers;
-        try {
-          headers = new Headers(handlerData.xhr.__sentry_xhr_v3__?.request_headers);
-        } catch {
-          // noop
-        }
-        onRequestSpanStart?.(createdSpan, { headers });
+        onRequestSpanStart?.(createdSpan, {
+          headers: createHeadersSafely(handlerData.xhr.__sentry_xhr_v3__?.request_headers),
+        });
       }
     });
   }
 }
 
-function isPerformanceResourceTiming(entry: PerformanceEntry): entry is PerformanceResourceTiming {
-  return (
-    entry.entryType === 'resource' &&
-    'initiatorType' in entry &&
-    typeof (entry as PerformanceResourceTiming).nextHopProtocol === 'string' &&
-    (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest')
-  );
-}
-
 /**
  * Creates a temporary observer to listen to the next fetch/xhr resourcing timings,
  * so that when timings hit their per-browser limit they don't need to be removed.
@@ -315,6 +317,7 @@ function xhrCallback(
   shouldAttachHeaders: (url: string) => boolean,
   spans: Record<string, Span>,
   propagateTraceparent?: boolean,
+  onRequestSpanEnd?: RequestInstrumentationOptions['onRequestSpanEnd'],
 ): Span | undefined {
   const xhr = handlerData.xhr;
   const sentryXhrData = xhr?.[SENTRY_XHR_DATA_KEY];
@@ -337,6 +340,10 @@ function xhrCallback(
       setHttpStatus(span, sentryXhrData.status_code);
       span.end();
 
+      onRequestSpanEnd?.(span, {
+        headers: createHeadersSafely(sentryXhrData.request_headers),
+      });
+
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete spans[spanId];
     }
@@ -438,18 +445,3 @@ function setHeaderOnXhr(
     // Error: InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
   }
 }
-
-function baggageHeaderHasSentryValues(baggageHeader: string): boolean {
-  return baggageHeader.split(',').some(value => value.trim().startsWith('sentry-'));
-}
-
-function getFullURL(url: string): string | undefined {
-  try {
-    // By adding a base URL to new URL(), this will also work for relative urls
-    // If `url` is a full URL, the base URL is ignored anyhow
-    const parsed = new URL(url, WINDOW.location.origin);
-    return parsed.href;
-  } catch {
-    return undefined;
-  }
-}

packages/browser/src/tracing/utils.ts

@@ -0,0 +1,46 @@
+import { WINDOW } from '../helpers';
+
+/**
+ * Checks if the baggage header has Sentry values.
+ */
+export function baggageHeaderHasSentryValues(baggageHeader: string): boolean {
+  return baggageHeader.split(',').some(value => value.trim().startsWith('sentry-'));
+}
+
+/**
+ * Gets the full URL from a given URL string.
+ */
+export function getFullURL(url: string): string | undefined {
+  try {
+    // By adding a base URL to new URL(), this will also work for relative urls
+    // If `url` is a full URL, the base URL is ignored anyhow
+    const parsed = new URL(url, WINDOW.location.origin);
+    return parsed.href;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Checks if the entry is a PerformanceResourceTiming.
+ */
+export function isPerformanceResourceTiming(entry: PerformanceEntry): entry is PerformanceResourceTiming {
+  return (
+    entry.entryType === 'resource' &&
+    'initiatorType' in entry &&
+    typeof (entry as PerformanceResourceTiming).nextHopProtocol === 'string' &&
+    (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest')
+  );
+}
+
+/**
+ * Creates a Headers object from a record of string key-value pairs, and returns undefined if it fails.
+ */
+export function createHeadersSafely(headers: Record<string, string> | undefined): Headers | undefined {
+  try {
+    return new Headers(headers);
+  } catch {
+    // noop
+    return undefined;
+  }
+}

packages/core/src/fetch.ts

@@ -4,6 +4,7 @@ import { setHttpStatus, SPAN_STATUS_ERROR, startInactiveSpan } from './tracing';
 import { SentryNonRecordingSpan } from './tracing/sentryNonRecordingSpan';
 import type { FetchBreadcrumbHint } from './types-hoist/breadcrumb';
 import type { HandlerDataFetch } from './types-hoist/instrument';
+import type { ResponseHookInfo } from './types-hoist/request';
 import type { Span, SpanAttributes, SpanOrigin } from './types-hoist/span';
 import { SENTRY_BAGGAGE_KEY_PREFIX } from './utils/baggage';
 import { hasSpansEnabled } from './utils/hasSpansEnabled';
@@ -24,6 +25,7 @@ type PolymorphicRequestHeaders =
 interface InstrumentFetchRequestOptions {
   spanOrigin?: SpanOrigin;
   propagateTraceparent?: boolean;
+  onRequestSpanEnd?: (span: Span, responseInformation: ResponseHookInfo) => void;
 }
 
 /**
@@ -82,6 +84,8 @@ export function instrumentFetchRequest(
     if (span) {
       endSpan(span, handlerData);
 
+      _callOnRequestSpanEnd(span, handlerData, spanOriginOrOptions);
+
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete spans[spanId];
     }
@@ -141,6 +145,24 @@ export function instrumentFetchRequest(
   return span;
 }
 
+/**
+ * Calls the onRequestSpanEnd callback if it is defined.
+ */
+export function _callOnRequestSpanEnd(
+  span: Span,
+  handlerData: HandlerDataFetch,
+  spanOriginOrOptions?: SpanOrigin | InstrumentFetchRequestOptions,
+): void {
+  const onRequestSpanEnd =
+    typeof spanOriginOrOptions === 'object' && spanOriginOrOptions !== null
+      ? spanOriginOrOptions.onRequestSpanEnd
+      : undefined;
+
+  onRequestSpanEnd?.(span, {
+    headers: handlerData.response?.headers,
+  });
+}
+
 /**
  * Adds sentry-trace and baggage headers to the various forms of fetch headers.
  * exported only for testing purposes

packages/core/src/index.ts

@@ -390,7 +390,13 @@ export type {
   SendFeedbackParams,
   UserFeedback,
 } from './types-hoist/feedback';
-export type { QueryParams, RequestEventData, SanitizedRequestData } from './types-hoist/request';
+export type {
+  QueryParams,
+  RequestEventData,
+  RequestHookInfo,
+  ResponseHookInfo,
+  SanitizedRequestData,
+} from './types-hoist/request';
 export type { Runtime } from './types-hoist/runtime';
 export type { SdkInfo } from './types-hoist/sdkinfo';
 export type { SdkMetadata } from './types-hoist/sdkmetadata';

packages/core/src/types-hoist/request.ts

@@ -1,3 +1,5 @@
+import type { WebFetchHeaders } from './webfetchapi';
+
 /**
  * Request data included in an event as sent to Sentry.
  */
@@ -24,3 +26,19 @@ export type SanitizedRequestData = {
   'http.fragment'?: string;
   'http.query'?: string;
 };
+
+export interface RequestHookInfo {
+  headers?: WebFetchHeaders;
+}
+
+export interface ResponseHookInfo {
+  /**
+   * Headers from the response.
+   */
+  headers?: WebFetchHeaders;
+
+  /**
+   * Error that may have occurred during the request.
+   */
+  error?: unknown;
+}