@highlight-run/rrweb 1.2.1 → 2.0.4

package/es/rrweb/packages/rrweb/src/entries/all.js

@@ -0,0 +1,13 @@
+export { addCustomEvent, freezePage } from '../index.js';
+export { pack } from '../packer/pack.js';
+export { unpack } from '../packer/unpack.js';
+export { PLUGIN_NAME, getRecordConsolePlugin } from '../plugins/console/record/index.js';
+export { getReplayConsolePlugin } from '../plugins/console/replay/index.js';
+export { getRecordSequentialIdPlugin } from '../plugins/sequential-id/record/index.js';
+export { getReplaySequentialIdPlugin } from '../plugins/sequential-id/replay/index.js';
+export { default as record } from '../record/index.js';
+export { EventType, IncrementalSource, MouseInteractions, ReplayerEvents } from '../types.js';
+export { Replayer } from '../replay/index.js';
+import * as utils from '../utils.js';
+export { utils };
+export { _mirror as mirror } from '../utils.js';

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

@@ -0,0 +1,14 @@
+import record from './record/index.js';
+export { default as record } from './record/index.js';
+import '../../rrweb-snapshot/es/rrweb-snapshot.js';
+import '../../rrdom/es/virtual-dom.js';
+export { EventType, IncrementalSource, MouseInteractions, ReplayerEvents } from './types.js';
+import * as utils from './utils.js';
+export { utils };
+export { _mirror as mirror } from './utils.js';
+import './../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+
+const { addCustomEvent } = record;
+const { freezePage } = record;
+
+export { addCustomEvent, freezePage };

package/es/rrweb/packages/rrweb/src/packer/base.js

@@ -0,0 +1,3 @@
+const MARK = 'v1';
+
+export { MARK };

package/es/rrweb/packages/rrweb/src/packer/pack.js

@@ -0,0 +1,9 @@
+import { strFromU8, zlibSync, strToU8 } from './../../../../ext/fflate/esm/browser.js';
+import { MARK } from './base.js';
+
+const pack = (event) => {
+    const _e = Object.assign(Object.assign({}, event), { v: MARK });
+    return strFromU8(zlibSync(strToU8(JSON.stringify(_e))), true);
+};
+
+export { pack };

package/es/rrweb/packages/rrweb/src/packer/unpack.js

@@ -0,0 +1,29 @@
+import { strFromU8, unzlibSync, strToU8 } from './../../../../ext/fflate/esm/browser.js';
+import { MARK } from './base.js';
+
+const unpack = (raw) => {
+    if (typeof raw !== 'string') {
+        return raw;
+    }
+    try {
+        const e = JSON.parse(raw);
+        if (e.timestamp) {
+            return e;
+        }
+    }
+    catch (error) {
+    }
+    try {
+        const e = JSON.parse(strFromU8(unzlibSync(strToU8(raw, true))));
+        if (e.v === MARK) {
+            return e;
+        }
+        throw new Error(`These events were packed with packer ${e.v} which is incompatible with current packer ${MARK}.`);
+    }
+    catch (error) {
+        console.error(error);
+        throw new Error('Unknown data format.');
+    }
+};
+
+export { unpack };

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

