@highlight-run/rrweb 1.2.1 → 2.0.4

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

@@ -0,0 +1,590 @@
+import { maskInputValue } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { on, throttle, isBlocked, getWindowHeight, getWindowWidth, hookSetter, patch, isTouchEvent, isCanvasNode } from '../utils.js';
+import { MouseInteractions, IncrementalSource } from '../types.js';
+import MutationBuffer from './mutation.js';
+
+const mutationBuffers = [];
+const isCSSGroupingRuleSupported = typeof CSSGroupingRule !== 'undefined';
+const isCSSMediaRuleSupported = typeof CSSMediaRule !== 'undefined';
+const isCSSSupportsRuleSupported = typeof CSSSupportsRule !== 'undefined';
+const isCSSConditionRuleSupported = typeof CSSConditionRule !== 'undefined';
+function getEventTarget(event) {
+    try {
+        if ('composedPath' in event) {
+            const path = event.composedPath();
+            if (path.length) {
+                return path[0];
+            }
+        }
+        else if ('path' in event && event.path.length) {
+            return event.path[0];
+        }
+        return event.target;
+    }
+    catch (_a) {
+        return event.target;
+    }
+}
+function initMutationObserver(options, rootEl) {
+    var _a, _b;
+    const mutationBuffer = new MutationBuffer();
+    mutationBuffers.push(mutationBuffer);
+    mutationBuffer.init(options);
+    let mutationObserverCtor = window.MutationObserver ||
+        window.__rrMutationObserver;
+    const angularZoneSymbol = (_b = (_a = window === null || window === void 0 ? void 0 : window.Zone) === null || _a === void 0 ? void 0 : _a.__symbol__) === null || _b === void 0 ? void 0 : _b.call(_a, 'MutationObserver');
+    if (angularZoneSymbol &&
+        window[angularZoneSymbol]) {
+        mutationObserverCtor = window[angularZoneSymbol];
+    }
+    const observer = new mutationObserverCtor(mutationBuffer.processMutations.bind(mutationBuffer));
+    observer.observe(rootEl, {
+        attributes: true,
+        attributeOldValue: true,
+        characterData: true,
+        characterDataOldValue: true,
+        childList: true,
+        subtree: true,
+    });
+    return observer;
+}
+function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
+    if (sampling.mousemove === false) {
+        return () => { };
+    }
+    const threshold = typeof sampling.mousemove === 'number' ? sampling.mousemove : 50;
+    const callbackThreshold = typeof sampling.mousemoveCallback === 'number'
+        ? sampling.mousemoveCallback
+        : 500;
+    let positions = [];
+    let timeBaseline;
+    const wrappedCb = throttle((source) => {
+        const totalOffset = Date.now() - timeBaseline;
+        mousemoveCb(positions.map((p) => {
+            p.timeOffset -= totalOffset;
+            return p;
+        }), source);
+        positions = [];
+        timeBaseline = null;
+    }, callbackThreshold);
+    const updatePosition = throttle((evt) => {
+        const target = getEventTarget(evt);
+        const { clientX, clientY } = isTouchEvent(evt)
+            ? evt.changedTouches[0]
+            : evt;
+        if (!timeBaseline) {
+            timeBaseline = Date.now();
+        }
+        positions.push({
+            x: clientX,
+            y: clientY,
+            id: mirror.getId(target),
+            timeOffset: Date.now() - timeBaseline,
+        });
+        wrappedCb(typeof DragEvent !== 'undefined' && evt instanceof DragEvent
+            ? IncrementalSource.Drag
+            : evt instanceof MouseEvent
+                ? IncrementalSource.MouseMove
+                : IncrementalSource.TouchMove);
+    }, threshold, {
+        trailing: false,
+    });
+    const handlers = [
+        on('mousemove', updatePosition, doc),
+        on('touchmove', updatePosition, doc),
+        on('drag', updatePosition, doc),
+    ];
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockClass, sampling, }) {
+    if (sampling.mouseInteraction === false) {
+        return () => { };
+    }
+    const disableMap = sampling.mouseInteraction === true ||
+        sampling.mouseInteraction === undefined
+        ? {}
+        : sampling.mouseInteraction;
+    const handlers = [];
+    const getHandler = (eventKey) => {
+        return (event) => {
+            const target = getEventTarget(event);
+            if (isBlocked(target, blockClass) ||
+                isCanvasNode(target)) {
+                return;
+            }
+            const e = isTouchEvent(event) ? event.changedTouches[0] : event;
+            if (!e) {
+                return;
+            }
+            const id = mirror.getId(target);
+            const { clientX, clientY } = e;
+            mouseInteractionCb({
+                type: MouseInteractions[eventKey],
+                id,
+                x: clientX,
+                y: clientY,
+            });
+        };
+    };
+    Object.keys(MouseInteractions)
+        .filter((key) => Number.isNaN(Number(key)) &&
+        !key.endsWith('_Departed') &&
+        disableMap[key] !== false)
+        .forEach((eventKey) => {
+        const eventName = eventKey.toLowerCase();
+        const handler = getHandler(eventKey);
+        handlers.push(on(eventName, handler, doc));
+    });
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+function initScrollObserver({ scrollCb, doc, mirror, blockClass, sampling, }) {
+    const updatePosition = throttle((evt) => {
+        const target = getEventTarget(evt);
+        if (!target || isBlocked(target, blockClass)) {
+            return;
+        }
+        const id = mirror.getId(target);
+        if (target === doc) {
+            const scrollEl = (doc.scrollingElement || doc.documentElement);
+            scrollCb({
+                id,
+                x: scrollEl.scrollLeft,
+                y: scrollEl.scrollTop,
+            });
+        }
+        else {
+            scrollCb({
+                id,
+                x: target.scrollLeft,
+                y: target.scrollTop,
+            });
+        }
+    }, sampling.scroll || 100);
+    return on('scroll', updatePosition, doc);
+}
+function initViewportResizeObserver({ viewportResizeCb, }) {
+    let lastH = -1;
+    let lastW = -1;
+    const updateDimension = throttle(() => {
+        const height = getWindowHeight();
+        const width = getWindowWidth();
+        if (lastH !== height || lastW !== width) {
+            viewportResizeCb({
+                width: Number(width),
+                height: Number(height),
+            });
+            lastH = height;
+            lastW = width;
+        }
+    }, 200);
+    return on('resize', updateDimension, window);
+}
+function wrapEventWithUserTriggeredFlag(v, enable) {
+    const value = Object.assign({}, v);
+    if (!enable)
+        delete value.userTriggered;
+    return value;
+}
+const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
+const lastInputValueMap = new WeakMap();
+function initInputObserver({ inputCb, doc, mirror, blockClass, ignoreClass, maskInputOptions, maskInputFn, sampling, userTriggeredOnInput, }) {
+    function eventHandler(event) {
+        let target = getEventTarget(event);
+        const userTriggered = event.isTrusted;
+        if (target && target.tagName === 'OPTION')
+            target = target.parentElement;
+        if (!target ||
+            !target.tagName ||
+            INPUT_TAGS.indexOf(target.tagName) < 0 ||
+            isBlocked(target, blockClass)) {
+            return;
+        }
+        const type = target.type;
+        if (target.classList.contains(ignoreClass)) {
+            return;
+        }
+        let text = target.value;
+        let isChecked = false;
+        if (type === 'radio' || type === 'checkbox') {
+            isChecked = target.checked;
+        }
+        else if (maskInputOptions[target.tagName.toLowerCase()] ||
+            maskInputOptions[type]) {
+            text = maskInputValue({
+                maskInputOptions,
+                tagName: target.tagName,
+                type,
+                value: text,
+                maskInputFn,
+            });
+        }
+        cbWithDedup(target, wrapEventWithUserTriggeredFlag({ text, isChecked, userTriggered }, userTriggeredOnInput));
+        const name = target.name;
+        if (type === 'radio' && name && isChecked) {
+            doc
+                .querySelectorAll(`input[type="radio"][name="${name}"]`)
+                .forEach((el) => {
+                if (el !== target) {
+                    cbWithDedup(el, wrapEventWithUserTriggeredFlag({
+                        text: el.value,
+                        isChecked: !isChecked,
+                        userTriggered: false,
+                    }, userTriggeredOnInput));
+                }
+            });
+        }
+    }
+    function cbWithDedup(target, v) {
+        const lastInputValue = lastInputValueMap.get(target);
+        if (!lastInputValue ||
+            lastInputValue.text !== v.text ||
+            lastInputValue.isChecked !== v.isChecked) {
+            lastInputValueMap.set(target, v);
+            const id = mirror.getId(target);
+            inputCb(Object.assign(Object.assign({}, v), { id }));
+        }
+    }
+    const events = sampling.input === 'last' ? ['change'] : ['input', 'change'];
+    const handlers = events.map((eventName) => on(eventName, eventHandler, doc));
+    const propertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    const hookProperties = [
+        [HTMLInputElement.prototype, 'value'],
+        [HTMLInputElement.prototype, 'checked'],
+        [HTMLSelectElement.prototype, 'value'],
+        [HTMLTextAreaElement.prototype, 'value'],
+        [HTMLSelectElement.prototype, 'selectedIndex'],
+        [HTMLOptionElement.prototype, 'selected'],
+    ];
+    if (propertyDescriptor && propertyDescriptor.set) {
+        handlers.push(...hookProperties.map((p) => hookSetter(p[0], p[1], {
+            set() {
+                eventHandler({ target: this });
+            },
+        })));
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+function getNestedCSSRulePositions(rule) {
+    const positions = [];
+    function recurse(childRule, pos) {
+        if ((isCSSGroupingRuleSupported &&
+            childRule.parentRule instanceof CSSGroupingRule) ||
+            (isCSSMediaRuleSupported &&
+                childRule.parentRule instanceof CSSMediaRule) ||
+            (isCSSSupportsRuleSupported &&
+                childRule.parentRule instanceof CSSSupportsRule) ||
+            (isCSSConditionRuleSupported &&
+                childRule.parentRule instanceof CSSConditionRule)) {
+            const rules = Array.from(childRule.parentRule.cssRules);
+            const index = rules.indexOf(childRule);
+            pos.unshift(index);
+        }
+        else {
+            const rules = Array.from(childRule.parentStyleSheet.cssRules);
+            const index = rules.indexOf(childRule);
+            pos.unshift(index);
+        }
+        return pos;
+    }
+    return recurse(rule, positions);
+}
+function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
+    const insertRule = win.CSSStyleSheet.prototype.insertRule;
+    win.CSSStyleSheet.prototype.insertRule = function (rule, index) {
+        const id = mirror.getId(this.ownerNode);
+        if (id !== -1) {
+            styleSheetRuleCb({
+                id,
+                adds: [{ rule, index }],
+            });
+        }
+        return insertRule.apply(this, arguments);
+    };
+    const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
+    win.CSSStyleSheet.prototype.deleteRule = function (index) {
+        const id = mirror.getId(this.ownerNode);
+        if (id !== -1) {
+            styleSheetRuleCb({
+                id,
+                removes: [{ index }],
+            });
+        }
+        return deleteRule.apply(this, arguments);
+    };
+    const supportedNestedCSSRuleTypes = {};
+    if (isCSSGroupingRuleSupported) {
+        supportedNestedCSSRuleTypes.CSSGroupingRule = win.CSSGroupingRule;
+    }
+    else {
+        if (isCSSMediaRuleSupported) {
+            supportedNestedCSSRuleTypes.CSSMediaRule = win.CSSMediaRule;
+        }
+        if (isCSSConditionRuleSupported) {
+            supportedNestedCSSRuleTypes.CSSConditionRule = win.CSSConditionRule;
+        }
+        if (isCSSSupportsRuleSupported) {
+            supportedNestedCSSRuleTypes.CSSSupportsRule = win.CSSSupportsRule;
+        }
+    }
+    const unmodifiedFunctions = {};
+    Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
+        unmodifiedFunctions[typeKey] = {
+            insertRule: (type).prototype.insertRule,
+            deleteRule: (type).prototype.deleteRule,
+        };
+        type.prototype.insertRule = function (rule, index) {
+            const id = mirror.getId(this.parentStyleSheet.ownerNode);
+            if (id !== -1) {
+                styleSheetRuleCb({
+                    id,
+                    adds: [
+                        {
+                            rule,
+                            index: [
+                                ...getNestedCSSRulePositions(this),
+                                index || 0,
+                            ],
+                        },
+                    ],
+                });
+            }
+            return unmodifiedFunctions[typeKey].insertRule.apply(this, arguments);
+        };
+        type.prototype.deleteRule = function (index) {
+            const id = mirror.getId(this.parentStyleSheet.ownerNode);
+            if (id !== -1) {
+                styleSheetRuleCb({
+                    id,
+                    removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+                });
+            }
+            return unmodifiedFunctions[typeKey].deleteRule.apply(this, arguments);
+        };
+    });
+    return () => {
+        win.CSSStyleSheet.prototype.insertRule = insertRule;
+        win.CSSStyleSheet.prototype.deleteRule = deleteRule;
+        Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
+            type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
+            type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
+        });
+    };
+}
+function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
+    const setProperty = win.CSSStyleDeclaration.prototype.setProperty;
+    win.CSSStyleDeclaration.prototype.setProperty = function (property, value, priority) {
+        var _a, _b;
+        const id = mirror.getId((_b = (_a = this.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet) === null || _b === void 0 ? void 0 : _b.ownerNode);
+        if (id !== -1) {
+            styleDeclarationCb({
+                id,
+                set: {
+                    property,
+                    value,
+                    priority,
+                },
+                index: getNestedCSSRulePositions(this.parentRule),
+            });
+        }
+        return setProperty.apply(this, arguments);
+    };
+    const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
+    win.CSSStyleDeclaration.prototype.removeProperty = function (property) {
+        var _a, _b;
+        const id = mirror.getId((_b = (_a = this.parentRule) === null || _a === void 0 ? void 0 : _a.parentStyleSheet) === null || _b === void 0 ? void 0 : _b.ownerNode);
+        if (id !== -1) {
+            styleDeclarationCb({
+                id,
+                remove: {
+                    property,
+                },
+                index: getNestedCSSRulePositions(this.parentRule),
+            });
+        }
+        return removeProperty.apply(this, arguments);
+    };
+    return () => {
+        win.CSSStyleDeclaration.prototype.setProperty = setProperty;
+        win.CSSStyleDeclaration.prototype.removeProperty = removeProperty;
+    };
+}
+function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror, sampling, }) {
+    const handler = (type) => throttle((event) => {
+        const target = getEventTarget(event);
+        if (!target || isBlocked(target, blockClass)) {
+            return;
+        }
+        const { currentTime, volume, muted } = target;
+        mediaInteractionCb({
+            type,
+            id: mirror.getId(target),
+            currentTime,
+            volume,
+            muted,
+        });
+    }, sampling.media || 500);
+    const handlers = [
+        on('play', handler(0)),
+        on('pause', handler(1)),
+        on('seeked', handler(2)),
+        on('volumechange', handler(3)),
+    ];
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+function initFontObserver({ fontCb, doc }) {
+    const win = doc.defaultView;
+    if (!win) {
+        return () => { };
+    }
+    const handlers = [];
+    const fontMap = new WeakMap();
+    const originalFontFace = win.FontFace;
+    win.FontFace = function FontFace(family, source, descriptors) {
+        const fontFace = new originalFontFace(family, source, descriptors);
+        fontMap.set(fontFace, {
+            family,
+            buffer: typeof source !== 'string',
+            descriptors,
+            fontSource: typeof source === 'string'
+                ? source
+                :
+                    JSON.stringify(Array.from(new Uint8Array(source))),
+        });
+        return fontFace;
+    };
+    const restoreHandler = patch(doc.fonts, 'add', function (original) {
+        return function (fontFace) {
+            setTimeout(() => {
+                const p = fontMap.get(fontFace);
+                if (p) {
+                    fontCb(p);
+                    fontMap.delete(fontFace);
+                }
+            }, 0);
+            return original.apply(this, [fontFace]);
+        };
+    });
+    handlers.push(() => {
+        win.FontFace = originalFontFace;
+    });
+    handlers.push(restoreHandler);
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+function mergeHooks(o, hooks) {
+    const { mutationCb, mousemoveCb, mouseInteractionCb, scrollCb, viewportResizeCb, inputCb, mediaInteractionCb, styleSheetRuleCb, styleDeclarationCb, canvasMutationCb, fontCb, } = o;
+    o.mutationCb = (...p) => {
+        if (hooks.mutation) {
+            hooks.mutation(...p);
+        }
+        mutationCb(...p);
+    };
+    o.mousemoveCb = (...p) => {
+        if (hooks.mousemove) {
+            hooks.mousemove(...p);
+        }
+        mousemoveCb(...p);
+    };
+    o.mouseInteractionCb = (...p) => {
+        if (hooks.mouseInteraction) {
+            hooks.mouseInteraction(...p);
+        }
+        mouseInteractionCb(...p);
+    };
+    o.scrollCb = (...p) => {
+        if (hooks.scroll) {
+            hooks.scroll(...p);
+        }
+        scrollCb(...p);
+    };
+    o.viewportResizeCb = (...p) => {
+        if (hooks.viewportResize) {
+            hooks.viewportResize(...p);
+        }
+        viewportResizeCb(...p);
+    };
+    o.inputCb = (...p) => {
+        if (hooks.input) {
+            hooks.input(...p);
+        }
+        inputCb(...p);
+    };
+    o.mediaInteractionCb = (...p) => {
+        if (hooks.mediaInteaction) {
+            hooks.mediaInteaction(...p);
+        }
+        mediaInteractionCb(...p);
+    };
+    o.styleSheetRuleCb = (...p) => {
+        if (hooks.styleSheetRule) {
+            hooks.styleSheetRule(...p);
+        }
+        styleSheetRuleCb(...p);
+    };
+    o.styleDeclarationCb = (...p) => {
+        if (hooks.styleDeclaration) {
+            hooks.styleDeclaration(...p);
+        }
+        styleDeclarationCb(...p);
+    };
+    o.canvasMutationCb = (...p) => {
+        if (hooks.canvasMutation) {
+            hooks.canvasMutation(...p);
+        }
+        canvasMutationCb(...p);
+    };
+    o.fontCb = (...p) => {
+        if (hooks.font) {
+            hooks.font(...p);
+        }
+        fontCb(...p);
+    };
+}
+function initObservers(o, hooks = {}) {
+    const currentWindow = o.doc.defaultView;
+    if (!currentWindow) {
+        return () => { };
+    }
+    mergeHooks(o, hooks);
+    const mutationObserver = initMutationObserver(o, o.doc);
+    const mousemoveHandler = initMoveObserver(o);
+    const mouseInteractionHandler = initMouseInteractionObserver(o);
+    const scrollHandler = initScrollObserver(o);
+    const viewportResizeHandler = initViewportResizeObserver(o);
+    const inputHandler = initInputObserver(o);
+    const mediaInteractionHandler = initMediaInteractionObserver(o);
+    const styleSheetObserver = initStyleSheetObserver(o, { win: currentWindow });
+    const styleDeclarationObserver = initStyleDeclarationObserver(o, {
+        win: currentWindow,
+    });
+    const fontObserver = o.collectFonts ? initFontObserver(o) : () => { };
+    const pluginHandlers = [];
+    for (const plugin of o.plugins) {
+        pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));
+    }
+    return () => {
+        mutationBuffers.forEach((b) => b.reset());
+        mutationObserver.disconnect();
+        mousemoveHandler();
+        mouseInteractionHandler();
+        scrollHandler();
+        viewportResizeHandler();
+        inputHandler();
+        mediaInteractionHandler();
+        styleSheetObserver();
+        styleDeclarationObserver();
+        fontObserver();
+        pluginHandlers.forEach((h) => h());
+    };
+}
+
+export { INPUT_TAGS, initMutationObserver, initObservers, initScrollObserver, mutationBuffers };

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

@@ -0,0 +1,49 @@
+import { CanvasContext } from '../../../types.js';
+import { patch, isBlocked, hookSetter } from '../../../utils.js';
+import { serializeArgs } from './serialize-args.js';
+
+function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
+    const handlers = [];
+    const props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
+    for (const prop of props2D) {
+        try {
+            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
+                continue;
+            }
+            const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
+                return function (...args) {
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        setTimeout(() => {
+                            const recordArgs = serializeArgs([...args], win, this);
+                            cb(this.canvas, {
+                                type: CanvasContext['2D'],
+                                property: prop,
+                                args: recordArgs,
+                            });
+                        }, 0);
+                    }
+                    return original.apply(this, args);
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_a) {
+            const hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
+                set(v) {
+                    cb(this.canvas, {
+                        type: CanvasContext['2D'],
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+
+export { initCanvas2DMutationObserver as default };