@highlight-run/rrweb 2.0.6 → 2.0.9

package/es/rrweb/packages/rrdom/es/virtual-dom.js

@@ -535,7 +535,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
             break;
         }
         case NodeType$1.Element: {
-            const oldElement = (oldTree);
+            const oldElement = oldTree;
             const newRRElement = newTree;
             diffProps(oldElement, newRRElement, rrnodeMirror);
             scrollDataToApply = newRRElement.scrollData;
@@ -543,7 +543,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
             switch (newRRElement.tagName) {
                 case 'AUDIO':
                 case 'VIDEO': {
-                    const oldMediaElement = (oldTree);
+                    const oldMediaElement = oldTree;
                     const newMediaRRElement = newRRElement;
                     if (newMediaRRElement.paused !== undefined)
                         newMediaRRElement.paused
@@ -558,7 +558,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
                     break;
                 }
                 case 'CANVAS':
-                    newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, (oldTree)));
+                    newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
                     break;
                 case 'STYLE':
                     applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -585,8 +585,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
     scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
     inputDataToApply && replayer.applyInput(inputDataToApply);
     if (newTree.nodeName === 'IFRAME') {
-        const oldContentDocument = (oldTree)
-            .contentDocument;
+        const oldContentDocument = oldTree.contentDocument;
         const newIFrameElement = newTree;
         if (oldContentDocument) {
             const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
@@ -647,16 +646,26 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
             newEndNode = newChildren[--newEndIndex];
         }
         else if (replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)) {
-            parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
-            diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
-            oldStartNode = oldChildren[++oldStartIndex];
-            newEndNode = newChildren[--newEndIndex];
+            try {
+                parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
+                diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
+                oldStartNode = oldChildren[++oldStartIndex];
+                newEndNode = newChildren[--newEndIndex];
+            }
+            catch (e) {
+                console.error(e, parentNode, oldStartNode, oldEndNode);
+            }
         }
         else if (replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)) {
-            parentNode.insertBefore(oldEndNode, oldStartNode);
-            diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
-            oldEndNode = oldChildren[--oldEndIndex];
-            newStartNode = newChildren[++newStartIndex];
+            try {
+                parentNode.insertBefore(oldEndNode, oldStartNode);
+                diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
+                oldEndNode = oldChildren[--oldEndIndex];
+                newStartNode = newChildren[++newStartIndex];
+            }
+            catch (e) {
+                console.error(e, parentNode, oldEndNode, oldStartNode);
+            }
         }
         else {
             if (!oldIdToIndex) {
@@ -670,21 +679,31 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
             indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
             if (indexInOld) {
                 const nodeToMove = oldChildren[indexInOld];
-                parentNode.insertBefore(nodeToMove, oldStartNode);
-                diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
-                oldChildren[indexInOld] = undefined;
+                try {
+                    parentNode.insertBefore(nodeToMove, oldStartNode);
+                    diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
+                    oldChildren[indexInOld] = undefined;
+                }
+                catch (e) {
+                    console.error(e, parentNode, nodeToMove, oldStartNode);
+                }
             }
             else {
                 const newNode = createOrGetNode(newStartNode, replayer.mirror, rrnodeMirror);
                 if (((_a = replayer.mirror.getMeta(parentNode)) === null || _a === void 0 ? void 0 : _a.type) === NodeType$1.Document &&
                     ((_b = replayer.mirror.getMeta(newNode)) === null || _b === void 0 ? void 0 : _b.type) === NodeType$1.Element &&
-                    (parentNode).documentElement) {
-                    parentNode.removeChild((parentNode).documentElement);
+                    parentNode.documentElement) {
+                    parentNode.removeChild(parentNode.documentElement);
                     oldChildren[oldStartIndex] = undefined;
                     oldStartNode = undefined;
                 }
-                parentNode.insertBefore(newNode, oldStartNode || null);
-                diff(newNode, newStartNode, replayer, rrnodeMirror);
+                try {
+                    parentNode.insertBefore(newNode, oldStartNode || null);
+                    diff(newNode, newStartNode, replayer, rrnodeMirror);
+                }
+                catch (e) {
+                    console.error(e, parentNode, newNode, oldStartNode || null);
+                }
             }
             newStartNode = newChildren[++newStartIndex];
         }
@@ -699,8 +718,13 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
             });
         for (; newStartIndex <= newEndIndex; ++newStartIndex) {
             const newNode = createOrGetNode(newChildren[newStartIndex], replayer.mirror, rrnodeMirror);
-            parentNode.insertBefore(newNode, referenceNode);
-            diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
+            try {
+                parentNode.insertBefore(newNode, referenceNode);
+                diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
+            }
+            catch (e) {
+                console.error(e, parentNode, newNode, referenceNode);
+            }
         }
     }
     else if (newStartIndex > newEndIndex) {
@@ -754,8 +778,7 @@ function getNestedRule(rules, position) {
         return rule;
     }
     else {
-        return getNestedRule((rule).cssRules[position[1]]
-            .cssRules, position.slice(2));
+        return getNestedRule(rule.cssRules[position[1]].cssRules, position.slice(2));
     }
 }
 var StyleRuleType;