@@ -0,0 +1,178 @@
+class StackFrame {
+    constructor(obj) {
+        this.fileName = obj.fileName || '';
+        this.functionName = obj.functionName || '';
+        this.lineNumber = obj.lineNumber;
+        this.columnNumber = obj.columnNumber;
+    }
+    toString() {
+        const lineNumber = this.lineNumber || '';
+        const columnNumber = this.columnNumber || '';
+        if (this.functionName) {
+            return (this.functionName +
+                ' (' +
+                this.fileName +
+                ':' +
+                lineNumber +
+                ':' +
+                columnNumber +
+                ')');
+        }
+        return this.fileName + ':' + lineNumber + ':' + columnNumber;
+    }
+}
+const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
+const CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
+const SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
+const ErrorStackParser = {
+    parse: function (error) {
+        if (!error) {
+            return [];
+        }
+        if (typeof error.stacktrace !== 'undefined' ||
+            typeof error['opera#sourceloc'] !== 'undefined') {
+            return this.parseOpera(error);
+        }
+        else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
+            return this.parseV8OrIE(error);
+        }
+        else if (error.stack) {
+            return this.parseFFOrSafari(error);
+        }
+        else {
+            throw new Error('Cannot parse given Error object');
+        }
+    },
+    extractLocation: function (urlLike) {
+        if (urlLike.indexOf(':') === -1) {
+            return [urlLike];
+        }
+        const regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
+        const parts = regExp.exec(urlLike.replace(/[()]/g, ''));
+        if (!parts)
+            throw new Error(`Cannot parse given url: ${urlLike}`);
+        return [parts[1], parts[2] || undefined, parts[3] || undefined];
+    },
+    parseV8OrIE: function (error) {
+        const filtered = error.stack.split('\n').filter(function (line) {
+            return !!line.match(CHROME_IE_STACK_REGEXP);
+        }, this);
+        return filtered.map(function (line) {
+            if (line.indexOf('(eval ') > -1) {
+                line = line
+                    .replace(/eval code/g, 'eval')
+                    .replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
+            }
+            let sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
+            const location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
+            sanitizedLine = location
+                ? sanitizedLine.replace(location[0], '')
+                : sanitizedLine;
+            const tokens = sanitizedLine.split(/\s+/).slice(1);
+            const locationParts = this.extractLocation(location ? location[1] : tokens.pop());
+            const functionName = tokens.join(' ') || undefined;
+            const fileName = ['eval', '<anonymous>'].indexOf(locationParts[0]) > -1
+                ? undefined
+                : locationParts[0];
+            return new StackFrame({
+                functionName,
+                fileName,
+                lineNumber: locationParts[1],
+                columnNumber: locationParts[2],
+            });
+        }, this);
+    },
+    parseFFOrSafari: function (error) {
+        const filtered = error.stack.split('\n').filter(function (line) {
+            return !line.match(SAFARI_NATIVE_CODE_REGEXP);
+        }, this);
+        return filtered.map(function (line) {
+            if (line.indexOf(' > eval') > -1) {
+                line = line.replace(/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g, ':$1');
+            }
+            if (line.indexOf('@') === -1 && line.indexOf(':') === -1) {
+                return new StackFrame({
+                    functionName: line,
+                });
+            }
+            else {
+                const functionNameRegex = /((.*".+"[^@]*)?[^@]*)(?:@)/;
+                const matches = line.match(functionNameRegex);
+                const functionName = matches && matches[1] ? matches[1] : undefined;
+                const locationParts = this.extractLocation(line.replace(functionNameRegex, ''));
+                return new StackFrame({
+                    functionName,
+                    fileName: locationParts[0],
+                    lineNumber: locationParts[1],
+                    columnNumber: locationParts[2],
+                });
+            }
+        }, this);
+    },
+    parseOpera: function (e) {
+        if (!e.stacktrace ||
+            (e.message.indexOf('\n') > -1 &&
+                e.message.split('\n').length > e.stacktrace.split('\n').length)) {
+            return this.parseOpera9(e);
+        }
+        else if (!e.stack) {
+            return this.parseOpera10(e);
+        }
+        else {
+            return this.parseOpera11(e);
+        }
+    },
+    parseOpera9: function (e) {
+        const lineRE = /Line (\d+).*script (?:in )?(\S+)/i;
+        const lines = e.message.split('\n');
+        const result = [];
+        for (let i = 2, len = lines.length; i < len; i += 2) {
+            const match = lineRE.exec(lines[i]);
+            if (match) {
+                result.push(new StackFrame({
+                    fileName: match[2],
+                    lineNumber: parseFloat(match[1]),
+                }));
+            }
+        }
+        return result;
+    },
+    parseOpera10: function (e) {
+        const lineRE = /Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i;
+        const lines = e.stacktrace.split('\n');
+        const result = [];
+        for (let i = 0, len = lines.length; i < len; i += 2) {
+            const match = lineRE.exec(lines[i]);
+            if (match) {
+                result.push(new StackFrame({
+                    functionName: match[3] || undefined,
+                    fileName: match[2],
+                    lineNumber: parseFloat(match[1]),
+                }));
+            }
+        }
+        return result;
+    },
+    parseOpera11: function (error) {
+        const filtered = error.stack.split('\n').filter(function (line) {
+            return (!!line.match(FIREFOX_SAFARI_STACK_REGEXP) &&
+                !line.match(/^Error created at/));
+        }, this);
+        return filtered.map(function (line) {
+            const tokens = line.split('@');
+            const locationParts = this.extractLocation(tokens.pop());
+            const functionCall = tokens.shift() || '';
+            const functionName = functionCall
+                .replace(/<anonymous function(: (\w+))?>/, '$2')
+                .replace(/\([^)]*\)/g, '') || undefined;
+            return new StackFrame({
+                functionName,
+                fileName: locationParts[0],
+                lineNumber: locationParts[1],
+                columnNumber: locationParts[2],
+            });
+        }, this);
+    },
+};
+
+export { ErrorStackParser, StackFrame };

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

