@sentry/replay 7.88.0 → 7.90.0

package/esm/index.js

@@ -1,4 +1,4 @@
-import { getCurrentHub, getClient, isSentryRequestUrl, addEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
+import { addBreadcrumb, getClient, isSentryRequestUrl, getCurrentScope, addEventProcessor, 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, consoleSandbox, isBrowser } from '@sentry/utils';
 import { addPerformanceInstrumentationHandler, addLcpInstrumentationHandler } from '@sentry-internal/tracing';
 
@@ -52,6 +52,36 @@ const MIN_REPLAY_DURATION_LIMIT = 15000;
 /** The max. length of a replay. */
 const MAX_REPLAY_DURATION = 3600000; // 60 minutes in ms;
 
+const CANVAS_QUALITY = {
+  low: {
+    sampling: {
+      canvas: 1,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.25,
+    },
+  },
+  medium: {
+    sampling: {
+      canvas: 2,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.4,
+    },
+  },
+  high: {
+    sampling: {
+      canvas: 4,
+    },
+    dataURLOptions: {
+      type: 'image/webp',
+      quality: 0.5,
+    },
+  },
+};
+
 var NodeType$1;
 (function (NodeType) {
     NodeType[NodeType["Document"] = 0] = "Document";
@@ -3914,7 +3944,9 @@ function addBreadcrumbEvent(replay, breadcrumb) {
   }
 
   replay.addUpdate(() => {
-    void replay.throttledAddEvent({
+    // This should never reject
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    replay.throttledAddEvent({
       type: EventType.Custom,
       // TODO: We were converting from ms to seconds for breadcrumbs, spans,
       // but maybe we should just keep them as milliseconds
@@ -4737,7 +4769,7 @@ function logInfo(message, shouldAddBreadcrumb) {
   logger.info(message);
 
   if (shouldAddBreadcrumb) {
-    addBreadcrumb(message);
+    addLogBreadcrumb(message);
   }
 }
 
@@ -4756,14 +4788,13 @@ function logInfoNextTick(message, shouldAddBreadcrumb) {
     // Wait a tick here to avoid race conditions for some initial logs
     // which may be added before replay is initialized
     setTimeout(() => {
-      addBreadcrumb(message);
+      addLogBreadcrumb(message);
     }, 0);
   }
 }
 
-function addBreadcrumb(message) {
-  const hub = getCurrentHub();
-  hub.addBreadcrumb(
+function addLogBreadcrumb(message) {
+  addBreadcrumb(
     {
       category: 'console',
       data: {
@@ -5029,7 +5060,9 @@ class EventBufferCompressionWorker  {
     this.hasCheckout = false;
 
     // We do not wait on this, as we assume the order of messages is consistent for the worker
-    void this._worker.postMessage('clear');
+    this._worker.postMessage('clear').then(null, e => {
+      DEBUG_BUILD && logger.warn('[Replay] Sending "clear" message to worker failed', e);
+    });
   }
 
   /** @inheritdoc */
@@ -5465,7 +5498,9 @@ function addEventSync(replay, event, isCheckout) {
     return false;
   }
 
-  void _addEvent(replay, event, isCheckout);
+  // This should never reject
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  _addEvent(replay, event, isCheckout);
 
   return true;
 }
@@ -5662,7 +5697,9 @@ function handleErrorEvent(replay, event) {
 
   setTimeout(() => {
     // Capture current event buffer as new replay
-    void replay.sendBufferedReplayOrFlush();
+    // This should never reject
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    replay.sendBufferedReplayOrFlush();
   });
 }
 
@@ -5706,8 +5743,9 @@ function handleHydrationError(replay, event) {
     // Example https://reactjs.org/docs/error-decoder.html?invariant=423
     exceptionValue.match(/reactjs\.org\/docs\/error-decoder\.html\?invariant=(418|419|422|423|425)/) ||
     // Development builds of react-dom
-    // Example Text: content did not match. Server: "A" Client: "B"
-    exceptionValue.match(/(hydration|content does not match|did not match)/i)
+    // Error 1: Hydration failed because the initial UI does not match what was rendered on the server.
+    // Error 2: Text content does not match server-rendered HTML. Warning: Text content did not match.
+    exceptionValue.match(/(does not match server-rendered HTML|Hydration failed because)/i)
   ) {
     const breadcrumb = createBreadcrumb({
       category: 'replay.hydrate-error',
@@ -5744,7 +5782,9 @@ function addFeedbackBreadcrumb(replay, event) {
       return true;
     }
 
-    void replay.throttledAddEvent({
+    // This should never reject
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    replay.throttledAddEvent({
       type: EventType.Custom,
       timestamp: event.timestamp * 1000,
       data: {
@@ -5822,7 +5862,9 @@ function handleGlobalEventListener(
       }
 
       if (isFeedbackEvent(event)) {
-        void replay.flush();
+        // This should never reject
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        replay.flush();
         event.contexts.feedback.replay_id = replay.getSessionId();
         // Add a replay breadcrumb for this piece of feedback
         addFeedbackBreadcrumb(replay, event);
@@ -5943,7 +5985,7 @@ function shouldFilterRequest(replay, url) {
     return false;
   }
 
-  return isSentryRequestUrl(url, getCurrentHub());
+  return isSentryRequestUrl(url, getClient());
 }
 
 /** Add a performance entry breadcrumb */
@@ -6876,7 +6918,9 @@ function beforeAddNetworkBreadcrumb(
       // So any async mutations to it will not be reflected in the final breadcrumb
       enrichXhrBreadcrumb(breadcrumb, hint, options);
 
-      void captureXhrBreadcrumbToReplay(breadcrumb, hint, options);
+      // This call should not reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      captureXhrBreadcrumbToReplay(breadcrumb, hint, options);
     }
 
     if (_isFetchBreadcrumb(breadcrumb) && _isFetchHint(hint)) {
@@ -6885,7 +6929,9 @@ function beforeAddNetworkBreadcrumb(
       // So any async mutations to it will not be reflected in the final breadcrumb
       enrichFetchBreadcrumb(breadcrumb, hint, options);
 
-      void captureFetchBreadcrumbToReplay(breadcrumb, hint, options);
+      // This call should not reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      captureFetchBreadcrumbToReplay(breadcrumb, hint, options);
     }
   } catch (e) {
     DEBUG_BUILD && logger.warn('Error when enriching network breadcrumb');
@@ -7021,7 +7067,7 @@ function normalizeConsoleBreadcrumb(
  */
 function addGlobalListeners(replay) {
   // Listeners from core SDK //
-  const scope = getCurrentHub().getScope();
+  const scope = getCurrentScope();
   const client = getClient();
 
   scope.addScopeListener(handleScopeListener(replay));
@@ -7068,7 +7114,9 @@ function addGlobalListeners(replay) {
     client.on('beforeSendFeedback', (feedbackEvent, options) => {
       const replayId = replay.getSessionId();
       if (options && options.includeReplay && replay.isEnabled() && replayId) {
-        void replay.flush();
+        // This should never reject
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        replay.flush();
         if (feedbackEvent.contexts && feedbackEvent.contexts.feedback) {
           feedbackEvent.contexts.feedback.replay_id = replayId;
         }
@@ -7274,6 +7322,9 @@ function getHandleRecordingEmit(replay) {
         // a previous session ID. In this case, we want to buffer events
         // for a set amount of time before flushing. This can help avoid
         // capturing replays of users that immediately close the window.
+
+        // This should never reject
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         void replay.flush();
       }
 
@@ -7454,9 +7505,8 @@ async function sendReplayRequest({
 
   const { urls, errorIds, traceIds, initialTimestamp } = eventContext;
 
-  const hub = getCurrentHub();
-  const client = hub.getClient();
-  const scope = hub.getScope();
+  const client = getClient();
+  const scope = getCurrentScope();
   const transport = client && client.getTransport();
   const dsn = client && client.getDsn();
 
@@ -7957,12 +8007,12 @@ class ReplayContainer  {
         ...(this.recordingMode === 'buffer' && { checkoutEveryNms: BUFFER_CHECKOUT_TIME }),
         emit: getHandleRecordingEmit(this),
         onMutation: this._onMutationHandler,
-        ...(canvas && {
-          recordCanvas: true,
-          sampling: { canvas: canvas.fps || 4 },
-          dataURLOptions: { quality: canvas.quality || 0.6 },
-          getCanvasManager: canvas.manager,
-        }),
+        ...(canvas &&
+          canvas.manager && {
+            recordCanvas: true,
+            getCanvasManager: canvas.manager,
+            ...(CANVAS_QUALITY[canvas.quality || 'medium'] || CANVAS_QUALITY.medium),
+          }),
       });
     } catch (err) {
       this._handleException(err);
@@ -8315,7 +8365,7 @@ class ReplayContainer  {
    * This is only available if performance is enabled, and if an instrumented router is used.
    */
    getCurrentRoute() {
-    const lastTransaction = this.lastTransaction || getCurrentHub().getScope().getTransaction();
+    const lastTransaction = this.lastTransaction || getCurrentScope().getTransaction();
     if (!lastTransaction || !['route', 'custom'].includes(lastTransaction.metadata.source)) {
       return undefined;
     }
@@ -8402,7 +8452,9 @@ class ReplayContainer  {
         maxReplayDuration: this._options.maxReplayDuration,
       })
     ) {
-      void this._refreshSession(currentSession);
+      // This should never reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this._refreshSession(currentSession);
       return false;
     }
 
@@ -8541,6 +8593,8 @@ class ReplayContainer  {
     // Send replay when the page/tab becomes hidden. There is no reason to send
     // replay if it becomes visible, since no actions we care about were done
     // while it was hidden
+    // This should never reject
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     void this.conditionalFlush();
   }
 
@@ -8589,7 +8643,9 @@ class ReplayContainer  {
    */
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
-      void this.throttledAddEvent({
+      // This should never reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.throttledAddEvent({
         type: EventType.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
@@ -8730,7 +8786,9 @@ class ReplayContainer  {
       // This means we retried 3 times and all of them failed,
       // or we ran into a problem we don't want to retry, like rate limiting.
       // In this case, we want to completely stop the replay - otherwise, we may get inconsistent segments
-      void this.stop({ reason: 'sendReplay' });
+      // This should never reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.stop({ reason: 'sendReplay' });
 
       const client = getClient();
 
@@ -8849,7 +8907,9 @@ class ReplayContainer  {
 
     // Stop replay if over the mutation limit
     if (overMutationLimit) {
-      void this.stop({ reason: 'mutationLimit', forceFlush: this.recordingMode === 'session' });
+      // This should never reject
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.stop({ reason: 'mutationLimit', forceFlush: this.recordingMode === 'session' });
       return false;
     }