@highlight-run/rrweb 2.0.20 → 2.1.2

package/lib/plugins/console-record.js

@@ -51,7 +51,8 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
 function patch(source, name, replacement) {
     try {
         if (!(name in source)) {
-            return () => { };
+            return () => {
+            };
         }
         const original = source[name];
         const wrapped = replacement(original);
@@ -70,7 +71,8 @@ function patch(source, name, replacement) {
         };
     }
     catch (_a) {
-        return () => { };
+        return () => {
+        };
     }
 }
 
@@ -84,17 +86,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+/;
@@ -275,7 +269,7 @@ function pathToSelector(node) {
             }
         }
         if (domSiblings.length > 1) {
-            name += ':eq(' + domSiblings.indexOf(node) + ')';
+            name += `:eq(${domSiblings.indexOf(node)})`;
         }
         path = name + (path ? '>' + path : '');
         node = parent;
@@ -291,7 +285,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;
         }
     }
@@ -325,9 +320,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);
         }
@@ -336,7 +332,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;
@@ -364,7 +360,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;
@@ -403,10 +400,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') {
@@ -420,7 +421,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({
@@ -444,7 +445,8 @@ function initLogObserver(cb, win, logOptions) {
     };
     function replace(_logger, level) {
         if (!_logger[level]) {
-            return () => { };
+            return () => {
+            };
         }
         return patch(_logger, level, (original) => {
             return (...args) => {
@@ -483,9 +485,7 @@ const PLUGIN_NAME = 'rrweb/console@1';
 const getRecordConsolePlugin = (options) => ({
     name: PLUGIN_NAME,
     observer: initLogObserver,
-    options: options
-        ? Object.assign({}, defaultLogOptions, options)
-        : defaultLogOptions,
+    options: options,
 });
 
 exports.PLUGIN_NAME = PLUGIN_NAME;

package/lib/record/rrweb-record.js

@@ -17,6 +17,9 @@ function isShadowRoot(n) {
     var host = n === null || n === void 0 ? void 0 : n.host;
     return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
 }
+function isNativeShadowDom(shadowRoot) {
+    return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
+}
 var Mirror = (function () {
     function Mirror() {
         this.idNodeMap = new Map();
@@ -284,7 +287,8 @@ function getHref() {
     return a.href;
 }
 function transformAttribute(doc, tagName, name, value) {
-    if (name === 'src' || (name === 'href' && value)) {
+    if (name === 'src' ||
+        (name === 'href' && value && !(tagName === 'use' && value[0] === '#'))) {
         return absoluteToDoc(doc, value);
     }
     else if (name === 'xlink:href' && value && value[0] !== '#') {
@@ -843,7 +847,8 @@ function serializeNodeWithId(n, options) {
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
-        if (n.shadowRoot)
+        var shadowRoot = n.shadowRoot;
+        if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
     }
     if ((serializedNode.type === NodeType.Document ||
@@ -891,13 +896,16 @@ function serializeNodeWithId(n, options) {
                 var childN = _p[_o];
                 var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
                 if (serializedChildNode) {
-                    serializedChildNode.isShadow = true;
+                    isNativeShadowDom(n.shadowRoot) &&
+                        (serializedChildNode.isShadow = true);
                     serializedNode.childNodes.push(serializedChildNode);
                 }
             }
         }
     }
-    if (n.parentNode && isShadowRoot(n.parentNode)) {
+    if (n.parentNode &&
+        isShadowRoot(n.parentNode) &&
+        isNativeShadowDom(n.parentNode)) {
         serializedNode.isShadow = true;
     }
     if (serializedNode.type === NodeType.Element &&
@@ -974,6 +982,44 @@ function serializeNodeWithId(n, options) {
         if (isStylesheetLoaded(n) === false)
             return null;
     }
+    if (serializedNode.type === NodeType.Element &&
+        serializedNode.tagName === 'link' &&
+        serializedNode.attributes.rel === 'stylesheet') {
+        onceStylesheetLoaded(n, function () {
+            if (onStylesheetLoad) {
+                var serializedLinkNode = serializeNodeWithId(n, {
+                    doc: doc,
+                    mirror: mirror,
+                    blockClass: blockClass,
+                    blockSelector: blockSelector,
+                    maskTextClass: maskTextClass,
+                    maskTextSelector: maskTextSelector,
+                    skipChild: false,
+                    inlineStylesheet: inlineStylesheet,
+                    maskInputOptions: maskInputOptions,
+                    maskTextFn: maskTextFn,
+                    maskInputFn: maskInputFn,
+                    slimDOMOptions: slimDOMOptions,
+                    dataURLOptions: dataURLOptions,
+                    inlineImages: inlineImages,
+                    recordCanvas: recordCanvas,
+                    preserveWhiteSpace: preserveWhiteSpace,
+                    onSerialize: onSerialize,
+                    onIframeLoad: onIframeLoad,
+                    iframeLoadTimeout: iframeLoadTimeout,
+                    enableStrictPrivacy: enableStrictPrivacy,
+                    onStylesheetLoad: onStylesheetLoad,
+                    stylesheetLoadTimeout: stylesheetLoadTimeout,
+                    keepIframeSrcFn: keepIframeSrcFn
+                });
+                if (serializedLinkNode) {
+                    onStylesheetLoad(n, serializedLinkNode);
+                }
+            }
+        }, stylesheetLoadTimeout);
+        if (isStylesheetLoaded(n) === false)
+            return null;
+    }
     return serializedNode;
 }
 function snapshot(n, options) {
@@ -1091,14 +1137,13 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
 function throttle(func, wait, options = {}) {
     let timeout = null;
     let previous = 0;
-    return function (arg) {
+    return function (...args) {
         const now = Date.now();
         if (!previous && options.leading === false) {
             previous = now;
         }
         const remaining = wait - (now - previous);
         const context = this;
-        const args = arguments;
         if (remaining <= 0 || remaining > wait) {
             if (timeout) {
                 clearTimeout(timeout);
@@ -1135,7 +1180,8 @@ function hookSetter(target, key, d, isRevoked, win = window) {
 function patch(source, name, replacement) {
     try {
         if (!(name in source)) {
-            return () => { };
+            return () => {
+            };
         }
         const original = source[name];
         const wrapped = replacement(original);
@@ -1154,7 +1200,8 @@ function patch(source, name, replacement) {
         };
     }
     catch (_a) {
-        return () => { };
+        return () => {
+        };
     }
 }
 function getWindowHeight() {
@@ -1235,8 +1282,9 @@ function polyfill(win = window) {
             .forEach;
     }
     if (!Node.prototype.contains) {
-        Node.prototype.contains = function contains(node) {
-            if (!(0 in arguments)) {
+        Node.prototype.contains = (...args) => {
+            let node = args[0];
+            if (!(0 in args)) {
                 throw new TypeError('1 argument is required');
             }
             do {
@@ -1475,6 +1523,7 @@ class MutationBuffer {
                     maskTextClass: this.maskTextClass,
                     maskTextSelector: this.maskTextSelector,
                     skipChild: true,
+                    newlyAddedElement: true,
                     inlineStylesheet: this.inlineStylesheet,
                     maskInputOptions: this.maskInputOptions,
                     maskTextFn: this.maskTextFn,
@@ -1501,7 +1550,6 @@ class MutationBuffer {
                     onStylesheetLoad: (link, childSn) => {
                         this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
                     },
-                    newlyAddedElement: true,
                 });
                 if (sn) {
                     adds.push({
@@ -1727,7 +1775,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);
@@ -1893,7 +1943,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'
@@ -1943,7 +1994,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
@@ -2147,7 +2199,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) {
@@ -2158,7 +2210,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                 removes: [{ index }],
             });
         }
-        return deleteRule.apply(this, arguments);
+        return deleteRule.apply(this, [index]);
     };
     const supportedNestedCSSRuleTypes = {};
     if (isCSSGroupingRuleSupported) {
@@ -2197,17 +2249,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 () => {
@@ -2235,7 +2289,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) {
@@ -2250,7 +2304,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;
@@ -2285,7 +2339,8 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror,
 function initFontObserver({ fontCb, doc }) {
     const win = doc.defaultView;
     if (!win) {
-        return () => { };
+        return () => {
+        };
     }
     const handlers = [];
     const fontMap = new WeakMap();
@@ -2298,8 +2353,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;
     };
@@ -2395,7 +2449,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);
@@ -2409,7 +2464,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));
@@ -2469,8 +2527,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;
@@ -2478,6 +2536,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 }));
     }
@@ -2485,8 +2545,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;
@@ -2880,7 +2940,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)