@@ -0,0 +1,115 @@
+import { patch } from '../../../utils.js';
+import { ErrorStackParser } from './error-stack-parser.js';
+import { stringify } from './stringify.js';
+
+const defaultLogOptions = {
+    level: [
+        'assert',
+        'clear',
+        'count',
+        'countReset',
+        'debug',
+        'dir',
+        'dirxml',
+        'error',
+        'group',
+        'groupCollapsed',
+        'groupEnd',
+        'info',
+        'log',
+        'table',
+        'time',
+        'timeEnd',
+        'timeLog',
+        'trace',
+        'warn',
+    ],
+    lengthThreshold: 1000,
+    logger: 'console',
+};
+function initLogObserver(cb, win, logOptions) {
+    const loggerType = logOptions.logger;
+    if (!loggerType) {
+        return () => { };
+    }
+    let logger;
+    if (typeof loggerType === 'string') {
+        logger = win[loggerType];
+    }
+    else {
+        logger = loggerType;
+    }
+    let logCount = 0;
+    const cancelHandlers = [];
+    if (logOptions.level.includes('error')) {
+        if (window) {
+            const errorHandler = (event) => {
+                const { message, error } = event;
+                const trace = ErrorStackParser.parse(error).map((stackFrame) => stackFrame.toString());
+                const payload = [stringify(message, logOptions.stringifyOptions)];
+                cb({
+                    level: 'error',
+                    trace,
+                    payload,
+                });
+            };
+            window.addEventListener('error', errorHandler);
+            cancelHandlers.push(() => {
+                if (window)
+                    window.removeEventListener('error', errorHandler);
+            });
+        }
+    }
+    for (const levelType of logOptions.level) {
+        cancelHandlers.push(replace(logger, levelType));
+    }
+    return () => {
+        cancelHandlers.forEach((h) => h());
+    };
+    function replace(_logger, level) {
+        if (!_logger[level]) {
+            return () => { };
+        }
+        return patch(_logger, level, (original) => {
+            return (...args) => {
+                original.apply(this, args);
+                try {
+                    const trace = ErrorStackParser.parse(new Error())
+                        .map((stackFrame) => stackFrame.toString())
+                        .splice(1);
+                    const payload = args.map((s) => stringify(s, logOptions.stringifyOptions));
+                    logCount++;
+                    if (logCount < logOptions.lengthThreshold) {
+                        cb({
+                            level,
+                            trace,
+                            payload,
+                        });
+                    }
+                    else if (logCount === logOptions.lengthThreshold) {
+                        cb({
+                            level: 'warn',
+                            trace: [],
+                            payload: [
+                                stringify('The number of log records reached the threshold.'),
+                            ],
+                        });
+                    }
+                }
+                catch (error) {
+                    original('rrweb logger error:', error, ...args);
+                }
+            };
+        });
+    }
+}
+const PLUGIN_NAME = 'rrweb/console@1';
+const getRecordConsolePlugin = (options) => ({
+    name: PLUGIN_NAME,
+    observer: initLogObserver,
+    options: options
+        ? Object.assign({}, defaultLogOptions, options)
+        : defaultLogOptions,
+});
+
+export { PLUGIN_NAME, getRecordConsolePlugin };

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

