@sentry/replay 7.80.0 → 7.80.2-alpha.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 { GLOBAL_OBJ, normalize, fill, getElementIdentifier, browserPerformanceTimeOrigin, logger, uuid4, SENTRY_XHR_DATA_KEY, dropUndefinedKeys, stringMatchesSomePattern, addInstrumentationHandler, 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`
@@ -4410,7 +4410,7 @@ function getDomTarget(handlerData) {
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
     target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
-    message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+    message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
   } catch (e) {
     message = '<unknown>';
   }
@@ -4461,7 +4461,7 @@ function getKeyboardBreadcrumb(event) {
     return null;
   }
 
-  const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+  const message = getElementIdentifier(target, { maxStringLength: 200 }) || '<unknown>';
   const baseBreadcrumb = getBaseDomBreadcrumb(target , message);
 
   return createBreadcrumb({
@@ -5538,6 +5538,11 @@ function isReplayEvent(event) {
   return event.type === 'replay_event';
 }
 
+/** If the event is a feedback event */
+function isFeedbackEvent(event) {
+  return event.type === 'feedback';
+}
+
 /**
  * Returns a listener to be added to `client.on('afterSendErrorEvent, listener)`.
  */
@@ -5642,6 +5647,37 @@ function isRrwebError(event, hint) {
   return false;
 }
 
+/**
+ * Add a feedback breadcrumb event to replay.
+ */
+function addFeedbackBreadcrumb(replay, event) {
+  replay.triggerUserActivity();
+  replay.addUpdate(() => {
+    if (!event.timestamp) {
+      // Ignore events that don't have timestamps (this shouldn't happen, more of a typing issue)
+      // Return true here so that we don't flush
+      return true;
+    }
+
+    void replay.throttledAddEvent({
+      type: EventType.Custom,
+      timestamp: event.timestamp * 1000,
+      data: {
+        timestamp: event.timestamp,
+        tag: 'breadcrumb',
+        payload: {
+          category: 'sentry.feedback',
+          data: {
+            feedbackId: event.event_id,
+          },
+        },
+      },
+    });
+
+    return false;
+  });
+}
+
 /**
  * Determine if event should be sampled (only applies in buffer mode).
  * When an event is captured by `hanldleGlobalEvent`, when in buffer mode
@@ -5689,8 +5725,8 @@ function handleGlobalEventListener(
         return event;
       }
 
-      // We only want to handle errors & transactions, nothing else
-      if (!isErrorEvent(event) && !isTransactionEvent(event)) {
+      // We only want to handle errors, transactions, and feedbacks, nothing else
+      if (!isErrorEvent(event) && !isTransactionEvent(event) && !isFeedbackEvent(event)) {
         return event;
       }
 
@@ -5700,6 +5736,12 @@ function handleGlobalEventListener(
         return event;
       }
 
+      if (isFeedbackEvent(event)) {
+        // Add a replay breadcrumb for this piece of feedback
+        addFeedbackBreadcrumb(replay, event);
+        return event;
+      }
+
       // Unless `captureExceptions` is enabled, we want to ignore errors coming from rrweb
       // As there can be a bunch of stuff going wrong in internals there, that we don't want to bubble up to users
       if (isRrwebError(event, hint) && !replay.getOptions()._experiments.captureExceptions) {
@@ -5976,16 +6018,20 @@ function parseContentLengthHeader(header) {
 
 /** Get the string representation of a body. */
 function getBodyString(body) {
-  if (typeof body === 'string') {
-    return body;
-  }
+  try {
+    if (typeof body === 'string') {
+      return body;
+    }
 
-  if (body instanceof URLSearchParams) {
-    return body.toString();
-  }
+    if (body instanceof URLSearchParams) {
+      return body.toString();
+    }
 
-  if (body instanceof FormData) {
-    return _serializeFormData(body);
+    if (body instanceof FormData) {
+      return _serializeFormData(body);
+    }
+  } catch (e2) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('[Replay] Failed to serialize body', body);
   }
 
   return undefined;
@@ -6097,7 +6143,6 @@ function normalizeNetworkBody(body)
   }
 
   const exceedsSizeLimit = body.length > NETWORK_BODY_MAX_SIZE;
-
   const isProbablyJson = _strIsProbablyJson(body);
 
   if (exceedsSizeLimit) {
@@ -6122,7 +6167,7 @@ function normalizeNetworkBody(body)
       return {
         body: jsonBody,
       };
-    } catch (e3) {
+    } catch (e4) {
       // fall back to just send the body as string
     }
   }
@@ -6204,7 +6249,7 @@ function enrichFetchBreadcrumb(
 ) {
   const { input, response } = hint;
 
-  const body = _getFetchRequestArgBody(input);
+  const body = input ? _getFetchRequestArgBody(input) : undefined;
   const reqSize = getBodySize(body, options.textEncoder);
 
   const resSize = response ? parseContentLengthHeader(response.headers.get('content-length')) : undefined;
@@ -6224,7 +6269,8 @@ async function _prepareFetchData(
 
 ,
 ) {
-  const { startTimestamp, endTimestamp } = hint;
+  const now = Date.now();
+  const { startTimestamp = now, endTimestamp = now } = hint;
 
   const {
     url,
@@ -6258,7 +6304,7 @@ function _getRequestInfo(
   input,
   requestBodySize,
 ) {
-  const headers = getRequestHeaders(input, networkRequestHeaders);
+  const headers = input ? getRequestHeaders(input, networkRequestHeaders) : {};
 
   if (!networkCaptureBodies) {
     return buildNetworkRequestOrResponse(headers, requestBodySize, undefined);
@@ -6286,9 +6332,9 @@ async function _getResponseInfo(
     return buildSkippedNetworkRequestOrResponse(responseBodySize);
   }
 
-  const headers = getAllHeaders(response.headers, networkResponseHeaders);
+  const headers = response ? getAllHeaders(response.headers, networkResponseHeaders) : {};
 
-  if (!networkCaptureBodies && responseBodySize !== undefined) {
+  if (!response || (!networkCaptureBodies && responseBodySize !== undefined)) {
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
 
@@ -6312,7 +6358,8 @@ async function _getResponseInfo(
     }
 
     return buildNetworkRequestOrResponse(headers, size, undefined);
-  } catch (e) {
+  } catch (error) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('[Replay] Failed to serialize response body', error);
     // fallback
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
@@ -6321,7 +6368,7 @@ async function _getResponseInfo(
 async function _parseFetchBody(response) {
   try {
     return await response.text();
-  } catch (e2) {
+  } catch (e) {
     return undefined;
   }
 }
@@ -6417,6 +6464,10 @@ function enrichXhrBreadcrumb(
 ) {
   const { xhr, input } = hint;
 
+  if (!xhr) {
+    return;
+  }
+
   const reqSize = getBodySize(input, options.textEncoder);
   const resSize = xhr.getResponseHeader('content-length')
     ? parseContentLengthHeader(xhr.getResponseHeader('content-length'))
@@ -6435,7 +6486,8 @@ function _prepareXhrData(
   hint,
   options,
 ) {
-  const { startTimestamp, endTimestamp, input, xhr } = hint;
+  const now = Date.now();
+  const { startTimestamp = now, endTimestamp = now, input, xhr } = hint;
 
   const {
     url,
@@ -6449,7 +6501,7 @@ function _prepareXhrData(
     return null;
   }
 
-  if (!urlMatches(url, options.networkDetailAllowUrls) || urlMatches(url, options.networkDetailDenyUrls)) {
+  if (!xhr || !urlMatches(url, options.networkDetailAllowUrls) || urlMatches(url, options.networkDetailDenyUrls)) {
     const request = buildSkippedNetworkRequestOrResponse(requestBodySize);
     const response = buildSkippedNetworkRequestOrResponse(responseBodySize);
     return {
@@ -6469,16 +6521,11 @@ function _prepareXhrData(
     : {};
   const networkResponseHeaders = getAllowedHeaders(getResponseHeaders(xhr), options.networkResponseHeaders);
 
-  const request = buildNetworkRequestOrResponse(
-    networkRequestHeaders,
-    requestBodySize,
-    options.networkCaptureBodies ? getBodyString(input) : undefined,
-  );
-  const response = buildNetworkRequestOrResponse(
-    networkResponseHeaders,
-    responseBodySize,
-    options.networkCaptureBodies ? hint.xhr.responseText : undefined,
-  );
+  const requestBody = options.networkCaptureBodies ? getBodyString(input) : undefined;
+  const responseBody = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : undefined;
+
+  const request = buildNetworkRequestOrResponse(networkRequestHeaders, requestBodySize, requestBody);
+  const response = buildNetworkRequestOrResponse(networkResponseHeaders, responseBodySize, responseBody);
 
   return {
     startTimestamp,
@@ -6505,6 +6552,20 @@ function getResponseHeaders(xhr) {
   }, {});
 }
 
+function _getXhrResponseBody(xhr) {
+  try {
+    return xhr.responseText;
+  } catch (e) {} // eslint-disable-line no-empty
+
+  // Try to manually parse the response body, if responseText fails
+  try {
+    const response = xhr.response;
+    return getBodyString(response);
+  } catch (e2) {} // eslint-disable-line no-empty
+
+  return undefined;
+}
+
 /**
  * This method does two things:
  * - It enriches the regular XHR/fetch breadcrumbs with request/response size data