package/es/rrweb/packages/rrweb/src/record/index.js

@@ -1,6 +1,6 @@
 import { createMirror, snapshot } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
 import { initObservers, mutationBuffers } from './observer.js';
-import { polyfill, on, getWindowWidth, getWindowHeight, isSerializedIframe, hasShadowRoot } from '../utils.js';
+import { polyfill, on, getWindowWidth, getWindowHeight, isSerializedIframe, isSerializedStylesheet, hasShadowRoot } from '../utils.js';
 import { EventType, IncrementalSource } from '../types.js';
 import { IframeManager } from './iframe-manager.js';
 import { ShadowDomManager } from './shadow-dom-manager.js';
@@ -180,6 +180,9 @@ function record(options = {}) {
                 if (isSerializedIframe(n, mirror)) {
                     iframeManager.addIframe(n);
                 }
+                if (isSerializedStylesheet(n, mirror)) {
+                    stylesheetManager.addStylesheet(n);
+                }
                 if (hasShadowRoot(n)) {
                     shadowDomManager.addShadowRoot(n.shadowRoot, document);
                 }
@@ -189,7 +192,7 @@ function record(options = {}) {
                 shadowDomManager.observeAttachShadow(iframe);
             },
             onStylesheetLoad: (linkEl, childSn) => {
-                this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
+                stylesheetManager.attachStylesheet(linkEl, childSn, mirror);
             },
             keepIframeSrcFn,
         });

package/es/rrweb/packages/rrweb/src/record/mutation.js