@@ -0,0 +1,128 @@
+function pathToSelector(node) {
+    if (!node || !node.outerHTML) {
+        return '';
+    }
+    let path = '';
+    while (node.parentElement) {
+        let name = node.localName;
+        if (!name) {
+            break;
+        }
+        name = name.toLowerCase();
+        const parent = node.parentElement;
+        const domSiblings = [];
+        if (parent.children && parent.children.length > 0) {
+            for (let i = 0; i < parent.children.length; i++) {
+                const sibling = parent.children[i];
+                if (sibling.localName && sibling.localName.toLowerCase) {
+                    if (sibling.localName.toLowerCase() === name) {
+                        domSiblings.push(sibling);
+                    }
+                }
+            }
+        }
+        if (domSiblings.length > 1) {
+            name += ':eq(' + domSiblings.indexOf(node) + ')';
+        }
+        path = name + (path ? '>' + path : '');
+        node = parent;
+    }
+    return path;
+}
+function isObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
+function isObjTooDeep(obj, limit) {
+    if (limit === 0) {
+        return true;
+    }
+    const keys = Object.keys(obj);
+    for (const key of keys) {
+        if (isObject(obj[key]) && isObjTooDeep(obj[key], limit - 1)) {
+            return true;
+        }
+    }
+    return false;
+}
+function stringify(obj, stringifyOptions) {
+    const options = {
+        numOfKeysLimit: 50,
+        depthOfLimit: 4,
+    };
+    Object.assign(options, stringifyOptions);
+    const stack = [];
+    const keys = [];
+    return JSON.stringify(obj, function (key, value) {
+        if (stack.length > 0) {
+            const thisPos = stack.indexOf(this);
+            ~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
+            ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
+            if (~stack.indexOf(value)) {
+                if (stack[0] === value) {
+                    value = '[Circular ~]';
+                }
+                else {
+                    value =
+                        '[Circular ~.' +
+                            keys.slice(0, stack.indexOf(value)).join('.') +
+                            ']';
+                }
+            }
+        }
+        else {
+            stack.push(value);
+        }
+        if (value === null || value === undefined) {
+            return value;
+        }
+        if (shouldIgnore(value)) {
+            return toString(value);
+        }
+        if (value instanceof Event) {
+            const eventResult = {};
+            for (const eventKey in value) {
+                const eventValue = value[eventKey];
+                if (Array.isArray(eventValue)) {
+                    eventResult[eventKey] = pathToSelector(eventValue.length ? eventValue[0] : null);
+                }
+                else {
+                    eventResult[eventKey] = eventValue;
+                }
+            }
+            return eventResult;
+        }
+        else if (value instanceof Node) {
+            if (value instanceof HTMLElement) {
+                return value ? value.outerHTML : '';
+            }
+            return value.nodeName;
+        }
+        else if (value instanceof Error) {
+            return value.stack
+                ? value.stack + '\nEnd of stack for Error object'
+                : value.name + ': ' + value.message;
+        }
+        return value;
+    });
+    function shouldIgnore(_obj) {
+        if (isObject(_obj) && Object.keys(_obj).length > options.numOfKeysLimit) {
+            return true;
+        }
+        if (typeof _obj === 'function') {
+            return true;
+        }
+        if (isObject(_obj) && isObjTooDeep(_obj, options.depthOfLimit)) {
+            return true;
+        }
+        return false;
+    }
+    function toString(_obj) {
+        let str = _obj.toString();
+        if (options.stringLengthLimit && str.length > options.stringLengthLimit) {
+            str = `${str.slice(0, options.stringLengthLimit)}...`;
+        }
+        return str;
+    }
+}
+
+export { stringify };

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

@@ -0,0 +1,94 @@
+import { PLUGIN_NAME } from '../record/index.js';
+import { EventType, IncrementalSource } from '../../../types.js';
+
+const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
+const defaultLogConfig = {
+    level: [
+        'assert',
+        'clear',
+        'count',
+        'countReset',
+        'debug',
+        'dir',
+        'dirxml',
+        'error',
+        'group',
+        'groupCollapsed',
+        'groupEnd',
+        'info',
+        'log',
+        'table',
+        'time',
+        'timeEnd',
+        'timeLog',
+        'trace',
+        'warn',
+    ],
+    replayLogger: undefined,
+};
+class LogReplayPlugin {
+    constructor(config) {
+        this.config = Object.assign(defaultLogConfig, config);
+    }
+    getConsoleLogger() {
+        const replayLogger = {};
+        for (const level of this.config.level) {
+            if (level === 'trace') {
+                replayLogger[level] = (data) => {
+                    const logger = console.log[ORIGINAL_ATTRIBUTE_NAME]
+                        ? console.log[ORIGINAL_ATTRIBUTE_NAME]
+                        : console.log;
+                    logger(...data.payload.map((s) => JSON.parse(s)), this.formatMessage(data));
+                };
+            }
+            else {
+                replayLogger[level] = (data) => {
+                    const logger = console[level][ORIGINAL_ATTRIBUTE_NAME]
+                        ? console[level][ORIGINAL_ATTRIBUTE_NAME]
+                        : console[level];
+                    logger(...data.payload.map((s) => JSON.parse(s)), this.formatMessage(data));
+                };
+            }
+        }
+        return replayLogger;
+    }
+    formatMessage(data) {
+        if (data.trace.length === 0) {
+            return '';
+        }
+        const stackPrefix = '\n\tat ';
+        let result = stackPrefix;
+        result += data.trace.join(stackPrefix);
+        return result;
+    }
+}
+const getReplayConsolePlugin = (options) => {
+    const replayLogger = (options === null || options === void 0 ? void 0 : options.replayLogger) || new LogReplayPlugin(options).getConsoleLogger();
+    return {
+        handler(event, _isSync, context) {
+            let 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,22 @@
+const defaultOptions = {
+    key: '_sid',
+};
+const PLUGIN_NAME = 'rrweb/sequential-id@1';
+const getRecordSequentialIdPlugin = (options) => {
+    const _options = options
+        ? Object.assign({}, defaultOptions, options)
+        : defaultOptions;
+    let id = 0;
+    return {
+        name: PLUGIN_NAME,
+        eventProcessor(event) {
+            Object.assign(event, {
+                [_options.key]: ++id,
+            });
+            return event;
+        },
+        options: _options,
+    };
+};
+
+export { PLUGIN_NAME, getRecordSequentialIdPlugin };

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

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

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

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