@sentry/replay 7.81.1 → 7.82.0

package/esm/index.js

@@ -1,5 +1,5 @@
-import { getCurrentHub, isSentryRequestUrl, addGlobalEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
-import { GLOBAL_OBJ, normalize, fill, htmlTreeAsString, browserPerformanceTimeOrigin, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, updateRateLimits, isRateLimited, isBrowser } from '@sentry/utils';
+import { getCurrentHub, getClient, isSentryRequestUrl, addGlobalEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
+import { GLOBAL_OBJ, normalize, fill, htmlTreeAsString, browserPerformanceTimeOrigin, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addFetchInstrumentationHandler, addXhrInstrumentationHandler, addClickKeypressInstrumentationHandler, addHistoryInstrumentationHandler, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, updateRateLimits, isRateLimited, isBrowser } from '@sentry/utils';
 import { addPerformanceInstrumentationHandler, addLcpInstrumentationHandler } from '@sentry-internal/tracing';
 
 // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
@@ -4339,12 +4339,13 @@ const handleDomListener = (
     }
 
     const isClick = handlerData.name === 'click';
-    const event = isClick && (handlerData.event );
+    const event = isClick ? (handlerData.event ) : undefined;
     // Ignore clicks if ctrl/alt/meta/shift keys are held down as they alter behavior of clicks (e.g. open in new tab)
     if (
       isClick &&
       replay.clickDetector &&
       event &&
+      event.target &&
       !event.altKey &&
       !event.metaKey &&
       !event.ctrlKey &&
@@ -5470,7 +5471,7 @@ async function _addEvent(
     (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
     await replay.stop({ reason });
 
-    const client = getCurrentHub().getClient();
+    const client = getClient();
 
     if (client) {
       client.recordDroppedEvent('internal_sdk_error', 'replay');
@@ -5616,7 +5617,7 @@ function handleErrorEvent(replay, event) {
 }
 
 function isBaseTransportSend() {
-  const client = getCurrentHub().getClient();
+  const client = getClient();
   if (!client) {
     return false;
   }
@@ -5822,7 +5823,7 @@ function handleHistory(handlerData) {
 }
 
 /**
- * Returns a listener to be added to `addInstrumentationHandler('history', listener)`.
+ * Returns a listener to be added to `addHistoryInstrumentationHandler(listener)`.
  */
 function handleHistorySpanListener(replay) {
   return (handlerData) => {
@@ -5911,7 +5912,7 @@ function handleFetch(handlerData) {
 }
 
 /**
- * Returns a listener to be added to `addInstrumentationHandler('fetch', listener)`.
+ * Returns a listener to be added to `addFetchInstrumentationHandler(listener)`.
  */
 function handleFetchSpanListener(replay) {
   return (handlerData) => {
@@ -5955,7 +5956,7 @@ function handleXhr(handlerData) {
 }
 
 /**
- * Returns a listener to be added to `addInstrumentationHandler('xhr', listener)`.
+ * Returns a listener to be added to `addXhrInstrumentationHandler(listener)`.
  */
 function handleXhrSpanListener(replay) {
   return (handlerData) => {
@@ -6022,23 +6023,47 @@ function parseContentLengthHeader(header) {
 function getBodyString(body) {
   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 (e2) {
     (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('[Replay] Failed to serialize body', body);
+    return [undefined, 'BODY_PARSE_ERROR'];
   }
 
   (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.info('[Replay] Skipping network body because of body type', body);
 
-  return undefined;
+  return [undefined];
+}
+
+/** Merge a warning into an existing network request/response. */
+function mergeWarning(
+  info,
+  warning,
+) {
+  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. */
@@ -6171,7 +6196,7 @@ function normalizeNetworkBody(body)
       return {
         body: jsonBody,
       };
-    } catch (e4) {
+    } catch (e3) {
       // fall back to just send the body as string
     }
   }
@@ -6316,10 +6341,17 @@ 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;
 }
 
+/** Exported only for tests. */
 async function _getResponseInfo(
   captureDetails,
   {
@@ -6342,12 +6374,35 @@ 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,
+  {
+    networkCaptureBodies,
+    textEncoder,
+    responseBodySize,
+    captureDetails,
+    headers,
+  }
 
+,
+) {
+  try {
     const size =
       bodyText && bodyText.length && responseBodySize === undefined
         ? getBodySize(bodyText, textEncoder)
@@ -6369,11 +6424,19 @@ async function _getResponseInfo(
   }
 }
 
-async function _parseFetchBody(response) {
+async function _parseFetchResponseBody(response) {
+  const res = _tryCloneResponse(response);
+
+  if (!res) {
+    return [undefined, 'BODY_PARSE_ERROR'];
+  }
+
   try {
-    return await response.text();
-  } catch (e) {
-    return undefined;
+    const text = await _tryGetResponseText(res);
+    return [text];
+  } catch (error) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('[Replay] Failed to get text body from response', error);
+    return [undefined, 'BODY_PARSE_ERROR'];
   }
 }
 
@@ -6436,6 +6499,40 @@ function getHeadersFromOptions(
   return getAllowedHeaders(headers, allowedHeaders);
 }
 
+function _tryCloneResponse(response) {
+  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
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && 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) {
+  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));
+  });
+}
+
+async function _getResponseText(response) {
+  // Force this to be a promise, just to be safe
+  // eslint-disable-next-line no-return-await
+  return await response.text();
+}
+
 /**
  * Capture an XHR breadcrumb to a replay.
  * This adds additional data (where approriate).
@@ -6525,8 +6622,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);
@@ -6537,8 +6634,8 @@ function _prepareXhrData(
     url,
     method,
     statusCode,
-    request,
-    response,
+    request: requestWarning ? mergeWarning(request, requestWarning) : request,
+    response: responseWarning ? mergeWarning(response, responseWarning) : response,
   };
 }
 
@@ -6561,7 +6658,7 @@ function _getXhrResponseBody(xhr) {
   const errors = [];
 
   try {
-    return xhr.responseText;
+    return [xhr.responseText];
   } catch (e) {
     errors.push(e);
   }
@@ -6576,7 +6673,7 @@ function _getXhrResponseBody(xhr) {
 
   (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('[Replay] Failed to get xhr response body', ...errors);
 
-  return undefined;
+  return [undefined];
 }
 
 /**
@@ -6586,7 +6683,7 @@ function _getXhrResponseBody(xhr) {
  *   (enriching it with further data that is _not_ added to the regular breadcrumbs)
  */
 function handleNetworkBreadcrumbs(replay) {
-  const client = getCurrentHub().getClient();
+  const client = getClient();
 
   try {
     const textEncoder = new TextEncoder();
@@ -6613,8 +6710,8 @@ function handleNetworkBreadcrumbs(replay) {
       client.on('beforeAddBreadcrumb', (breadcrumb, hint) => beforeAddNetworkBreadcrumb(options, breadcrumb, hint));
     } else {
       // Fallback behavior
-      addInstrumentationHandler('fetch', handleFetchSpanListener(replay));
-      addInstrumentationHandler('xhr', handleXhrSpanListener(replay));
+      addFetchInstrumentationHandler(handleFetchSpanListener(replay));
+      addXhrInstrumentationHandler(handleXhrSpanListener(replay));
     }
   } catch (e2) {
     // Do nothing
@@ -6784,11 +6881,11 @@ function normalizeConsoleBreadcrumb(
 function addGlobalListeners(replay) {
   // Listeners from core SDK //
   const scope = getCurrentHub().getScope();
-  const client = getCurrentHub().getClient();
+  const client = getClient();
 
   scope.addScopeListener(handleScopeListener(replay));
-  addInstrumentationHandler('dom', handleDomListener(replay));
-  addInstrumentationHandler('history', handleHistorySpanListener(replay));
+  addClickKeypressInstrumentationHandler(handleDomListener(replay));
+  addHistoryInstrumentationHandler(handleHistorySpanListener(replay));
   handleNetworkBreadcrumbs(replay);
 
   // Tag all (non replay) events that get sent to Sentry with the current
@@ -8486,7 +8583,7 @@ class ReplayContainer  {
       // In this case, we want to completely stop the replay - otherwise, we may get inconsistent segments
       void this.stop({ reason: 'sendReplay' });
 
-      const client = getCurrentHub().getClient();
+      const client = getClient();
 
       if (client) {
         client.recordDroppedEvent('send_error', 'replay');
@@ -9051,7 +9148,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
 
 /** Parse Replay-related options from SDK options */
 function loadReplayOptionsFromClient(initialOptions) {
-  const client = getCurrentHub().getClient();
+  const client = getClient();
   const opt = client && (client.getOptions() );
 
   const finalOptions = { sessionSampleRate: 0, errorSampleRate: 0, ...dropUndefinedKeys(initialOptions) };