@highlight-run/rrweb 2.0.16 → 2.1.0

package/es/rrweb/all.css

@@ -1 +1 @@
-.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}
+.replayer-wrapper{position:relative}.replayer-mouse{position:absolute;width:20px;height:20px;transition:left .05s linear,top .05s linear;background-size:contain;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgNSAxOCAxOCIgaGVpZ2h0PSIzMDAiIHdpZHRoPSIzMDAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik04LjIgMjAuOXYtMTZsMTEuNiAxMS42SDEzbC0uNC4xeiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNy4zIDIxLjZsLTMuNiAxLjVMOSAxMmwzLjctMS41eiIvPjxwYXRoIGQ9Ik0xMS4wMyAxNC4yOTNsMS44NDUtLjc3NCAzLjA5NiA3LjM3Ni0xLjg0NC43NzV6Ii8+PHBhdGggZD0iTTkuMiA3LjN2MTEuMmwzLTIuOS40LS4xaDQuOHoiLz48L3N2Zz4=");border-color:transparent}.replayer-mouse:after{background:transparent}.replayer-mouse.active:after{animation:click .2s ease-in-out 1}.replayer-mouse.touch-device{background-image:none;width:70px;height:70px;border-radius:100%;margin-left:-37px;margin-top:-37px;border:4px solid rgba(73,80,246,0);transition:left 0s linear,top 0s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device.touch-active{border-color:#4950f6;transition:left .25s linear,top .25s linear,border-color .2s ease-in-out}.replayer-mouse.touch-device:after{opacity:0}.replayer-mouse.touch-device.active:after{animation:touch-click .2s ease-in-out 1}.replayer-mouse-tail{position:absolute;pointer-events:none}@keyframes click{0%{opacity:.3;width:20px;height:20px;background:transparent}75%{width:24px;height:24px;opacity:.8;background:#dc2626}to{background:transparent}}@keyframes touch-click{0%{opacity:0;width:20px;height:20px}50%{opacity:.5;width:10px;height:10px}}.rr-player{position:relative;background:#fff;float:left;border-radius:5px;box-shadow:0 24px 48px rgba(17,16,62,.12)}.rr-player__frame{overflow:hidden}

package/es/rrweb/ext/mitt/dist/mitt.mjs.js

@@ -0,0 +1,3 @@
+function mitt(n){return {all:n=n||new Map,on:function(t,e){var i=n.get(t);i?i.push(e):n.set(t,[e]);},off:function(t,e){var i=n.get(t);i&&(e?i.splice(i.indexOf(e)>>>0,1):n.set(t,[]));},emit:function(t,e){var i=n.get(t);i&&i.slice().map(function(n){n(e);}),(i=n.get("*"))&&i.slice().map(function(n){n(t,e);});}}}
+
+export { mitt as default };

package/es/rrweb/packages/rrdom/es/rrdom.js

@@ -102,7 +102,7 @@ const hyphenate = (str) => {
 };
 
 class BaseRRNode {
-    constructor(...args) {
+    constructor(..._args) {
         this.childNodes = [];
         this.parentElement = null;
         this.parentNode = null;
@@ -138,7 +138,7 @@ class BaseRRNode {
     insertBefore(_newChild, _refChild) {
         throw new Error(`RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`);
     }
-    removeChild(node) {
+    removeChild(_node) {
         throw new Error(`RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`);
     }
     toString() {
@@ -517,6 +517,44 @@ const NAMESPACES = {
     'xlink:href': 'http://www.w3.org/1999/xlink',
     xmlns: 'http://www.w3.org/2000/xmlns/',
 };
+const SVGTagMap = {
+    altglyph: 'altGlyph',
+    altglyphdef: 'altGlyphDef',
+    altglyphitem: 'altGlyphItem',
+    animatecolor: 'animateColor',
+    animatemotion: 'animateMotion',
+    animatetransform: 'animateTransform',
+    clippath: 'clipPath',
+    feblend: 'feBlend',
+    fecolormatrix: 'feColorMatrix',
+    fecomponenttransfer: 'feComponentTransfer',
+    fecomposite: 'feComposite',
+    feconvolvematrix: 'feConvolveMatrix',
+    fediffuselighting: 'feDiffuseLighting',
+    fedisplacementmap: 'feDisplacementMap',
+    fedistantlight: 'feDistantLight',
+    fedropshadow: 'feDropShadow',
+    feflood: 'feFlood',
+    fefunca: 'feFuncA',
+    fefuncb: 'feFuncB',
+    fefuncg: 'feFuncG',
+    fefuncr: 'feFuncR',
+    fegaussianblur: 'feGaussianBlur',
+    feimage: 'feImage',
+    femerge: 'feMerge',
+    femergenode: 'feMergeNode',
+    femorphology: 'feMorphology',
+    feoffset: 'feOffset',
+    fepointlight: 'fePointLight',
+    fespecularlighting: 'feSpecularLighting',
+    fespotlight: 'feSpotLight',
+    fetile: 'feTile',
+    feturbulence: 'feTurbulence',
+    foreignobject: 'foreignObject',
+    glyphref: 'glyphRef',
+    lineargradient: 'linearGradient',
+    radialgradient: 'radialGradient',
+};
 function diff(oldTree, newTree, replayer, rrnodeMirror) {
     const oldChildren = oldTree.childNodes;
     const newChildren = newTree.childNodes;
@@ -547,8 +585,8 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
                     const newMediaRRElement = newRRElement;
                     if (newMediaRRElement.paused !== undefined)
                         newMediaRRElement.paused
-                            ? oldMediaElement.pause()
-                            : oldMediaElement.play();
+                            ? void oldMediaElement.pause()
+                            : void oldMediaElement.play();
                     if (newMediaRRElement.muted !== undefined)
                         oldMediaElement.muted = newMediaRRElement.muted;
                     if (newMediaRRElement.volume !== undefined)
@@ -558,7 +596,20 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
                     break;
                 }
                 case 'CANVAS':
-                    newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
+                    {
+                        const rrCanvasElement = newTree;
+                        if (rrCanvasElement.rr_dataURL !== null) {
+                            const image = document.createElement('img');
+                            image.onload = () => {
+                                const ctx = oldElement.getContext('2d');
+                                if (ctx) {
+                                    ctx.drawImage(image, 0, 0, image.width, image.height);
+                                }
+                            };
+                            image.src = rrCanvasElement.rr_dataURL;
+                        }
+                        rrCanvasElement.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
+                    }
                     break;
                 case 'STYLE':
                     applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -633,10 +684,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
         const oldEndId = replayer.mirror.getId(oldEndNode);
         const newStartId = rrnodeMirror.getId(newStartNode);
         const newEndId = rrnodeMirror.getId(newEndNode);
-        console.log('oldStartId', oldStartId);
-        console.log('oldEndId', oldEndId);
-        console.log('newStartId', newStartId);
-        console.log('newEndId', newEndId);
         if (oldStartNode === undefined) {
             oldStartNode = oldChildren[++oldStartIndex];
         }
@@ -740,9 +787,10 @@ function createOrGetNode(rrNode, domMirror, rrnodeMirror) {
             node = document.implementation.createDocumentType(rrNode.name, rrNode.publicId, rrNode.systemId);
             break;
         case NodeType$1.Element: {
-            rrNode.tagName.toLowerCase();
+            let tagName = rrNode.tagName.toLowerCase();
+            tagName = SVGTagMap[tagName] || tagName;
             if (sn && 'isSVG' in sn && (sn === null || sn === void 0 ? void 0 : sn.isSVG)) {
-                node = document.createElementNS(NAMESPACES['svg'], rrNode.tagName.toLowerCase());
+                node = document.createElementNS(NAMESPACES['svg'], tagName);
             }
             else
                 node = document.createElement(rrNode.tagName);
@@ -908,6 +956,7 @@ class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {
 class RRCanvasElement extends RRElement {
     constructor() {
         super(...arguments);
+        this.rr_dataURL = null;
         this.canvasMutations = [];
     }
     getContext() {
@@ -947,11 +996,12 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
                 rrNode.compatMode = node.compatMode;
             }
             break;
-        case NodeType.DOCUMENT_TYPE_NODE:
+        case NodeType.DOCUMENT_TYPE_NODE: {
             const documentType = node;
             rrNode = rrdom.createDocumentType(documentType.name, documentType.publicId, documentType.systemId);
             break;
-        case NodeType.ELEMENT_NODE:
+        }
+        case NodeType.ELEMENT_NODE: {
             const elementNode = node;
             const tagName = getValidTagName(elementNode);
             rrNode = rrdom.createElement(tagName);
@@ -962,6 +1012,7 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
             elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
             elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
             break;
+        }
         case NodeType.TEXT_NODE:
             rrNode = rrdom.createTextNode(node.textContent || '');
             break;
@@ -1071,7 +1122,7 @@ function getDefaultSN(node, id) {
                 type: node.RRNodeType,
                 childNodes: [],
             };
-        case NodeType$1.DocumentType:
+        case NodeType$1.DocumentType: {
             const doctype = node;
             return {
                 id,
@@ -1080,6 +1131,7 @@ function getDefaultSN(node, id) {
                 publicId: doctype.publicId,
                 systemId: doctype.systemId,
             };
+        }
         case NodeType$1.Element:
             return {
                 id,

package/es/rrweb/packages/rrweb/src/plugins/console/record/error-stack-parser.js

@@ -8,17 +8,9 @@ class StackFrame {
     toString() {
         const lineNumber = this.lineNumber || '';
         const columnNumber = this.columnNumber || '';
-        if (this.functionName) {
-            return (this.functionName +
-                ' (' +
-                this.fileName +
-                ':' +
-                lineNumber +
-                ':' +
-                columnNumber +
-                ')');
-        }
-        return this.fileName + ':' + lineNumber + ':' + columnNumber;
+        if (this.functionName)
+            return `${this.functionName} (${this.fileName}:${lineNumber}:${columnNumber})`;
+        return `${this.fileName}:${lineNumber}:${columnNumber}`;
     }
 }
 const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;

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

@@ -27,10 +27,14 @@ const defaultLogOptions = {
     lengthThreshold: 1000,
     logger: 'console',
 };
-function initLogObserver(cb, win, logOptions) {
+function initLogObserver(cb, win, options) {
+    const logOptions = (options
+        ? Object.assign({}, defaultLogOptions, options)
+        : defaultLogOptions);
     const loggerType = logOptions.logger;
     if (!loggerType) {
-        return () => { };
+        return () => {
+        };
     }
     let logger;
     if (typeof loggerType === 'string') {
@@ -44,7 +48,7 @@ function initLogObserver(cb, win, logOptions) {
     if (logOptions.level.includes('error')) {
         if (window) {
             const errorHandler = (event) => {
-                const { message, error } = event;
+                const message = event.message, error = event.error;
                 const trace = ErrorStackParser.parse(error).map((stackFrame) => stackFrame.toString());
                 const payload = [stringify(message, logOptions.stringifyOptions)];
                 cb({
@@ -68,7 +72,8 @@ function initLogObserver(cb, win, logOptions) {
     };
     function replace(_logger, level) {
         if (!_logger[level]) {
-            return () => { };
+            return () => {
+            };
         }
         return patch(_logger, level, (original) => {
             return (...args) => {
@@ -107,9 +112,7 @@ const PLUGIN_NAME = 'rrweb/console@1';
 const getRecordConsolePlugin = (options) => ({
     name: PLUGIN_NAME,
     observer: initLogObserver,
-    options: options
-        ? Object.assign({}, defaultLogOptions, options)
-        : defaultLogOptions,
+    options: options,
 });
 
 export { PLUGIN_NAME, getRecordConsolePlugin };

package/es/rrweb/packages/rrweb/src/plugins/console/record/stringify.js

@@ -22,7 +22,7 @@ function pathToSelector(node) {
             }
         }
         if (domSiblings.length > 1) {
-            name += ':eq(' + domSiblings.indexOf(node) + ')';
+            name += `:eq(${domSiblings.indexOf(node)})`;
         }
         path = name + (path ? '>' + path : '');
         node = parent;
@@ -38,7 +38,8 @@ function isObjTooDeep(obj, limit) {
     }
     const keys = Object.keys(obj);
     for (const key of keys) {
-        if (isObject(obj[key]) && isObjTooDeep(obj[key], limit - 1)) {
+        if (isObject(obj[key]) &&
+            isObjTooDeep(obj[key], limit - 1)) {
             return true;
         }
     }
@@ -72,9 +73,10 @@ function stringify(obj, stringifyOptions) {
         else {
             stack.push(value);
         }
-        if (value === null || value === undefined) {
+        if (value === null)
             return value;
-        }
+        if (value === undefined)
+            return 'undefined';
         if (shouldIgnore(value)) {
             return toString(value);
         }
@@ -83,7 +85,7 @@ function stringify(obj, stringifyOptions) {
             for (const eventKey in value) {
                 const eventValue = value[eventKey];
                 if (Array.isArray(eventValue)) {
-                    eventResult[eventKey] = pathToSelector(eventValue.length ? eventValue[0] : null);
+                    eventResult[eventKey] = pathToSelector((eventValue.length ? eventValue[0] : null));
                 }
                 else {
                     eventResult[eventKey] = eventValue;
@@ -111,7 +113,8 @@ function stringify(obj, stringifyOptions) {
         if (typeof _obj === 'function') {
             return true;
         }
-        if (isObject(_obj) && isObjTooDeep(_obj, options.depthOfLimit)) {
+        if (isObject(_obj) &&
+            isObjTooDeep(_obj, options.depthOfLimit)) {
             return true;
         }
         return false;

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

@@ -1,4 +1,4 @@
-import { obfuscateText, isShadowRoot, maskInputValue, transformAttribute, needMaskingText, IGNORED_NODE, serializeNodeWithId } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { obfuscateText, isShadowRoot, isNativeShadowDom, maskInputValue, transformAttribute, needMaskingText, IGNORED_NODE, serializeNodeWithId } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
 import { isIgnored, isBlocked, isSerialized, isAncestorRemoved, isSerializedIframe, isSerializedStylesheet, hasShadowRoot } from '../utils.js';
 
 function isNodeInLinkedList(n) {
@@ -140,6 +140,7 @@ class MutationBuffer {
                     maskTextClass: this.maskTextClass,
                     maskTextSelector: this.maskTextSelector,
                     skipChild: true,
+                    newlyAddedElement: true,
                     inlineStylesheet: this.inlineStylesheet,
                     maskInputOptions: this.maskInputOptions,
                     maskTextFn: this.maskTextFn,
@@ -166,7 +167,6 @@ class MutationBuffer {
                     onStylesheetLoad: (link, childSn) => {
                         this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
                     },
-                    newlyAddedElement: true,
                 });
                 if (sn) {
                     adds.push({
@@ -392,7 +392,9 @@ class MutationBuffer {
                             this.removes.push({
                                 parentId,
                                 id: nodeId,
-                                isShadow: isShadowRoot(m.target) ? true : undefined,
+                                isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target)
+                                    ? true
+                                    : undefined,
                             });
                         }
                         this.mapRemoves.push(n);

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

@@ -50,7 +50,8 @@ function initMutationObserver(options, rootEl) {
 }
 function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
     if (sampling.mousemove === false) {
-        return () => { };
+        return () => {
+        };
     }
     const threshold = typeof sampling.mousemove === 'number' ? sampling.mousemove : 50;
     const callbackThreshold = typeof sampling.mousemoveCallback === 'number'
@@ -100,7 +101,8 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
 }
 function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockClass, sampling, }) {
     if (sampling.mouseInteraction === false) {
-        return () => { };
+        return () => {
+        };
     }
     const disableMap = sampling.mouseInteraction === true ||
         sampling.mouseInteraction === undefined
@@ -304,7 +306,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                 adds: [{ rule, index }],
             });
         }
-        return insertRule.apply(this, arguments);
+        return insertRule.apply(this, [rule, index]);
     };
     const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
     win.CSSStyleSheet.prototype.deleteRule = function (index) {
@@ -315,7 +317,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                 removes: [{ index }],
             });
         }
-        return deleteRule.apply(this, arguments);
+        return deleteRule.apply(this, [index]);
     };
     const supportedNestedCSSRuleTypes = {};
     if (isCSSGroupingRuleSupported) {
@@ -354,17 +356,19 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                     ],
                 });
             }
-            return unmodifiedFunctions[typeKey].insertRule.apply(this, arguments);
+            return unmodifiedFunctions[typeKey].insertRule.apply(this, [rule, index]);
         };
         type.prototype.deleteRule = function (index) {
             const id = mirror.getId(this.parentStyleSheet.ownerNode);
             if (id !== -1) {
                 styleSheetRuleCb({
                     id,
-                    removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+                    removes: [
+                        { index: [...getNestedCSSRulePositions(this), index] },
+                    ],
                 });
             }
-            return unmodifiedFunctions[typeKey].deleteRule.apply(this, arguments);
+            return unmodifiedFunctions[typeKey].deleteRule.apply(this, [index]);
         };
     });
     return () => {
@@ -392,7 +396,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
                 index: getNestedCSSRulePositions(this.parentRule),
             });
         }
-        return setProperty.apply(this, arguments);
+        return setProperty.apply(this, [property, value, priority]);
     };
     const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
     win.CSSStyleDeclaration.prototype.removeProperty = function (property) {
@@ -407,7 +411,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
                 index: getNestedCSSRulePositions(this.parentRule),
             });
         }
-        return removeProperty.apply(this, arguments);
+        return removeProperty.apply(this, [property]);
     };
     return () => {
         win.CSSStyleDeclaration.prototype.setProperty = setProperty;
@@ -442,7 +446,8 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror,
 function initFontObserver({ fontCb, doc }) {
     const win = doc.defaultView;
     if (!win) {
-        return () => { };
+        return () => {
+        };
     }
     const handlers = [];
     const fontMap = new WeakMap();
@@ -455,8 +460,7 @@ function initFontObserver({ fontCb, doc }) {
             descriptors,
             fontSource: typeof source === 'string'
                 ? source
-                :
-                    JSON.stringify(Array.from(new Uint8Array(source))),
+                : JSON.stringify(Array.from(new Uint8Array(source))),
         });
         return fontFace;
     };
@@ -552,7 +556,8 @@ function mergeHooks(o, hooks) {
 function initObservers(o, hooks = {}) {
     const currentWindow = o.doc.defaultView;
     if (!currentWindow) {
-        return () => { };
+        return () => {
+        };
     }
     mergeHooks(o, hooks);
     const mutationObserver = initMutationObserver(o, o.doc);
@@ -566,7 +571,10 @@ function initObservers(o, hooks = {}) {
     const styleDeclarationObserver = initStyleDeclarationObserver(o, {
         win: currentWindow,
     });
-    const fontObserver = o.collectFonts ? initFontObserver(o) : () => { };
+    const fontObserver = o.collectFonts
+        ? initFontObserver(o)
+        : () => {
+        };
     const pluginHandlers = [];
     for (const plugin of o.plugins) {
         pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));

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

@@ -11,7 +11,7 @@ class CanvasManager {
         this.rafStamps = { latestId: 0, invokeId: null };
         this.frozen = false;
         this.locked = false;
-        this.processMutation = function (target, mutation) {
+        this.processMutation = (target, mutation) => {
             const newFrame = this.rafStamps.invokeId &&
                 this.rafStamps.latestId !== this.rafStamps.invokeId;
             if (newFrame || !this.rafStamps.invokeId)
@@ -107,6 +107,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,

package/es/rrweb/packages/rrweb/src/record/shadow-dom-manager.js

@@ -1,5 +1,6 @@
 import { initMutationObserver, initScrollObserver } from './observer.js';
 import { patch } from '../utils.js';
+import { isNativeShadowDom } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
 
 class ShadowDomManager {
     constructor(options) {
@@ -10,8 +11,8 @@ class ShadowDomManager {
         this.mirror = options.mirror;
         const manager = this;
         this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
-            return function () {
-                const shadowRoot = original.apply(this, arguments);
+            return function (option) {
+                const shadowRoot = original.call(this, option);
                 if (this.shadowRoot)
                     manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
                 return shadowRoot;
@@ -19,6 +20,8 @@ class ShadowDomManager {
         }));
     }
     addShadowRoot(shadowRoot, doc) {
+        if (!isNativeShadowDom(shadowRoot))
+            return;
         initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
         initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
     }
@@ -26,8 +29,8 @@ class ShadowDomManager {
         if (iframeElement.contentWindow) {
             const manager = this;
             this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
-                return function () {
-                    const shadowRoot = original.apply(this, arguments);
+                return function (option) {
+                    const shadowRoot = original.call(this, option);
                     if (this.shadowRoot)
                         manager.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
                     return shadowRoot;

package/es/rrweb/packages/rrweb/src/replay/canvas/2d.js

@@ -6,13 +6,14 @@ function canvasMutation({ event, mutation, target, imageMap, errorHandler, }) {
         try {
             const ctx = target.getContext('2d');
             if (mutation.setter) {
-                ctx[mutation.property] = mutation.args[0];
+                ctx[mutation.property] =
+                    mutation.args[0];
                 return;
             }
             const original = ctx[mutation.property];
             if (mutation.property === 'drawImage' &&
                 typeof mutation.args[0] === 'string') {
-                const image = imageMap.get(event);
+                imageMap.get(event);
                 original.apply(ctx, mutation.args);
             }
             else {

package/es/rrweb/packages/rrweb/src/replay/canvas/webgl.js

@@ -5,8 +5,7 @@ import { deserializeArg, variableListFor } from './deserialize-args.js';
 function getContext(target, type) {
     try {
         if (type === CanvasContext.WebGL) {
-            return (target.getContext('webgl') ||
-                target.getContext('experimental-webgl'));
+            return (target.getContext('webgl') || target.getContext('experimental-webgl'));
         }
         return target.getContext('webgl2');
     }