@sentry/replay 7.105.0 → 8.0.0-alpha.1

package/README.md

@@ -12,7 +12,7 @@
 
 ## Pre-requisites
 
-`@sentry/replay` requires Node 12+, and browsers newer than IE11.
+`@sentry/replay` requires Node 14+, and browsers newer than IE11.
 
 ## Installation
 

package/cjs/index.js

@@ -5835,6 +5835,112 @@ function handleHydrationError(replay, event) {
   }
 }
 
+/**
+ * Handle breadcrumbs that Sentry captures, and make sure to capture relevant breadcrumbs to Replay as well.
+ */
+function handleBreadcrumbs(replay) {
+  const client = core.getClient();
+
+  if (!client) {
+    return;
+  }
+
+  client.on('beforeAddBreadcrumb', breadcrumb => beforeAddBreadcrumb(replay, breadcrumb));
+}
+
+function beforeAddBreadcrumb(replay, breadcrumb) {
+  if (!replay.isEnabled() || !isBreadcrumbWithCategory(breadcrumb)) {
+    return;
+  }
+
+  const result = normalizeBreadcrumb(breadcrumb);
+  if (result) {
+    addBreadcrumbEvent(replay, result);
+  }
+}
+
+/** Exported only for tests. */
+function normalizeBreadcrumb(breadcrumb) {
+  if (
+    !isBreadcrumbWithCategory(breadcrumb) ||
+    [
+      // fetch & xhr are handled separately,in handleNetworkBreadcrumbs
+      'fetch',
+      'xhr',
+      // These two are breadcrumbs for emitted sentry events, we don't care about them
+      'sentry.event',
+      'sentry.transaction',
+    ].includes(breadcrumb.category) ||
+    // We capture UI breadcrumbs separately
+    breadcrumb.category.startsWith('ui.')
+  ) {
+    return null;
+  }
+
+  if (breadcrumb.category === 'console') {
+    return normalizeConsoleBreadcrumb(breadcrumb);
+  }
+
+  return createBreadcrumb(breadcrumb);
+}
+
+/** exported for tests only */
+function normalizeConsoleBreadcrumb(
+  breadcrumb,
+) {
+  const args = breadcrumb.data && breadcrumb.data.arguments;
+
+  if (!Array.isArray(args) || args.length === 0) {
+    return createBreadcrumb(breadcrumb);
+  }
+
+  let isTruncated = false;
+
+  // Avoid giant args captures
+  const normalizedArgs = args.map(arg => {
+    if (!arg) {
+      return arg;
+    }
+    if (typeof arg === 'string') {
+      if (arg.length > CONSOLE_ARG_MAX_SIZE) {
+        isTruncated = true;
+        return `${arg.slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
+      }
+
+      return arg;
+    }
+    if (typeof arg === 'object') {
+      try {
+        const normalizedArg = utils.normalize(arg, 7);
+        const stringified = JSON.stringify(normalizedArg);
+        if (stringified.length > CONSOLE_ARG_MAX_SIZE) {
+          isTruncated = true;
+          // We use the pretty printed JSON string here as a base
+          return `${JSON.stringify(normalizedArg, null, 2).slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
+        }
+        return normalizedArg;
+      } catch (e) {
+        // fall back to default
+      }
+    }
+
+    return arg;
+  });
+
+  return createBreadcrumb({
+    ...breadcrumb,
+    data: {
+      ...breadcrumb.data,
+      arguments: normalizedArgs,
+      ...(isTruncated ? { _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] } } : {}),
+    },
+  });
+}
+
+function isBreadcrumbWithCategory(breadcrumb) {
+  return !!breadcrumb.category;
+}
+
 /**
  * Returns true if we think the given event is an error originating inside of rrweb.
  */
