time out fetch

Author: mydea

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

@@ -17,7 +17,7 @@ import {
   getBodySize,
   getBodyString,
   makeNetworkReplayBreadcrumb,
-  mergeWarningsIntoMeta,
+  mergeWarning,
   parseContentLengthHeader,
   urlMatches,
 } from './networkUtils';
@@ -123,20 +123,21 @@ function _getRequestInfo(
   const [bodyStr, warning] = getBodyString(requestBody);
   const data = buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
 
-  if (data && warning) {
-    data._meta = mergeWarningsIntoMeta(data._meta, [warning]);
+  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,
@@ -152,8 +153,6 @@ async function _getResponseInfo(
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
 
-  // Only clone the response if we need to
-
   const [bodyText, warning] = await _parseFetchResponseBody(response);
   const result = getResponseData(bodyText, {
     networkCaptureBodies,
@@ -163,8 +162,8 @@ async function _getResponseInfo(
     headers,
   });
 
-  if (result && warning) {
-    result._meta = mergeWarningsIntoMeta(result._meta, [warning]);
+  if (warning) {
+    return mergeWarning(result, warning);
   }
 
   return result;
@@ -209,13 +208,17 @@ function getResponseData(
 }
 
 async function _parseFetchResponseBody(response: Response): Promise<[string | undefined, NetworkMetaWarning?]> {
+  const res = _tryCloneResponse(response);
+
+  if (!res) {
+    return [undefined, 'BODY_PARSE_ERROR'];
+  }
+
   try {
-    // We have to clone this, as the body can only be read once
-    const res = response.clone();
-    const text = await res.text();
+    const text = await _tryGetResponseText(res);
     return [text];
-  } catch (errorr) {
-    __DEBUG_BUILD__ && logger.warn('[Replay] Failed to read response body', errorr);
+  } catch (error) {
+    __DEBUG_BUILD__ && logger.warn('[Replay] Failed to get text body from response', error);
     return [undefined, 'BODY_PARSE_ERROR'];
   }
 }
@@ -278,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

@@ -84,16 +84,27 @@ export function getBodyString(body: unknown): [string | undefined, NetworkMetaWa
   return [undefined];
 }
 
-/** Merge warnings into an possibly existing meta. */
-export function mergeWarningsIntoMeta(
-  meta: ReplayNetworkRequestOrResponse['_meta'],
-  warnings: NetworkMetaWarning[],
-): ReplayNetworkRequestOrResponse['_meta'] {
-  const newMeta = { ...meta };
+/** 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, ...warnings];
+  newMeta.warnings = [...existingWarnings, warning];
 
-  return newMeta;
+  info._meta = newMeta;
+  return info;
 }
 
 /** Convert ReplayNetworkRequestData to a PerformanceEntry. */

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

@@ -16,7 +16,7 @@ import {
   getBodySize,
   getBodyString,
   makeNetworkReplayBreadcrumb,
-  mergeWarningsIntoMeta,
+  mergeWarning,
   parseContentLengthHeader,
   urlMatches,
 } from './networkUtils';
@@ -116,22 +116,14 @@ function _prepareXhrData(
   const request = buildNetworkRequestOrResponse(networkRequestHeaders, requestBodySize, requestBody);
   const response = buildNetworkRequestOrResponse(networkResponseHeaders, responseBodySize, responseBody);
 
-  if (request && requestWarning) {
-    request._meta = mergeWarningsIntoMeta(request._meta, [requestWarning]);
-  }
-
-  if (response && responseWarning) {
-    response._meta = mergeWarningsIntoMeta(response._meta, [responseWarning]);
-  }
-
   return {
     startTimestamp,
     endTimestamp,
     url,
     method,
     statusCode,
-    request,
-    response,
+    request: requestWarning ? mergeWarning(request, requestWarning) : request,
+    response: responseWarning ? mergeWarning(response, responseWarning) : response,
   };
 }
 

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);

packages/replay/test/unit/coreHandlers/util/fetchUtils.test.ts

@@ -0,0 +1,137 @@
+import { TextEncoder } from 'util';
+
+import { _getResponseInfo } from '../../../../src/coreHandlers/util/fetchUtils';
+
+describe('_getResponseInfo', () => {
+  it('works with captureDetails: false', async () => {
+    const res = await _getResponseInfo(
+      false,
+      {
+        networkCaptureBodies: true,
+        textEncoder: new TextEncoder(),
+        networkResponseHeaders: [],
+      },
+      undefined,
+      undefined,
+    );
+
+    expect(res).toEqual(undefined);
+  });
+
+  it('works with captureDetails: false & responseBodySize', async () => {
+    const res = await _getResponseInfo(
+      false,
+      {
+        networkCaptureBodies: true,
+        textEncoder: new TextEncoder(),
+        networkResponseHeaders: [],
+      },
+      undefined,
+      123,
+    );
+
+    expect(res).toEqual({
+      headers: {},
+      size: 123,
+      _meta: {
+        warnings: ['URL_SKIPPED'],
+      },
+    });
+  });
+
+  it('works with text body', async () => {
+    const response = {
+      headers: {
+        has: () => {
+          return false;
+        },
+        get: () => {
+          return undefined;
+        },
+      },
+      clone: () => response,
+      text: () => Promise.resolve('text body'),
+    } as unknown as Response;
+
+    const res = await _getResponseInfo(
+      true,
+      {
+        networkCaptureBodies: true,
+        textEncoder: new TextEncoder(),
+        networkResponseHeaders: [],
+      },
+      response,
+      undefined,
+    );
+
+    expect(res).toEqual({
+      headers: {},
+      size: 9,
+      body: 'text body',
+    });
+  });
+
+  it('works with body that fails', async () => {
+    const response = {
+      headers: {
+        has: () => {
+          return false;
+        },
+        get: () => {
+          return undefined;
+        },
+      },
+      clone: () => response,
+      text: () => Promise.reject('cannot read'),
+    } as unknown as Response;
+
+    const res = await _getResponseInfo(
+      true,
+      {
+        networkCaptureBodies: true,
+        textEncoder: new TextEncoder(),
+        networkResponseHeaders: [],
+      },
+      response,
+      undefined,
+    );
+
+    expect(res).toEqual({
+      _meta: { warnings: ['BODY_PARSE_ERROR'] },
+      headers: {},
+      size: undefined,
+    });
+  });
+
+  it('works with body that times out', async () => {
+    const response = {
+      headers: {
+        has: () => {
+          return false;
+        },
+        get: () => {
+          return undefined;
+        },
+      },
+      clone: () => response,
+      text: () => new Promise(resolve => setTimeout(() => resolve('text body'), 1000)),
+    } as unknown as Response;
+
+    const res = await _getResponseInfo(
+      true,
+      {
+        networkCaptureBodies: true,
+        textEncoder: new TextEncoder(),
+        networkResponseHeaders: [],
+      },
+      response,
+      undefined,
+    );
+
+    expect(res).toEqual({
+      _meta: { warnings: ['BODY_PARSE_ERROR'] },
+      headers: {},
+      size: undefined,
+    });
+  });
+});