refactor: hoist replay header parsing code to browser utils

Author: logaretm

packages/browser-utils/src/index.ts

@@ -28,7 +28,14 @@ export { fetch, setTimeout, clearCachedImplementation, getNativeImplementation }
 
 export { addXhrInstrumentationHandler, SENTRY_XHR_DATA_KEY } from './instrument/xhr';
 
-export { getBodyString, getFetchRequestArgBody, serializeFormData } from './networkUtils';
+export {
+  getBodyString,
+  getFetchRequestArgBody,
+  serializeFormData,
+  parseXhrResponseHeaders,
+  getFetchResponseHeaders,
+  filterAllowedHeaders,
+} from './networkUtils';
 
 export { resourceTimingToSpanAttributes } from './metrics/resourceTiming';
 

packages/browser-utils/src/networkUtils.ts

@@ -54,3 +54,58 @@ export function getFetchRequestArgBody(fetchArgs: unknown[] = []): RequestInit['
 
   return (fetchArgs[1] as RequestInit).body;
 }
+
+/**
+ * Parses XMLHttpRequest response headers into a Record.
+ * Extracted from replay internals to be reusable.
+ */
+export function parseXhrResponseHeaders(xhr: XMLHttpRequest): Record<string, string> {
+  const headers = xhr.getAllResponseHeaders();
+
+  if (!headers) {
+    return {};
+  }
+
+  return headers.split('\r\n').reduce((acc: Record<string, string>, line: string) => {
+    const [key, value] = line.split(': ') as [string, string | undefined];
+    if (value) {
+      acc[key.toLowerCase()] = value;
+    }
+    return acc;
+  }, {});
+}
+
+/**
+ * Gets specific headers from a Headers object (Fetch API).
+ * Extracted from replay internals to be reusable.
+ */
+export function getFetchResponseHeaders(headers: Headers, allowedHeaders: string[]): Record<string, string> {
+  const allHeaders: Record<string, string> = {};
+
+  allowedHeaders.forEach(header => {
+    const value = headers.get(header);
+    if (value) {
+      allHeaders[header.toLowerCase()] = value;
+    }
+  });
+
+  return allHeaders;
+}
+
+/**
+ * Filters headers based on an allowed list.
+ * Extracted from replay internals to be reusable.
+ */
+export function filterAllowedHeaders(
+  headers: Record<string, string>,
+  allowedHeaders: string[],
+): Record<string, string> {
+  return Object.entries(headers).reduce((filteredHeaders: Record<string, string>, [key, value]) => {
+    const normalizedKey = key.toLowerCase();
+    // Avoid putting empty strings into the headers
+    if (allowedHeaders.includes(normalizedKey) && value) {
+      filteredHeaders[normalizedKey] = value;
+    }
+    return filteredHeaders;
+  }, {});
+}

packages/replay-internal/src/coreHandlers/util/fetchUtils.ts

@@ -1,6 +1,11 @@
 import type { Breadcrumb, FetchBreadcrumbData } from '@sentry/core';
 import type { FetchHint, NetworkMetaWarning } from '@sentry-internal/browser-utils';
-import { getBodyString, getFetchRequestArgBody, setTimeout } from '@sentry-internal/browser-utils';
+import {
+  getBodyString,
+  getFetchRequestArgBody,
+  getFetchResponseHeaders,
+  setTimeout,
+} from '@sentry-internal/browser-utils';
 import { DEBUG_BUILD } from '../../debug-build';
 import type {
   ReplayContainer,
@@ -139,7 +144,7 @@ export async function _getResponseInfo(
     return buildSkippedNetworkRequestOrResponse(responseBodySize);
   }
 
-  const headers = response ? getAllHeaders(response.headers, networkResponseHeaders) : {};
+  const headers = response ? getFetchResponseHeaders(response.headers, networkResponseHeaders) : {};
 
   if (!response || (!networkCaptureBodies && responseBodySize !== undefined)) {
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
@@ -215,18 +220,6 @@ async function _parseFetchResponseBody(response: Response): Promise<[string | un
   }
 }
 
-function getAllHeaders(headers: Headers, allowedHeaders: string[]): Record<string, string> {
-  const allHeaders: Record<string, string> = {};
-
-  allowedHeaders.forEach(header => {
-    if (headers.get(header)) {
-      allHeaders[header] = headers.get(header) as string;
-    }
-  });
-
-  return allHeaders;
-}
-
 function getRequestHeaders(fetchArgs: unknown[], allowedHeaders: string[]): Record<string, string> {
   if (fetchArgs.length === 1 && typeof fetchArgs[0] !== 'string') {
     return getHeadersFromOptions(fetchArgs[0] as Request | RequestInit, allowedHeaders);
@@ -254,7 +247,7 @@ function getHeadersFromOptions(
   }
 
   if (headers instanceof Headers) {
-    return getAllHeaders(headers, allowedHeaders);
+    return getFetchResponseHeaders(headers, allowedHeaders);
   }
 
   // We do not support this, as it is not really documented (anymore?)

packages/replay-internal/src/coreHandlers/util/xhrUtils.ts

@@ -1,6 +1,6 @@
 import type { Breadcrumb, XhrBreadcrumbData } from '@sentry/core';
 import type { NetworkMetaWarning, XhrHint } from '@sentry-internal/browser-utils';
-import { getBodyString, SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
+import { getBodyString, parseXhrResponseHeaders, SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
 import { DEBUG_BUILD } from '../../debug-build';
 import type { ReplayContainer, ReplayNetworkOptions, ReplayNetworkRequestData } from '../../types';
 import { debug } from '../../util/logger';
@@ -104,7 +104,7 @@ function _prepareXhrData(
   const networkRequestHeaders = xhrInfo
     ? getAllowedHeaders(xhrInfo.request_headers, options.networkRequestHeaders)
     : {};
-  const networkResponseHeaders = getAllowedHeaders(getResponseHeaders(xhr), options.networkResponseHeaders);
+  const networkResponseHeaders = getAllowedHeaders(parseXhrResponseHeaders(xhr), options.networkResponseHeaders);
 
   const [requestBody, requestWarning] = options.networkCaptureBodies ? getBodyString(input, debug) : [undefined];
   const [responseBody, responseWarning] = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : [undefined];
@@ -123,22 +123,6 @@ function _prepareXhrData(
   };
 }
 
-function getResponseHeaders(xhr: XMLHttpRequest): Record<string, string> {
-  const headers = xhr.getAllResponseHeaders();
-
-  if (!headers) {
-    return {};
-  }
-
-  return headers.split('\r\n').reduce((acc: Record<string, string>, line: string) => {
-    const [key, value] = line.split(': ') as [string, string | undefined];
-    if (value) {
-      acc[key.toLowerCase()] = value;
-    }
-    return acc;
-  }, {});
-}
-
 function _getXhrResponseBody(xhr: XMLHttpRequest): [string | undefined, NetworkMetaWarning?] {
   // We collect errors that happen, but only log them if we can't get any response body
   const errors: unknown[] = [];