@@ -5912,12 +6018,7 @@ function shouldSampleForBufferEvent(replay, event) {
 /**
  * Returns a listener to be added to `addEventProcessor(listener)`.
  */
-function handleGlobalEventListener(
-  replay,
-  includeAfterSendEventHandling = false,
-) {
-  const afterSendHandler = includeAfterSendEventHandling ? handleAfterSendEvent(replay) : undefined;
-
+function handleGlobalEventListener(replay) {
   return Object.assign(
     (event, hint) => {
       // Do nothing if replay has been disabled
@@ -5973,13 +6074,6 @@ function handleGlobalEventListener(
         event.tags = { ...event.tags, replayId: replay.getSessionId() };
       }
 
-      // In cases where a custom client is used that does not support the new hooks (yet),
-      // we manually call this hook method here
-      if (afterSendHandler) {
-        // Pretend the error had a 200 response so we always capture it
-        afterSendHandler(event, { statusCode: 200 });
-      }
-
       return event;
     },
     { id: 'Replay' },
@@ -6096,97 +6190,14 @@ function addNetworkBreadcrumb(
   });
 }
 
-/** only exported for tests */
-function handleFetch(handlerData) {
-  const { startTimestamp, endTimestamp, fetchData, response } = handlerData;
-
-  if (!endTimestamp) {
-    return null;
-  }
-
-  // This is only used as a fallback, so we know the body sizes are never set here
-  const { method, url } = fetchData;
-
-  return {
-    type: 'resource.fetch',
-    start: startTimestamp / 1000,
-    end: endTimestamp / 1000,
-    name: url,
-    data: {
-      method,
-      statusCode: response ? (response ).status : undefined,
-    },
-  };
-}
-
-/**
- * Returns a listener to be added to `addFetchInstrumentationHandler(listener)`.
- */
-function handleFetchSpanListener(replay) {
-  return (handlerData) => {
-    if (!replay.isEnabled()) {
-      return;
-    }
-
-    const result = handleFetch(handlerData);
-
-    addNetworkBreadcrumb(replay, result);
-  };
-}
-
-/** only exported for tests */
-function handleXhr(handlerData) {
-  const { startTimestamp, endTimestamp, xhr } = handlerData;
-
-  const sentryXhrData = xhr[utils.SENTRY_XHR_DATA_KEY];
-
-  if (!startTimestamp || !endTimestamp || !sentryXhrData) {
-    return null;
-  }
-
-  // This is only used as a fallback, so we know the body sizes are never set here
-  const { method, url, status_code: statusCode } = sentryXhrData;
-
-  if (url === undefined) {
-    return null;
-  }
-
-  return {
-    type: 'resource.xhr',
-    name: url,
-    start: startTimestamp / 1000,
-    end: endTimestamp / 1000,
-    data: {
-      method,
-      statusCode,
-    },
-  };
-}
-
-/**
- * Returns a listener to be added to `addXhrInstrumentationHandler(listener)`.
- */
-function handleXhrSpanListener(replay) {
-  return (handlerData) => {
-    if (!replay.isEnabled()) {
-      return;
-    }
-
-    const result = handleXhr(handlerData);
-
-    addNetworkBreadcrumb(replay, result);
-  };
-}
-
 /** Get the size of a body. */
-function getBodySize(
-  body,
-  textEncoder,
-) {
+function getBodySize(body) {
   if (!body) {
     return undefined;
   }
 
+  const textEncoder = new TextEncoder();
+
   try {
     if (typeof body === 'string') {
       return textEncoder.encode(body).length;
@@ -6486,12 +6497,11 @@ async function captureFetchBreadcrumbToReplay(
 function enrichFetchBreadcrumb(
   breadcrumb,
   hint,
-  options,
 ) {
   const { input, response } = hint;
 
   const body = input ? _getFetchRequestArgBody(input) : undefined;
-  const reqSize = getBodySize(body, options.textEncoder);
+  const reqSize = getBodySize(body);
 
   const resSize = response ? parseContentLengthHeader(response.headers.get('content-length')) : undefined;
 
@@ -6506,9 +6516,7 @@ function enrichFetchBreadcrumb(
 async function _prepareFetchData(
   breadcrumb,
   hint,
-  options
-
-,
+  options,
 ) {
   const now = Date.now();
   const { startTimestamp = now, endTimestamp = now } = hint;
@@ -6568,11 +6576,8 @@ async function _getResponseInfo(
   captureDetails,
   {
     networkCaptureBodies,
-    textEncoder,
     networkResponseHeaders,
-  }
-
-,
+  },
   response,
   responseBodySize,
 ) {
@@ -6589,7 +6594,7 @@ async function _getResponseInfo(
   const [bodyText, warning] = await _parseFetchResponseBody(response);
   const result = getResponseData(bodyText, {
     networkCaptureBodies,
-    textEncoder,
+
     responseBodySize,
     captureDetails,
     headers,
@@ -6606,7 +6611,6 @@ function getResponseData(
   bodyText,
   {
     networkCaptureBodies,
-    textEncoder,
     responseBodySize,
     captureDetails,
     headers,
@@ -6616,9 +6620,7 @@ function getResponseData(
 ) {
   try {
     const size =
-      bodyText && bodyText.length && responseBodySize === undefined
-        ? getBodySize(bodyText, textEncoder)
-        : responseBodySize;
+      bodyText && bodyText.length && responseBodySize === undefined ? getBodySize(bodyText) : responseBodySize;
 
     if (!captureDetails) {
       return buildSkippedNetworkRequestOrResponse(size);
@@ -6773,7 +6775,6 @@ async function captureXhrBreadcrumbToReplay(
 function enrichXhrBreadcrumb(
   breadcrumb,
   hint,
-  options,
 ) {
   const { xhr, input } = hint;
 
@@ -6781,10 +6782,10 @@ function enrichXhrBreadcrumb(
     return;
   }
 
-  const reqSize = getBodySize(input, options.textEncoder);
+  const reqSize = getBodySize(input);
   const resSize = xhr.getResponseHeader('content-length')
     ? parseContentLengthHeader(xhr.getResponseHeader('content-length'))
-    : _getBodySize(xhr.response, xhr.responseType, options.textEncoder);
+    : _getBodySize(xhr.response, xhr.responseType);
 
   if (reqSize !== undefined) {
     breadcrumb.data.request_body_size = reqSize;
@@ -6931,11 +6932,10 @@ function _parseXhrResponse(
 function _getBodySize(
   body,
   responseType,
-  textEncoder,
 ) {
   try {
     const bodyStr = responseType === 'json' && body && typeof body === 'object' ? JSON.stringify(body) : body;
-    return getBodySize(bodyStr, textEncoder);
+    return getBodySize(bodyStr);
   } catch (e3) {
     return undefined;
   }
@@ -6951,8 +6951,6 @@ function handleNetworkBreadcrumbs(replay) {
   const client = core.getClient();
 
   try {
-    const textEncoder = new TextEncoder();
-
     const {
       networkDetailAllowUrls,
       networkDetailDenyUrls,
@@ -6963,7 +6961,6 @@ function handleNetworkBreadcrumbs(replay) {
 
     const options = {
       replay,
-      textEncoder,
       networkDetailAllowUrls,
       networkDetailDenyUrls,
       networkCaptureBodies,
@@ -6971,12 +6968,8 @@ function handleNetworkBreadcrumbs(replay) {
       networkResponseHeaders,
     };
 
-    if (client && client.on) {
+    if (client) {
       client.on('beforeAddBreadcrumb', (breadcrumb, hint) => beforeAddNetworkBreadcrumb(options, breadcrumb, hint));
-    } else {
-      // Fallback behavior
-      utils.addFetchInstrumentationHandler(handleFetchSpanListener(replay));
-      utils.addXhrInstrumentationHandler(handleXhrSpanListener(replay));
     }
   } catch (e2) {
     // Do nothing
@@ -6998,7 +6991,7 @@ function beforeAddNetworkBreadcrumb(
       // This has to be sync, as we need to ensure the breadcrumb is enriched in the same tick
       // Because the hook runs synchronously, and the breadcrumb is afterwards passed on
       // So any async mutations to it will not be reflected in the final breadcrumb
-      enrichXhrBreadcrumb(breadcrumb, hint, options);
+      enrichXhrBreadcrumb(breadcrumb, hint);
 
       // This call should not reject
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -7009,7 +7002,7 @@ function beforeAddNetworkBreadcrumb(
       // This has to be sync, as we need to ensure the breadcrumb is enriched in the same tick
       // Because the hook runs synchronously, and the breadcrumb is afterwards passed on
       // So any async mutations to it will not be reflected in the final breadcrumb
-      enrichFetchBreadcrumb(breadcrumb, hint, options);
+      enrichFetchBreadcrumb(breadcrumb, hint);
 
       // This call should not reject
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -7036,138 +7029,25 @@ function _isFetchHint(hint) {
   return hint && hint.response;
 }
 
-let _LAST_BREADCRUMB = null;
-
-function isBreadcrumbWithCategory(breadcrumb) {
-  return !!breadcrumb.category;
-}
-
-const handleScopeListener =
-  (replay) =>
-  (scope) => {
-    if (!replay.isEnabled()) {
-      return;
-    }
-
-    const result = handleScope(scope);
-
-    if (!result) {
-      return;
-    }
-
-    addBreadcrumbEvent(replay, result);
-  };
-
-/**
- * An event handler to handle scope changes.
- */
-function handleScope(scope) {
-  // TODO (v8): Remove this guard. This was put in place because we introduced
-  // Scope.getLastBreadcrumb mid-v7 which caused incompatibilities with older SDKs.
-  // For now, we'll just return null if the method doesn't exist but we should eventually
-  // get rid of this guard.
-  const newBreadcrumb = scope.getLastBreadcrumb && scope.getLastBreadcrumb();
-
-  // Listener can be called when breadcrumbs have not changed, so we store the
-  // reference to the last crumb and only return a crumb if it has changed
-  if (_LAST_BREADCRUMB === newBreadcrumb || !newBreadcrumb) {
-    return null;
-  }
-
-  _LAST_BREADCRUMB = newBreadcrumb;
-
-  if (
-    !isBreadcrumbWithCategory(newBreadcrumb) ||
-    ['fetch', 'xhr', 'sentry.event', 'sentry.transaction'].includes(newBreadcrumb.category) ||
-    newBreadcrumb.category.startsWith('ui.')
-  ) {
-    return null;
-  }
-
-  if (newBreadcrumb.category === 'console') {
-    return normalizeConsoleBreadcrumb(newBreadcrumb);
-  }
-
-  return createBreadcrumb(newBreadcrumb);
-}
-
-/** exported for tests only */
-function normalizeConsoleBreadcrumb(
-  breadcrumb,
-) {
-  const args = breadcrumb.data && breadcrumb.data.arguments;
-
-  if (!Array.isArray(args) || args.length === 0) {
-    return createBreadcrumb(breadcrumb);
-  }
-
-  let isTruncated = false;
-
-  // Avoid giant args captures
-  const normalizedArgs = args.map(arg => {
-    if (!arg) {
-      return arg;
-    }
-    if (typeof arg === 'string') {
-      if (arg.length > CONSOLE_ARG_MAX_SIZE) {
-        isTruncated = true;
-        return `${arg.slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
-      }
-
-      return arg;
-    }
-    if (typeof arg === 'object') {
-      try {
-        const normalizedArg = utils.normalize(arg, 7);
-        const stringified = JSON.stringify(normalizedArg);
-        if (stringified.length > CONSOLE_ARG_MAX_SIZE) {
-          isTruncated = true;
-          // We use the pretty printed JSON string here as a base
-          return `${JSON.stringify(normalizedArg, null, 2).slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
-        }
-        return normalizedArg;
-      } catch (e) {
-        // fall back to default
-      }
-    }
-
-    return arg;
-  });
-
-  return createBreadcrumb({
-    ...breadcrumb,
-    data: {
-      ...breadcrumb.data,
-      arguments: normalizedArgs,
-      ...(isTruncated ? { _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] } } : {}),
-    },
-  });
-}
-
 /**
  * Add global listeners that cannot be removed.
  */
 function addGlobalListeners(replay) {
   // Listeners from core SDK //
-  const scope = core.getCurrentScope();
   const client = core.getClient();
 
-  scope.addScopeListener(handleScopeListener(replay));
   utils.addClickKeypressInstrumentationHandler(handleDomListener(replay));
   utils.addHistoryInstrumentationHandler(handleHistorySpanListener(replay));
+  handleBreadcrumbs(replay);
   handleNetworkBreadcrumbs(replay);
 
   // Tag all (non replay) events that get sent to Sentry with the current
   // replay ID so that we can reference them later in the UI
-  const eventProcessor = handleGlobalEventListener(replay, !hasHooks(client));
-  if (client && client.addEventProcessor) {
-    client.addEventProcessor(eventProcessor);
-  } else {
-    core.addEventProcessor(eventProcessor);
-  }
+  const eventProcessor = handleGlobalEventListener(replay);
+  core.addEventProcessor(eventProcessor);
 
   // If a custom client has no hooks yet, we continue to use the "old" implementation
-  if (hasHooks(client)) {
+  if (client) {
     client.on('beforeSendEvent', handleBeforeSendEvent(replay));
     client.on('afterSendEvent', handleAfterSendEvent(replay));
     client.on('createDsc', (dsc) => {
@@ -7205,11 +7085,6 @@ function addGlobalListeners(replay) {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function hasHooks(client) {
-  return !!(client && client.on);
-}
-
 /**
  * Create a "span" for the total amount of memory being used by JS objects
  * (including v8 internal objects).
@@ -7531,9 +7406,7 @@ async function prepareReplayEvent({
 
   const eventHint = { event_id, integrations };
 
-  if (client.emit) {
-    client.emit('preprocessEvent', event, eventHint);
-  }
+  client.emit('preprocessEvent', event, eventHint);
 
   const preparedEvent = (await core.prepareEvent(
     client.getOptions(),
@@ -7555,7 +7428,7 @@ async function prepareReplayEvent({
   preparedEvent.platform = preparedEvent.platform || 'javascript';
 
   // extract the SDK name because `client._prepareEvent` doesn't add it to the event
-  const metadata = client.getSdkMetadata && client.getSdkMetadata();
+  const metadata = client.getSdkMetadata();
   const { name, version } = (metadata && metadata.sdk) || {};
 
   preparedEvent.sdk = {
@@ -9539,12 +9412,9 @@ function _getMergedNetworkHeaders(headers) {
 /**
  * This is a small utility to get a type-safe instance of the Replay integration.
  */
-// eslint-disable-next-line deprecation/deprecation
 function getReplay() {
   const client = core.getClient();
-  return (
-    client && client.getIntegrationByName && client.getIntegrationByName('Replay')
-  );
+  return client && client.getIntegrationByName('Replay');
 }
 
 exports.Replay = Replay;