@sentry/replay 7.86.0 → 7.88.0

package/esm/index.js

@@ -2943,6 +2943,10 @@ function initObservers(o, _hooks = {}) {
         };
     const selectionObserver = initSelectionObserver(o);
     const customElementObserver = initCustomElementObserver(o);
+    const pluginHandlers = [];
+    for (const plugin of o.plugins) {
+        pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));
+    }
     return callbackWrapper(() => {
         mutationBuffers.forEach((b) => b.reset());
         mutationObserver.disconnect();
@@ -2958,6 +2962,7 @@ function initObservers(o, _hooks = {}) {
         fontObserver();
         selectionObserver();
         customElementObserver();
+        pluginHandlers.forEach((h) => h());
     });
 }
 function hasNestedCSSRule(prop) {
@@ -3437,12 +3442,13 @@ function wrapEvent(e) {
     eWithTime.timestamp = nowTimestamp();
     return eWithTime;
 }
+let _wrappedEmit;
 let _takeFullSnapshot;
 const mirror = createMirror();
 function record(options = {}) {
     const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'rr-block', blockSelector = null, unblockSelector = null, ignoreClass = 'rr-ignore', ignoreSelector = null, maskAllText = false, maskTextClass = 'rr-mask', unmaskTextClass = null, maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskAttributeFn, maskInputFn, maskTextFn, packFn, sampling = {}, dataURLOptions = {}, mousemoveWait, recordCanvas = false, recordCrossOriginIframes = false, recordAfter = options.recordAfter === 'DOMContentLoaded'
         ? options.recordAfter
-        : 'load', userTriggeredOnInput = false, collectFonts = false, inlineImages = false, keepIframeSrcFn = () => false, ignoreCSSAttributes = new Set([]), errorHandler, onMutation, getCanvasManager, } = options;
+        : 'load', userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, ignoreCSSAttributes = new Set([]), errorHandler, onMutation, getCanvasManager, } = options;
     registerErrorHandler(errorHandler);
     const inEmittingFrame = recordCrossOriginIframes
         ? window.parent === window
@@ -3508,6 +3514,11 @@ function record(options = {}) {
     let lastFullSnapshotEvent;
     let incrementalSnapshotCount = 0;
     const eventProcessor = (e) => {
+        for (const plugin of plugins || []) {
+            if (plugin.eventProcessor) {
+                e = plugin.eventProcessor(e);
+            }
+        }
         if (packFn &&
             !passEmitsToParent) {
             e = packFn(e);
@@ -3552,6 +3563,7 @@ function record(options = {}) {
             }
         }
     };
+    _wrappedEmit = wrappedEmit;
     const wrappedMutationEmit = (m) => {
         wrappedEmit(wrapEvent({
             type: EventType.IncrementalSnapshot,
@@ -3583,17 +3595,23 @@ function record(options = {}) {
             recordCrossOriginIframes,
             wrappedEmit,
         });
+    for (const plugin of plugins || []) {
+        if (plugin.getMirror)
+            plugin.getMirror({
+                nodeMirror: mirror,
+                crossOriginIframeMirror: iframeManager.crossOriginIframeMirror,
+                crossOriginIframeStyleMirror: iframeManager.crossOriginIframeStyleMirror,
+            });
+    }
     const processedNodeManager = new ProcessedNodeManager();
-    const canvasManager = getCanvasManager
-        ? getCanvasManager({
-            recordCanvas,
-            blockClass,
-            blockSelector,
-            unblockSelector,
-            sampling: sampling['canvas'],
-            dataURLOptions,
-        })
-        : new CanvasManagerNoop();
+    const canvasManager = _getCanvasManager(getCanvasManager, {
+        recordCanvas,
+        blockClass,
+        blockSelector,
+        unblockSelector,
+        sampling: sampling['canvas'],
+        dataURLOptions,
+    });
     const shadowDomManager = typeof __RRWEB_EXCLUDE_SHADOW_DOM__ === 'boolean' &&
         __RRWEB_EXCLUDE_SHADOW_DOM__
         ? new ShadowDomManagerNoop()
@@ -3688,7 +3706,7 @@ function record(options = {}) {
                 node,
                 initialOffset: getWindowScroll(window),
             },
-        }), isCheckout);
+        }));
         mutationBuffers.forEach((buf) => buf.unlock());
         if (document.adoptedStyleSheets && document.adoptedStyleSheets.length > 0)
             stylesheetManager.adoptStyleSheets(document.adoptedStyleSheets, mirror.getId(document));
