fix(replay): Add BODY_PARSE_ERROR warning & time out fetch response load (#9622)

This is a tricky one 😬 Basically, it is possible that fetch returns a
readable stream that is ongoing. So if we do `await response.text()`
this will be pending forever, if a stream is ongoing.

I haven't found a way to really check that is the case and avoid parsing
this at all 🤔 So the best I could come up with was to instead add a
timeout of 500ms when we stop waiting for the fetch body.

This should at least unblock waiting on this, but it will still mean
that the response continues to be parsed client-side - I don't think
there is a way to abort this 🤔

Additionally, this also refactors this a bit so we add a new
`BODY_PARSE_ERROR` meta warning if the parsing of the body fails, for
whatever reason. we may also use this in the replay UI cc @ryan953
somehow?

"fixes" #9616

Author: mydea

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

@@ -3,6 +3,7 @@ import { logger } from '@sentry/utils';
 
 import type {
   FetchHint,
+  NetworkMetaWarning,
   ReplayContainer,
   ReplayNetworkOptions,
   ReplayNetworkRequestData,
@@ -16,6 +17,7 @@ import {
   getBodySize,
   getBodyString,
   makeNetworkReplayBreadcrumb,
+  mergeWarning,
   parseContentLengthHeader,
   urlMatches,
 } from './networkUtils';
@@ -118,17 +120,24 @@ function _getRequestInfo(
 
   // We only want to transmit string or string-like bodies
   const requestBody = _getFetchRequestArgBody(input);
-  const bodyStr = getBodyString(requestBody);
-  return buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
+  const [bodyStr, warning] = getBodyString(requestBody);
+  const data = buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
+
+  if (warning) {
+    return mergeWarning(data, warning);
+  }
+
+  return data;
 }
 
-async function _getResponseInfo(
+/** Exported only for tests. */
+export async function _getResponseInfo(
   captureDetails: boolean,
   {
     networkCaptureBodies,
     textEncoder,
     networkResponseHeaders,
-  }: ReplayNetworkOptions & {
+  }: Pick<ReplayNetworkOptions, 'networkCaptureBodies' | 'networkResponseHeaders'> & {
     textEncoder: TextEncoderInternal;
   },
   response: Response | undefined,
@@ -144,12 +153,39 @@ async function _getResponseInfo(
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
 
-  // Only clone the response if we need to
-  try {
-    // We have to clone this, as the body can only be read once
-    const res = response.clone();
-    const bodyText = await _parseFetchBody(res);
+  const [bodyText, warning] = await _parseFetchResponseBody(response);
+  const result = getResponseData(bodyText, {
+    networkCaptureBodies,
+    textEncoder,
+    responseBodySize,
+    captureDetails,
+    headers,
+  });
+
+  if (warning) {
+    return mergeWarning(result, warning);
+  }
 
+  return result;
+}
+
+function getResponseData(
+  bodyText: string | undefined,
+  {
+    networkCaptureBodies,
+    textEncoder,
+    responseBodySize,
+    captureDetails,
+    headers,
+  }: {
+    captureDetails: boolean;
+    networkCaptureBodies: boolean;
+    responseBodySize: number | undefined;
+    headers: Record<string, string>;
+    textEncoder: TextEncoderInternal;
+  },
+): ReplayNetworkRequestOrResponse | undefined {
+  try {
     const size =
       bodyText && bodyText.length && responseBodySize === undefined
         ? getBodySize(bodyText, textEncoder)
@@ -171,11 +207,19 @@ async function _getResponseInfo(
   }
 }
 
-async function _parseFetchBody(response: Response): Promise<string | undefined> {
+async function _parseFetchResponseBody(response: Response): Promise<[string | undefined, NetworkMetaWarning?]> {
+  const res = _tryCloneResponse(response);
+
+  if (!res) {
+    return [undefined, 'BODY_PARSE_ERROR'];
+  }
+
   try {
-    return await response.text();
-  } catch {
-    return undefined;
+    const text = await _tryGetResponseText(res);
+    return [text];
+  } catch (error) {
+    __DEBUG_BUILD__ && logger.warn('[Replay] Failed to get text body from response', error);
+    return [undefined, 'BODY_PARSE_ERROR'];
   }
 }
 
@@ -237,3 +281,39 @@ function getHeadersFromOptions(
 
   return getAllowedHeaders(headers, allowedHeaders);
 }
+
+function _tryCloneResponse(response: Response): Response | void {
+  try {
+    // We have to clone this, as the body can only be read once
+    return response.clone();
+  } catch (error) {
+    // this can throw if the response was already consumed before
+    __DEBUG_BUILD__ && logger.warn('[Replay] Failed to clone response body', error);
+  }
+}
+
+/**
+ * Get the response body of a fetch request, or timeout after 500ms.
+ * Fetch can return a streaming body, that may not resolve (or not for a long time).
+ * If that happens, we rather abort after a short time than keep waiting for this.
+ */
+function _tryGetResponseText(response: Response): Promise<string | undefined> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => reject(new Error('Timeout while trying to read response body')), 500);
+
+    _getResponseText(response)
+      .then(
+        txt => resolve(txt),
+        reason => reject(reason),
+      )
+      .finally(() => clearTimeout(timeout));
+  });
+
+  return _getResponseText(response);
+}
+
+async function _getResponseText(response: Response): Promise<string> {
+  // Force this to be a promise, just to be safe
+  // eslint-disable-next-line no-return-await
+  return await response.text();
+}

packages/replay/src/coreHandlers/util/networkUtils.ts

@@ -61,26 +61,50 @@ export function parseContentLengthHeader(header: string | null | undefined): num
 }
 
 /** Get the string representation of a body. */
-export function getBodyString(body: unknown): string | undefined {
+export function getBodyString(body: unknown): [string | undefined, NetworkMetaWarning?] {
   try {
     if (typeof body === 'string') {
-      return body;
+      return [body];
     }
 
     if (body instanceof URLSearchParams) {
-      return body.toString();
+      return [body.toString()];
     }
 
     if (body instanceof FormData) {
-      return _serializeFormData(body);
+      return [_serializeFormData(body)];
     }
   } catch {
     __DEBUG_BUILD__ && logger.warn('[Replay] Failed to serialize body', body);
+    return [undefined, 'BODY_PARSE_ERROR'];
   }
 
   __DEBUG_BUILD__ && logger.info('[Replay] Skipping network body because of body type', body);
 
-  return undefined;
+  return [undefined];
+}
+
+/** Merge a warning into an existing network request/response. */
+export function mergeWarning(
+  info: ReplayNetworkRequestOrResponse | undefined,
+  warning: NetworkMetaWarning,
+): ReplayNetworkRequestOrResponse {
+  if (!info) {
+    return {
+      headers: {},
+      size: undefined,
+      _meta: {
+        warnings: [warning],
+      },
+    };
+  }
+
+  const newMeta = { ...info._meta };
+  const existingWarnings = newMeta.warnings || [];
+  newMeta.warnings = [...existingWarnings, warning];
+
+  info._meta = newMeta;
+  return info;
 }
 
 /** Convert ReplayNetworkRequestData to a PerformanceEntry. */

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

@@ -1,7 +1,13 @@
 import type { Breadcrumb, TextEncoderInternal, XhrBreadcrumbData } from '@sentry/types';
 import { logger, SENTRY_XHR_DATA_KEY } from '@sentry/utils';
 
-import type { ReplayContainer, ReplayNetworkOptions, ReplayNetworkRequestData, XhrHint } from '../../types';
+import type {
+  NetworkMetaWarning,
+  ReplayContainer,
+  ReplayNetworkOptions,
+  ReplayNetworkRequestData,
+  XhrHint,
+} from '../../types';
 import { addNetworkBreadcrumb } from './addNetworkBreadcrumb';
 import {
   buildNetworkRequestOrResponse,
@@ -10,6 +16,7 @@ import {
   getBodySize,
   getBodyString,
   makeNetworkReplayBreadcrumb,
+  mergeWarning,
   parseContentLengthHeader,
   urlMatches,
 } from './networkUtils';
@@ -103,8 +110,8 @@ function _prepareXhrData(
     : {};
   const networkResponseHeaders = getAllowedHeaders(getResponseHeaders(xhr), options.networkResponseHeaders);
 
-  const requestBody = options.networkCaptureBodies ? getBodyString(input) : undefined;
-  const responseBody = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : undefined;
+  const [requestBody, requestWarning] = options.networkCaptureBodies ? getBodyString(input) : [undefined];
+  const [responseBody, responseWarning] = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : [undefined];
 
   const request = buildNetworkRequestOrResponse(networkRequestHeaders, requestBodySize, requestBody);
   const response = buildNetworkRequestOrResponse(networkResponseHeaders, responseBodySize, responseBody);
@@ -115,8 +122,8 @@ function _prepareXhrData(
     url,
     method,
     statusCode,
-    request,
-    response,
+    request: requestWarning ? mergeWarning(request, requestWarning) : request,
+    response: responseWarning ? mergeWarning(response, responseWarning) : response,
   };
 }
 
@@ -134,12 +141,12 @@ function getResponseHeaders(xhr: XMLHttpRequest): Record<string, string> {
   }, {});
 }
 
-function _getXhrResponseBody(xhr: XMLHttpRequest): string | undefined {
+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[] = [];
 
   try {
-    return xhr.responseText;
+    return [xhr.responseText];
   } catch (e) {
     errors.push(e);
   }
@@ -154,5 +161,5 @@ function _getXhrResponseBody(xhr: XMLHttpRequest): string | undefined {
 
   __DEBUG_BUILD__ && logger.warn('[Replay] Failed to get xhr response body', ...errors);
 
-  return undefined;
+  return [undefined];
 }

packages/replay/src/types/request.ts

@@ -3,7 +3,7 @@ type JsonArray = unknown[];
 
 export type NetworkBody = JsonObject | JsonArray | string;
 
-export type NetworkMetaWarning = 'MAYBE_JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'URL_SKIPPED';
+export type NetworkMetaWarning = 'MAYBE_JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'URL_SKIPPED' | 'BODY_PARSE_ERROR';
 
 interface NetworkMeta {
   warnings?: NetworkMetaWarning[];

packages/replay/test/unit/coreHandlers/handleNetworkBreadcrumbs.test.ts

@@ -23,6 +23,8 @@ async function waitForReplayEventBuffer() {
   await Promise.resolve();
   await Promise.resolve();
   await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
 }
 
 const LARGE_BODY = 'a'.repeat(NETWORK_BODY_MAX_SIZE + 1);