@highlight-run/rrweb 1.2.0 → 2.0.1

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

@@ -0,0 +1,111 @@
+import { __values, __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
+import { PLUGIN_NAME } from '../record/index.js';
+import { EventType, IncrementalSource } from '../../../types.js';
+
+var ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
+var defaultLogConfig = {
+    level: [
+        'assert',
+        'clear',
+        'count',
+        'countReset',
+        'debug',
+        'dir',
+        'dirxml',
+        'error',
+        'group',
+        'groupCollapsed',
+        'groupEnd',
+        'info',
+        'log',
+        'table',
+        'time',
+        'timeEnd',
+        'timeLog',
+        'trace',
+        'warn',
+    ],
+    replayLogger: undefined,
+};
+var LogReplayPlugin = (function () {
+    function LogReplayPlugin(config) {
+        this.config = Object.assign(defaultLogConfig, config);
+    }
+    LogReplayPlugin.prototype.getConsoleLogger = function () {
+        var e_1, _a;
+        var _this = this;
+        var replayLogger = {};
+        var _loop_1 = function (level) {
+            if (level === 'trace') {
+                replayLogger[level] = function (data) {
+                    var logger = console.log[ORIGINAL_ATTRIBUTE_NAME]
+                        ? console.log[ORIGINAL_ATTRIBUTE_NAME]
+                        : console.log;
+                    logger.apply(void 0, __spreadArray(__spreadArray([], __read(data.payload.map(function (s) { return JSON.parse(s); })), false), [_this.formatMessage(data)], false));
+                };
+            }
+            else {
+                replayLogger[level] = function (data) {
+                    var logger = console[level][ORIGINAL_ATTRIBUTE_NAME]
+                        ? console[level][ORIGINAL_ATTRIBUTE_NAME]
+                        : console[level];
+                    logger.apply(void 0, __spreadArray(__spreadArray([], __read(data.payload.map(function (s) { return JSON.parse(s); })), false), [_this.formatMessage(data)], false));
+                };
+            }
+        };
+        try {
+            for (var _b = __values(this.config.level), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var level = _c.value;
+                _loop_1(level);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return replayLogger;
+    };
+    LogReplayPlugin.prototype.formatMessage = function (data) {
+        if (data.trace.length === 0) {
+            return '';
+        }
+        var stackPrefix = '\n\tat ';
+        var result = stackPrefix;
+        result += data.trace.join(stackPrefix);
+        return result;
+    };
+    return LogReplayPlugin;
+}());
+var getReplayConsolePlugin = function (options) {
+    var replayLogger = (options === null || options === void 0 ? void 0 : options.replayLogger) || new LogReplayPlugin(options).getConsoleLogger();
+    return {
+        handler: function (event, _isSync, context) {
+            var logData = null;
+            if (event.type === EventType.IncrementalSnapshot &&
+                event.data.source === IncrementalSource.Log) {
+                logData = event.data;
+            }
+            else if (event.type === EventType.Plugin &&
+                event.data.plugin === PLUGIN_NAME) {
+                logData = event.data.payload;
+            }
+            if (logData) {
+                try {
+                    if (typeof replayLogger[logData.level] === 'function') {
+                        replayLogger[logData.level](logData);
+                    }
+                }
+                catch (error) {
+                    if (context.replayer.config.showWarning) {
+                        console.warn(error);
+                    }
+                }
+            }
+        },
+    };
+};
+
+export { getReplayConsolePlugin };

package/es/rrweb/packages/rrweb/src/plugins/sequential-id/record/index.js

@@ -0,0 +1,23 @@
+var defaultOptions = {
+    key: '_sid',
+};
+var PLUGIN_NAME = 'rrweb/sequential-id@1';
+var getRecordSequentialIdPlugin = function (options) {
+    var _options = options
+        ? Object.assign({}, defaultOptions, options)
+        : defaultOptions;
+    var id = 0;
+    return {
+        name: PLUGIN_NAME,
+        eventProcessor: function (event) {
+            var _a;
+            Object.assign(event, (_a = {},
+                _a[_options.key] = ++id,
+                _a));
+            return event;
+        },
+        options: _options,
+    };
+};
+
+export { PLUGIN_NAME, getRecordSequentialIdPlugin };

package/es/rrweb/packages/rrweb/src/plugins/sequential-id/replay/index.js

@@ -0,0 +1,28 @@
+var defaultOptions = {
+    key: '_sid',
+    warnOnMissingId: true,
+};
+var getReplaySequentialIdPlugin = function (options) {
+    var _a = options
+        ? Object.assign({}, defaultOptions, options)
+        : defaultOptions, key = _a.key, warnOnMissingId = _a.warnOnMissingId;
+    var currentId = 1;
+    return {
+        handler: function (event) {
+            if (key in event) {
+                var id = event[key];
+                if (id !== currentId) {
+                    console.error("[sequential-id-plugin]: expect to get an id with value \"".concat(currentId, "\", but got \"").concat(id, "\""));
+                }
+                else {
+                    currentId++;
+                }
+            }
+            else if (warnOnMissingId) {
+                console.warn("[sequential-id-plugin]: failed to get id in key: \"".concat(key, "\""));
+            }
+        },
+    };
+};
+
+export { getReplaySequentialIdPlugin };

package/es/rrweb/packages/rrweb/src/record/iframe-manager.js

@@ -0,0 +1,32 @@
+var IframeManager = (function () {
+    function IframeManager(options) {
+        this.iframes = new WeakMap();
+        this.mutationCb = options.mutationCb;
+    }
+    IframeManager.prototype.addIframe = function (iframeEl) {
+        this.iframes.set(iframeEl, true);
+    };
+    IframeManager.prototype.addLoadListener = function (cb) {
+        this.loadListener = cb;
+    };
+    IframeManager.prototype.attachIframe = function (iframeEl, childSn) {
+        var _a;
+        this.mutationCb({
+            adds: [
+                {
+                    parentId: iframeEl.__sn.id,
+                    nextId: null,
+                    node: childSn,
+                },
+            ],
+            removes: [],
+            texts: [],
+            attributes: [],
+            isAttachIframe: true,
+        });
+        (_a = this.loadListener) === null || _a === void 0 ? void 0 : _a.call(this, iframeEl);
+    };
+    return IframeManager;
+}());
+
+export { IframeManager };

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

@@ -0,0 +1,381 @@
+import { __assign, __read, __values } from '../../ext/tslib/tslib.es6.js';
+import { snapshot } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
+import { initObservers, mutationBuffers } from './observer.js';
+import { polyfill, on, createMirror, getWindowWidth, getWindowHeight, isIframeINode, hasShadowRoot } from '../utils.js';
+import { EventType, IncrementalSource } from '../types.js';
+import { IframeManager } from './iframe-manager.js';
+import { ShadowDomManager } from './shadow-dom-manager.js';
+import { CanvasManager } from './observers/canvas/canvas-manager.js';
+
+function wrapEvent(e) {
+    return __assign(__assign({}, e), { timestamp: Date.now() });
+}
+var wrappedEmit;
+var takeFullSnapshot;
+var mirror = createMirror();
+function record(options) {
+    if (options === void 0) { options = {}; }
+    var emit = options.emit, checkoutEveryNms = options.checkoutEveryNms, checkoutEveryNth = options.checkoutEveryNth, _a = options.blockClass, blockClass = _a === void 0 ? 'highlight-block' : _a, _b = options.blockSelector, blockSelector = _b === void 0 ? null : _b, _c = options.ignoreClass, ignoreClass = _c === void 0 ? 'highlight-ignore' : _c, _d = options.maskTextClass, maskTextClass = _d === void 0 ? 'highlight-mask' : _d, _e = options.maskTextSelector, maskTextSelector = _e === void 0 ? null : _e, _f = options.inlineStylesheet, inlineStylesheet = _f === void 0 ? true : _f, maskAllInputs = options.maskAllInputs, _maskInputOptions = options.maskInputOptions, _slimDOMOptions = options.slimDOMOptions, maskInputFn = options.maskInputFn, maskTextFn = options.maskTextFn, hooks = options.hooks, packFn = options.packFn, _g = options.sampling, sampling = _g === void 0 ? {} : _g, mousemoveWait = options.mousemoveWait, _h = options.recordCanvas, recordCanvas = _h === void 0 ? false : _h, _j = options.userTriggeredOnInput, userTriggeredOnInput = _j === void 0 ? false : _j, _k = options.collectFonts, collectFonts = _k === void 0 ? false : _k, _l = options.inlineImages, inlineImages = _l === void 0 ? false : _l, plugins = options.plugins, _m = options.keepIframeSrcFn, keepIframeSrcFn = _m === void 0 ? function () { return false; } : _m, _o = options.enableStrictPrivacy, enableStrictPrivacy = _o === void 0 ? false : _o;
+    if (!emit) {
+        throw new Error('emit function is required');
+    }
+    if (mousemoveWait !== undefined && sampling.mousemove === undefined) {
+        sampling.mousemove = mousemoveWait;
+    }
+    var maskInputOptions = maskAllInputs === true
+        ? {
+            color: true,
+            date: true,
+            'datetime-local': true,
+            email: true,
+            month: true,
+            number: true,
+            range: true,
+            search: true,
+            tel: true,
+            text: true,
+            time: true,
+            url: true,
+            week: true,
+            textarea: true,
+            select: true,
+            password: true,
+        }
+        : _maskInputOptions !== undefined
+            ? _maskInputOptions
+            : { password: true };
+    var slimDOMOptions = _slimDOMOptions === true || _slimDOMOptions === 'all'
+        ? {
+            script: true,
+            comment: true,
+            headFavicon: true,
+            headWhitespace: true,
+            headMetaSocial: true,
+            headMetaRobots: true,
+            headMetaHttpEquiv: true,
+            headMetaVerification: true,
+            headMetaAuthorship: _slimDOMOptions === 'all',
+            headMetaDescKeywords: _slimDOMOptions === 'all',
+        }
+        : _slimDOMOptions
+            ? _slimDOMOptions
+            : {};
+    polyfill();
+    var lastFullSnapshotEvent;
+    var incrementalSnapshotCount = 0;
+    var eventProcessor = function (e) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(plugins || []), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var plugin = _c.value;
+                if (plugin.eventProcessor) {
+                    e = plugin.eventProcessor(e);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (packFn) {
+            e = packFn(e);
+        }
+        return e;
+    };
+    wrappedEmit = function (e, isCheckout) {
+        var _a;
+        if (((_a = mutationBuffers[0]) === null || _a === void 0 ? void 0 : _a.isFrozen()) &&
+            e.type !== EventType.FullSnapshot &&
+            !(e.type === EventType.IncrementalSnapshot &&
+                e.data.source === IncrementalSource.Mutation)) {
+            mutationBuffers.forEach(function (buf) { return buf.unfreeze(); });
+        }
+        emit(eventProcessor(e), isCheckout);
+        if (e.type === EventType.FullSnapshot) {
+            lastFullSnapshotEvent = e;
+            incrementalSnapshotCount = 0;
+        }
+        else if (e.type === EventType.IncrementalSnapshot) {
+            if (e.data.source === IncrementalSource.Mutation &&
+                e.data.isAttachIframe) {
+                return;
+            }
+            incrementalSnapshotCount++;
+            var exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
+            var exceedTime = checkoutEveryNms &&
+                e.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
+            if (exceedCount || exceedTime) {
+                takeFullSnapshot(true);
+            }
+        }
+    };
+    var wrappedMutationEmit = function (m) {
+        wrappedEmit(wrapEvent({
+            type: EventType.IncrementalSnapshot,
+            data: __assign({ source: IncrementalSource.Mutation }, m),
+        }));
+    };
+    var wrappedScrollEmit = function (p) {
+        return wrappedEmit(wrapEvent({
+            type: EventType.IncrementalSnapshot,
+            data: __assign({ source: IncrementalSource.Scroll }, p),
+        }));
+    };
+    var wrappedCanvasMutationEmit = function (p) {
+        return wrappedEmit(wrapEvent({
+            type: EventType.IncrementalSnapshot,
+            data: __assign({ source: IncrementalSource.CanvasMutation }, p),
+        }));
+    };
+    var iframeManager = new IframeManager({
+        mutationCb: wrappedMutationEmit,
+    });
+    var canvasManager = new CanvasManager({
+        recordCanvas: recordCanvas,
+        mutationCb: wrappedCanvasMutationEmit,
+        win: window,
+        blockClass: blockClass,
+        mirror: mirror,
+    });
+    var shadowDomManager = new ShadowDomManager({
+        mutationCb: wrappedMutationEmit,
+        scrollCb: wrappedScrollEmit,
+        bypassOptions: {
+            blockClass: blockClass,
+            blockSelector: blockSelector,
+            maskTextClass: maskTextClass,
+            maskTextSelector: maskTextSelector,
+            inlineStylesheet: inlineStylesheet,
+            maskInputOptions: maskInputOptions,
+            maskTextFn: maskTextFn,
+            maskInputFn: maskInputFn,
+            recordCanvas: recordCanvas,
+            inlineImages: inlineImages,
+            sampling: sampling,
+            slimDOMOptions: slimDOMOptions,
+            iframeManager: iframeManager,
+            canvasManager: canvasManager,
+            enableStrictPrivacy: enableStrictPrivacy
+        },
+        mirror: mirror,
+    });
+    takeFullSnapshot = function (isCheckout) {
+        var _a, _b, _c, _d;
+        if (isCheckout === void 0) { isCheckout = false; }
+        wrappedEmit(wrapEvent({
+            type: EventType.Meta,
+            data: {
+                href: window.location.href,
+                width: getWindowWidth(),
+                height: getWindowHeight(),
+            },
+        }), isCheckout);
+        mutationBuffers.forEach(function (buf) { return buf.lock(); });
+        var _e = __read(snapshot(document, {
+            blockClass: blockClass,
+            blockSelector: blockSelector,
+            maskTextClass: maskTextClass,
+            maskTextSelector: maskTextSelector,
+            inlineStylesheet: inlineStylesheet,
+            maskAllInputs: maskInputOptions,
+            maskTextFn: maskTextFn,
+            slimDOM: slimDOMOptions,
+            recordCanvas: recordCanvas,
+            inlineImages: inlineImages,
+            enableStrictPrivacy: enableStrictPrivacy,
+            onSerialize: function (n) {
+                if (isIframeINode(n)) {
+                    iframeManager.addIframe(n);
+                }
+                if (hasShadowRoot(n)) {
+                    shadowDomManager.addShadowRoot(n.shadowRoot, document);
+                }
+            },
+            onIframeLoad: function (iframe, childSn) {
+                iframeManager.attachIframe(iframe, childSn);
+                shadowDomManager.observeAttachShadow(iframe);
+            },
+            keepIframeSrcFn: keepIframeSrcFn,
+        }), 2), node = _e[0], idNodeMap = _e[1];
+        if (!node) {
+            return console.warn('Failed to snapshot the document');
+        }
+        mirror.map = idNodeMap;
+        wrappedEmit(wrapEvent({
+            type: EventType.FullSnapshot,
+            data: {
+                node: node,
+                initialOffset: {
+                    left: window.pageXOffset !== undefined
+                        ? window.pageXOffset
+                        : (document === null || document === void 0 ? void 0 : document.documentElement.scrollLeft) ||
+                            ((_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) ||
+                            (document === null || document === void 0 ? void 0 : document.body.scrollLeft) ||
+                            0,
+                    top: window.pageYOffset !== undefined
+                        ? window.pageYOffset
+                        : (document === null || document === void 0 ? void 0 : document.documentElement.scrollTop) ||
+                            ((_d = (_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.scrollTop) ||
+                            (document === null || document === void 0 ? void 0 : document.body.scrollTop) ||
+                            0,
+                },
+            },
+        }));
+        mutationBuffers.forEach(function (buf) { return buf.unlock(); });
+    };
+    try {
+        var handlers_1 = [];
+        handlers_1.push(on('DOMContentLoaded', function () {
+            wrappedEmit(wrapEvent({
+                type: EventType.DomContentLoaded,
+                data: {},
+            }));
+        }));
+        var observe_1 = function (doc) {
+            var _a;
+            return initObservers({
+                mutationCb: wrappedMutationEmit,
+                mousemoveCb: function (positions, source) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: {
+                            source: source,
+                            positions: positions,
+                        },
+                    }));
+                },
+                mouseInteractionCb: function (d) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.MouseInteraction }, d),
+                    }));
+                },
+                scrollCb: wrappedScrollEmit,
+                viewportResizeCb: function (d) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.ViewportResize }, d),
+                    }));
+                },
+                inputCb: function (v) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.Input }, v),
+                    }));
+                },
+                mediaInteractionCb: function (p) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.MediaInteraction }, p),
+                    }));
+                },
+                styleSheetRuleCb: function (r) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.StyleSheetRule }, r),
+                    }));
+                },
+                styleDeclarationCb: function (r) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.StyleDeclaration }, r),
+                    }));
+                },
+                canvasMutationCb: wrappedCanvasMutationEmit,
+                fontCb: function (p) {
+                    return wrappedEmit(wrapEvent({
+                        type: EventType.IncrementalSnapshot,
+                        data: __assign({ source: IncrementalSource.Font }, p),
+                    }));
+                },
+                blockClass: blockClass,
+                ignoreClass: ignoreClass,
+                maskTextClass: maskTextClass,
+                maskTextSelector: maskTextSelector,
+                maskInputOptions: maskInputOptions,
+                inlineStylesheet: inlineStylesheet,
+                sampling: sampling,
+                recordCanvas: recordCanvas,
+                inlineImages: inlineImages,
+                userTriggeredOnInput: userTriggeredOnInput,
+                collectFonts: collectFonts,
+                doc: doc,
+                maskInputFn: maskInputFn,
+                maskTextFn: maskTextFn,
+                blockSelector: blockSelector,
+                slimDOMOptions: slimDOMOptions,
+                mirror: mirror,
+                iframeManager: iframeManager,
+                shadowDomManager: shadowDomManager,
+                canvasManager: canvasManager,
+                enableStrictPrivacy: enableStrictPrivacy,
+                plugins: ((_a = plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (p) { return p.observer; })) === null || _a === void 0 ? void 0 : _a.map(function (p) { return ({
+                    observer: p.observer,
+                    options: p.options,
+                    callback: function (payload) {
+                        return wrappedEmit(wrapEvent({
+                            type: EventType.Plugin,
+                            data: {
+                                plugin: p.name,
+                                payload: payload,
+                            },
+                        }));
+                    },
+                }); })) || [],
+            }, hooks);
+        };
+        iframeManager.addLoadListener(function (iframeEl) {
+            handlers_1.push(observe_1(iframeEl.contentDocument));
+        });
+        var init_1 = function () {
+            takeFullSnapshot();
+            handlers_1.push(observe_1(document));
+        };
+        if (document.readyState === 'interactive' ||
+            document.readyState === 'complete') {
+            init_1();
+        }
+        else {
+            handlers_1.push(on('load', function () {
+                wrappedEmit(wrapEvent({
+                    type: EventType.Load,
+                    data: {},
+                }));
+                init_1();
+            }, window));
+        }
+        return function () {
+            handlers_1.forEach(function (h) { return h(); });
+        };
+    }
+    catch (error) {
+        console.warn(error);
+    }
+}
+record.addCustomEvent = function (tag, payload) {
+    if (!wrappedEmit) {
+        return;
+    }
+    wrappedEmit(wrapEvent({
+        type: EventType.Custom,
+        data: {
+            tag: tag,
+            payload: payload,
+        },
+    }));
+};
+record.freezePage = function () {
+    mutationBuffers.forEach(function (buf) { return buf.freeze(); });
+};
+record.takeFullSnapshot = function (isCheckout) {
+    if (!takeFullSnapshot) {
+        throw new Error('please take full snapshot after start recording');
+    }
+    takeFullSnapshot(isCheckout);
+};
+record.mirror = mirror;
+
+export default record;