@@ -166,6 +166,7 @@ class MutationBuffer {
                     onStylesheetLoad: (link, childSn) => {
                         this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
                     },
+                    newlyAddedElement: true,
                 });
                 if (sn) {
                     adds.push({
@@ -274,7 +275,8 @@ class MutationBuffer {
             switch (m.type) {
                 case 'characterData': {
                     const value = m.target.textContent;
-                    if (!isBlocked(m.target, this.blockClass) && value !== m.oldValue) {
+                    if (!isBlocked(m.target, this.blockClass, false) &&
+                        value !== m.oldValue) {
                         this.texts.push({
                             value: needMaskingText(m.target, this.maskTextClass, this.maskTextSelector) && value
                                 ? this.maskTextFn
@@ -298,7 +300,8 @@ class MutationBuffer {
                             maskInputFn: this.maskInputFn,
                         });
                     }
-                    if (isBlocked(m.target, this.blockClass) || value === m.oldValue) {
+                    if (isBlocked(m.target, this.blockClass, false) ||
+                        value === m.oldValue) {
                         return;
                     }
                     let item = this.attributes.find((a) => a.node === m.target);
@@ -352,13 +355,15 @@ class MutationBuffer {
                     break;
                 }
                 case 'childList': {
+                    if (isBlocked(m.target, this.blockClass, true))
+                        return;
                     m.addedNodes.forEach((n) => this.genAdds(n, m.target));
                     m.removedNodes.forEach((n) => {
                         const nodeId = this.mirror.getId(n);
                         const parentId = isShadowRoot(m.target)
                             ? this.mirror.getId(m.target.host)
                             : this.mirror.getId(m.target);
-                        if (isBlocked(m.target, this.blockClass) ||
+                        if (isBlocked(m.target, this.blockClass, false) ||
                             isIgnored(n, this.mirror) ||
                             !isSerialized(n, this.mirror)) {
                             return;
@@ -387,16 +392,13 @@ class MutationBuffer {
             }
         };
         this.genAdds = (n, target) => {
-            if (target && isBlocked(target, this.blockClass)) {
-                return;
-            }
-            if (this.mirror.getMeta(n)) {
+            if (this.mirror.hasNode(n)) {
                 if (isIgnored(n, this.mirror)) {
                     return;
                 }
                 this.movedSet.add(n);
                 let targetId = null;
-                if (target && this.mirror.getMeta(target)) {
+                if (target && this.mirror.hasNode(target)) {
                     targetId = this.mirror.getId(target);
                 }
                 if (targetId && targetId !== -1) {
@@ -407,7 +409,7 @@ class MutationBuffer {
                 this.addedSet.add(n);
                 this.droppedSet.delete(n);
             }
-            if (!isBlocked(n, this.blockClass))
+            if (!isBlocked(n, this.blockClass, false))
                 n.childNodes.forEach((childN) => this.genAdds(childN));
         };
     }
@@ -467,6 +469,11 @@ function deepDelete(addsSet, n) {
     n.childNodes.forEach((childN) => deepDelete(addsSet, childN));
 }
 function isParentRemoved(removes, n, mirror) {
+    if (removes.length === 0)
+        return false;
+    return _isParentRemoved(removes, n, mirror);
+}
+function _isParentRemoved(removes, n, mirror) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -475,9 +482,14 @@ function isParentRemoved(removes, n, mirror) {
     if (removes.some((r) => r.id === parentId)) {
         return true;
     }
-    return isParentRemoved(removes, parentNode, mirror);
+    return _isParentRemoved(removes, parentNode, mirror);
 }
 function isAncestorInSet(set, n) {
+    if (set.size === 0)
+        return false;
+    return _isAncestorInSet(set, n);
+}
+function _isAncestorInSet(set, n) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -485,7 +497,7 @@ function isAncestorInSet(set, n) {
     if (set.has(parentNode)) {
         return true;
     }
-    return isAncestorInSet(set, parentNode);
+    return _isAncestorInSet(set, parentNode);
 }
 
 export { MutationBuffer as default };

package/es/rrweb/packages/rrweb/src/record/observer.js

@@ -110,7 +110,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
     const getHandler = (eventKey) => {
         return (event) => {
             const target = getEventTarget(event);
-            if (isBlocked(target, blockClass) ||
+            if (isBlocked(target, blockClass, true) ||
                 isCanvasNode(target)) {
                 return;
             }
@@ -144,7 +144,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
 function initScrollObserver({ scrollCb, doc, mirror, blockClass, sampling, }) {
     const updatePosition = throttle((evt) => {
         const target = getEventTarget(evt);
-        if (!target || isBlocked(target, blockClass)) {
+        if (!target || isBlocked(target, blockClass, true)) {
             return;
         }
         const id = mirror.getId(target);
@@ -200,7 +200,7 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, ignoreClass, mask
         if (!target ||
             !target.tagName ||
             INPUT_TAGS.indexOf(target.tagName) < 0 ||
-            isBlocked(target, blockClass)) {
+            isBlocked(target, blockClass, true)) {
             return;
         }
         const type = target.type;
@@ -335,8 +335,8 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
     const unmodifiedFunctions = {};
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
         unmodifiedFunctions[typeKey] = {
-            insertRule: (type).prototype.insertRule,
-            deleteRule: (type).prototype.deleteRule,
+            insertRule: type.prototype.insertRule,
+            deleteRule: type.prototype.deleteRule,
         };
         type.prototype.insertRule = function (rule, index) {
             const id = mirror.getId(this.parentStyleSheet.ownerNode);
@@ -417,7 +417,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
 function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror, sampling, }) {
     const handler = (type) => throttle((event) => {
         const target = getEventTarget(event);
-        if (!target || isBlocked(target, blockClass)) {
+        if (!target || isBlocked(target, blockClass, true)) {
             return;
         }
         const { currentTime, volume, muted } = target;

package/es/rrweb/packages/rrweb/src/record/observers/canvas/2d.js

@@ -12,7 +12,7 @@ function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
             }
             const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
                 return function (...args) {
-                    if (!isBlocked(this.canvas, blockClass)) {
+                    if (!isBlocked(this.canvas, blockClass, true)) {
                         setTimeout(() => {
                             const recordArgs = serializeArgs([...args], win, this);
                             cb(this.canvas, {

package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas.js

@@ -5,9 +5,9 @@ function initCanvasContextObserver(win, blockClass) {
     try {
         const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
             return function (contextType, ...args) {
-                if (!isBlocked(this, blockClass)) {
+                if (!isBlocked(this, blockClass, true)) {
                     if (!('__context' in this))
-                        (this).__context = contextType;
+                        this.__context = contextType;
                 }
                 return original.apply(this, [contextType, ...args]);
             };

package/es/rrweb/packages/rrweb/src/record/observers/canvas/webgl.js

@@ -14,8 +14,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, mirror, win) {
                 return function (...args) {
                     const result = original.apply(this, args);
                     saveWebGLVar(result, win, prototype);
-                    if (!isBlocked(this.canvas, blockClass)) {
-                        const id = mirror.getId(this.canvas);
+                    if (!isBlocked(this.canvas, blockClass, true)) {
                         const recordArgs = serializeArgs([...args], win, prototype);
                         const mutation = {
                             type,

package/es/rrweb/packages/rrweb/src/utils.js

@@ -1,4 +1,4 @@
-import { IGNORED_NODE, isShadowRoot } from '../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { classMatchesRegex, IGNORED_NODE, isShadowRoot } from '../../rrweb-snapshot/es/rrweb-snapshot.js';
 
 function on(type, fn, target = document) {
     const options = { capture: true, passive: true };
@@ -131,33 +131,26 @@ const isCanvasNode = (node) => {
     }
     return false;
 };
-function isBlocked(node, blockClass) {
+function isBlocked(node, blockClass, checkAncestors) {
     if (!node) {
         return false;
     }
-    if (node.nodeType === node.ELEMENT_NODE) {
-        let needBlock = false;
-        if (typeof blockClass === 'string') {
-            if (node.closest !== undefined) {
-                return node.closest('.' + blockClass) !== null;
-            }
-            else {
-                needBlock = node.classList.contains(blockClass);
-            }
-        }
-        else {
-            node.classList.forEach((className) => {
-                if (blockClass.test(className)) {
-                    needBlock = true;
-                }
-            });
-        }
-        return needBlock || isBlocked(node.parentNode, blockClass);
+    const el = node.nodeType === node.ELEMENT_NODE
+        ? node
+        : node.parentElement;
+    if (!el)
+        return false;
+    if (typeof blockClass === 'string') {
+        if (el.classList.contains(blockClass))
+            return true;
+        if (checkAncestors && el.closest('.' + blockClass) !== null)
+            return true;
     }
-    if (node.nodeType === node.TEXT_NODE) {
-        return isBlocked(node.parentNode, blockClass);
+    else {
+        if (classMatchesRegex(el, blockClass, checkAncestors))
+            return true;
     }
-    return isBlocked(node.parentNode, blockClass);
+    return false;
 }
 function isSerialized(n, mirror) {
     return mirror.getId(n) !== -1;