@@ -3697,6 +3715,7 @@ function record(options = {}) {
     try {
         const handlers = [];
         const observe = (doc) => {
+            var _a;
             return callbackWrapper(initObservers)({
                 onMutation,
                 mutationCb: wrappedMutationEmit,
@@ -3780,7 +3799,17 @@ function record(options = {}) {
                 processedNodeManager,
                 canvasManager,
                 ignoreCSSAttributes,
-                plugins: [],
+                plugins: ((_a = plugins === null || plugins === void 0 ? void 0 : plugins.filter((p) => p.observer)) === null || _a === void 0 ? void 0 : _a.map((p) => ({
+                    observer: p.observer,
+                    options: p.options,
+                    callback: (payload) => wrappedEmit(wrapEvent({
+                        type: EventType.Plugin,
+                        data: {
+                            plugin: p.name,
+                            payload,
+                        },
+                    })),
+                }))) || [],
             }, {});
         };
         iframeManager.addLoadListener((iframeEl) => {
@@ -3834,8 +3863,22 @@ function takeFullSnapshot(isCheckout) {
     }
     _takeFullSnapshot(isCheckout);
 }
+function wrappedEmit(e) {
+    if (!_wrappedEmit) {
+        return;
+    }
+    _wrappedEmit(e);
+}
 record.mirror = mirror;
 record.takeFullSnapshot = takeFullSnapshot;
+function _getCanvasManager(getCanvasManagerFn, options) {
+    return getCanvasManagerFn
+        ? getCanvasManagerFn(Object.assign(Object.assign({}, options), { mirror, win: window, mutationCb: (p) => wrappedEmit(wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
+            })) }))
+        : new CanvasManagerNoop();
+}
 
 const ReplayEventTypeIncrementalSnapshot = 3;
 const ReplayEventTypeCustom = 5;
@@ -5639,6 +5682,40 @@ function isBaseTransportSend() {
   );
 }
 
+/**
+ * Returns a listener to be added to `client.on('afterSendErrorEvent, listener)`.
+ */
+function handleBeforeSendEvent(replay) {
+  return (event) => {
+    if (!replay.isEnabled() || !isErrorEvent(event)) {
+      return;
+    }
+
+    handleHydrationError(replay, event);
+  };
+}
+
+function handleHydrationError(replay, event) {
+  const exceptionValue = event.exception && event.exception.values && event.exception.values[0].value;
+  if (typeof exceptionValue !== 'string') {
+    return;
+  }
+
+  if (
+    // Only matches errors in production builds of react-dom
+    // 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)
+  ) {
+    const breadcrumb = createBreadcrumb({
+      category: 'replay.hydrate-error',
+    });
+    addBreadcrumbEvent(replay, breadcrumb);
+  }
+}
+
 /**
  * Returns true if we think the given event is an error originating inside of rrweb.
  */
@@ -6963,6 +7040,7 @@ function addGlobalListeners(replay) {
 
   // If a custom client has no hooks yet, we continue to use the "old" implementation
   if (hasHooks(client)) {
+    client.on('beforeSendEvent', handleBeforeSendEvent(replay));
     client.on('afterSendEvent', handleAfterSendEvent(replay));
     client.on('createDsc', (dsc) => {
       const replayId = replay.getSessionId();
@@ -7870,6 +7948,7 @@ class ReplayContainer  {
    */
    startRecording() {
     try {
+      const canvas = this._options._experiments.canvas;
       this._stopRecording = record({
         ...this._recordingOptions,
         // When running in error sampling mode, we need to overwrite `checkoutEveryNms`
@@ -7878,6 +7957,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,
+        }),
       });
     } catch (err) {
       this._handleException(err);