@sentry/replay 7.85.0 → 7.87.0

package/cjs/index.js

@@ -2945,6 +2945,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();
@@ -2960,6 +2964,7 @@ function initObservers(o, _hooks = {}) {
         fontObserver();
         selectionObserver();
         customElementObserver();
+        pluginHandlers.forEach((h) => h());
     });
 }
 function hasNestedCSSRule(prop) {
@@ -3444,7 +3449,7 @@ 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
@@ -3510,6 +3515,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);
@@ -3585,6 +3595,14 @@ 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({
@@ -3690,7 +3708,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));
@@ -3699,6 +3717,7 @@ function record(options = {}) {
     try {
         const handlers = [];
         const observe = (doc) => {
+            var _a;
             return callbackWrapper(initObservers)({
                 onMutation,
                 mutationCb: wrappedMutationEmit,
@@ -3782,7 +3801,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) => {
@@ -5641,6 +5670,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.
  */
@@ -6965,6 +7028,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();
@@ -7872,6 +7936,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`
@@ -7880,6 +7945,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);