@sentry/replay 7.89.0 → 7.91.0

package/esm/index.js

@@ -1,4 +1,4 @@
-import { addBreadcrumb, getClient, isSentryRequestUrl, getCurrentScope, addEventProcessor, prepareEvent, setContext, captureException } from '@sentry/core';
+import { addBreadcrumb, getClient, isSentryRequestUrl, getCurrentScope, addEventProcessor, prepareEvent, getIsolationScope, 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
@@ -4345,6 +4377,7 @@ const ATTRIBUTES_TO_RECORD = new Set([
   'data-testid',
   'disabled',
   'aria-disabled',
+  'data-sentry-component',
 ]);
 
 /**
@@ -5028,7 +5061,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 */
@@ -5464,7 +5499,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;
 }
@@ -5661,7 +5698,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();
   });
 }
 
@@ -5705,8 +5744,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',
@@ -5743,7 +5783,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: {
@@ -5821,7 +5863,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);
@@ -6875,7 +6919,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)) {
@@ -6884,7 +6930,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');
@@ -7067,7 +7115,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;
         }
@@ -7273,6 +7323,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();
       }
 
@@ -7408,6 +7461,7 @@ async function prepareReplayEvent({
     eventHint,
     scope,
     client,
+    getIsolationScope(),
   )) ;
 
   // If e.g. a global event processor returned null
@@ -7955,15 +8009,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: {
-            type: canvas.type || 'image/webp',
-            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);
@@ -8403,7 +8454,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;
     }
 
@@ -8542,6 +8595,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();
   }
 
@@ -8590,7 +8645,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: {
@@ -8731,7 +8788,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();
 
@@ -8850,7 +8909,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;
     }