@highlight-run/rrweb 1.2.0 → 2.0.1

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

@@ -0,0 +1,78 @@
+import { __values, __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../../types.js';
+import { patch, isBlocked, hookSetter } from '../../../utils.js';
+
+function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
+    var e_1, _a;
+    var handlers = [];
+    var props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
+    var _loop_1 = function (prop) {
+        try {
+            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
+                return "continue";
+            }
+            var restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
+                return function () {
+                    var _this = this;
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        setTimeout(function () {
+                            var recordArgs = __spreadArray([], __read(args), false);
+                            if (prop === 'drawImage') {
+                                if (recordArgs[0] &&
+                                    recordArgs[0] instanceof HTMLCanvasElement) {
+                                    var canvas = recordArgs[0];
+                                    var ctx = canvas.getContext('2d');
+                                    var imgd = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, canvas.width, canvas.height);
+                                    var pix = imgd === null || imgd === void 0 ? void 0 : imgd.data;
+                                    recordArgs[0] = JSON.stringify(pix);
+                                }
+                            }
+                            cb(_this.canvas, {
+                                type: CanvasContext['2D'],
+                                property: prop,
+                                args: recordArgs,
+                            });
+                        }, 0);
+                    }
+                    return original.apply(this, args);
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_b) {
+            var hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
+                set: function (v) {
+                    cb(this.canvas, {
+                        type: CanvasContext['2D'],
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    };
+    try {
+        for (var props2D_1 = __values(props2D), props2D_1_1 = props2D_1.next(); !props2D_1_1.done; props2D_1_1 = props2D_1.next()) {
+            var prop = props2D_1_1.value;
+            _loop_1(prop);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (props2D_1_1 && !props2D_1_1.done && (_a = props2D_1.return)) _a.call(props2D_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return function () {
+        handlers.forEach(function (h) { return h(); });
+    };
+}
+
+export default initCanvas2DMutationObserver;

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

@@ -0,0 +1,93 @@
+import { __rest } from '../../../../ext/tslib/tslib.es6.js';
+import initCanvas2DMutationObserver from './2d.js';
+import initCanvasContextObserver from './canvas.js';
+import initCanvasWebGLMutationObserver from './webgl.js';
+
+var CanvasManager = (function () {
+    function CanvasManager(options) {
+        this.pendingCanvasMutations = new Map();
+        this.rafStamps = { latestId: 0, invokeId: null };
+        this.frozen = false;
+        this.locked = false;
+        this.processMutation = function (target, mutation) {
+            var newFrame = this.rafStamps.invokeId &&
+                this.rafStamps.latestId !== this.rafStamps.invokeId;
+            if (newFrame || !this.rafStamps.invokeId)
+                this.rafStamps.invokeId = this.rafStamps.latestId;
+            if (!this.pendingCanvasMutations.has(target)) {
+                this.pendingCanvasMutations.set(target, []);
+            }
+            this.pendingCanvasMutations.get(target).push(mutation);
+        };
+        this.mutationCb = options.mutationCb;
+        this.mirror = options.mirror;
+        if (options.recordCanvas === true)
+            this.initCanvasMutationObserver(options.win, options.blockClass);
+    }
+    CanvasManager.prototype.reset = function () {
+        this.pendingCanvasMutations.clear();
+        this.resetObservers && this.resetObservers();
+    };
+    CanvasManager.prototype.freeze = function () {
+        this.frozen = true;
+    };
+    CanvasManager.prototype.unfreeze = function () {
+        this.frozen = false;
+    };
+    CanvasManager.prototype.lock = function () {
+        this.locked = true;
+    };
+    CanvasManager.prototype.unlock = function () {
+        this.locked = false;
+    };
+    CanvasManager.prototype.initCanvasMutationObserver = function (win, blockClass) {
+        this.startRAFTimestamping();
+        this.startPendingCanvasMutationFlusher();
+        var canvasContextReset = initCanvasContextObserver(win, blockClass);
+        var canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        var canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        this.resetObservers = function () {
+            canvasContextReset();
+            canvas2DReset();
+            canvasWebGL1and2Reset();
+        };
+    };
+    CanvasManager.prototype.startPendingCanvasMutationFlusher = function () {
+        var _this = this;
+        requestAnimationFrame(function () { return _this.flushPendingCanvasMutations(); });
+    };
+    CanvasManager.prototype.startRAFTimestamping = function () {
+        var _this = this;
+        var setLatestRAFTimestamp = function (timestamp) {
+            _this.rafStamps.latestId = timestamp;
+            requestAnimationFrame(setLatestRAFTimestamp);
+        };
+        requestAnimationFrame(setLatestRAFTimestamp);
+    };
+    CanvasManager.prototype.flushPendingCanvasMutations = function () {
+        var _this = this;
+        this.pendingCanvasMutations.forEach(function (values, canvas) {
+            var id = _this.mirror.getId(canvas);
+            _this.flushPendingCanvasMutationFor(canvas, id);
+        });
+        requestAnimationFrame(function () { return _this.flushPendingCanvasMutations(); });
+    };
+    CanvasManager.prototype.flushPendingCanvasMutationFor = function (canvas, id) {
+        if (this.frozen || this.locked) {
+            return;
+        }
+        var valuesWithType = this.pendingCanvasMutations.get(canvas);
+        if (!valuesWithType || id === -1)
+            return;
+        var values = valuesWithType.map(function (value) {
+            value.type; var rest = __rest(value, ["type"]);
+            return rest;
+        });
+        var type = valuesWithType[0].type;
+        this.mutationCb({ id: id, type: type, commands: values });
+        this.pendingCanvasMutations.delete(canvas);
+    };
+    return CanvasManager;
+}());
+
+export { CanvasManager };

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

@@ -0,0 +1,30 @@
+import { __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
+import { patch, isBlocked } from '../../../utils.js';
+
+function initCanvasContextObserver(win, blockClass) {
+    var handlers = [];
+    try {
+        var restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
+            return function (contextType) {
+                var args = [];
+                for (var _i = 1; _i < arguments.length; _i++) {
+                    args[_i - 1] = arguments[_i];
+                }
+                if (!isBlocked(this, blockClass)) {
+                    if (!('__context' in this))
+                        this.__context = contextType;
+                }
+                return original.apply(this, __spreadArray([contextType], __read(args), false));
+            };
+        });
+        handlers.push(restoreHandler);
+    }
+    catch (_a) {
+        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
+    }
+    return function () {
+        handlers.forEach(function (h) { return h(); });
+    };
+}
+
+export default initCanvasContextObserver;

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

@@ -0,0 +1,116 @@
+import { __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
+import { encode } from '../../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+
+var webGLVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    var contextMap = webGLVarMap.get(ctx);
+    if (!contextMap) {
+        contextMap = new Map();
+        webGLVarMap.set(ctx, contextMap);
+    }
+    if (!contextMap.has(ctor)) {
+        contextMap.set(ctor, []);
+    }
+    return contextMap.get(ctor);
+}
+var saveWebGLVar = function (value, win, ctx) {
+    if (!value ||
+        !(isInstanceOfWebGLObject(value, win) || typeof value === 'object'))
+        return;
+    var name = value.constructor.name;
+    var list = variableListFor(ctx, name);
+    var index = list.indexOf(value);
+    if (index === -1) {
+        index = list.length;
+        list.push(value);
+    }
+    return index;
+};
+function serializeArg(value, win, ctx) {
+    if (value instanceof Array) {
+        return value.map(function (arg) { return serializeArg(arg, win, ctx); });
+    }
+    else if (value === null) {
+        return value;
+    }
+    else if (value instanceof Float32Array ||
+        value instanceof Float64Array ||
+        value instanceof Int32Array ||
+        value instanceof Uint32Array ||
+        value instanceof Uint8Array ||
+        value instanceof Uint16Array ||
+        value instanceof Int16Array ||
+        value instanceof Int8Array ||
+        value instanceof Uint8ClampedArray) {
+        var name_1 = value.constructor.name;
+        return {
+            rr_type: name_1,
+            args: [Object.values(value)],
+        };
+    }
+    else if (value instanceof ArrayBuffer) {
+        var name_2 = value.constructor.name;
+        var base64 = encode(value);
+        return {
+            rr_type: name_2,
+            base64: base64,
+        };
+    }
+    else if (value instanceof DataView) {
+        var name_3 = value.constructor.name;
+        return {
+            rr_type: name_3,
+            args: [
+                serializeArg(value.buffer, win, ctx),
+                value.byteOffset,
+                value.byteLength,
+            ],
+        };
+    }
+    else if (value instanceof HTMLImageElement) {
+        var name_4 = value.constructor.name;
+        var src = value.src;
+        return {
+            rr_type: name_4,
+            src: src,
+        };
+    }
+    else if (value instanceof ImageData) {
+        var name_5 = value.constructor.name;
+        return {
+            rr_type: name_5,
+            args: [serializeArg(value.data, win, ctx), value.width, value.height],
+        };
+    }
+    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
+        var name_6 = value.constructor.name;
+        var index = saveWebGLVar(value, win, ctx);
+        return {
+            rr_type: name_6,
+            index: index,
+        };
+    }
+    return value;
+}
+var serializeArgs = function (args, win, ctx) {
+    return __spreadArray([], __read(args), false).map(function (arg) { return serializeArg(arg, win, ctx); });
+};
+var isInstanceOfWebGLObject = function (value, win) {
+    var webGLConstructorNames = [
+        'WebGLActiveInfo',
+        'WebGLBuffer',
+        'WebGLFramebuffer',
+        'WebGLProgram',
+        'WebGLRenderbuffer',
+        'WebGLShader',
+        'WebGLShaderPrecisionFormat',
+        'WebGLTexture',
+        'WebGLUniformLocation',
+        'WebGLVertexArrayObject',
+        'WebGLVertexArrayObjectOES',
+    ];
+    var supportedWebGLConstructorNames = webGLConstructorNames.filter(function (name) { return typeof win[name] === 'function'; });
+    return Boolean(supportedWebGLConstructorNames.find(function (name) { return value instanceof win[name]; }));
+};
+
+export { isInstanceOfWebGLObject, saveWebGLVar, serializeArg, serializeArgs, variableListFor };

package/es/rrweb/packages/rrweb/src/record/observers/canvas/webgl.js

@@ -0,0 +1,78 @@
+import { __spreadArray, __read, __values } from '../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../../types.js';
+import { patch, isBlocked, hookSetter } from '../../../utils.js';
+import { saveWebGLVar, serializeArgs } from './serialize-args.js';
+
+function patchGLPrototype(prototype, type, cb, blockClass, mirror, win) {
+    var e_1, _a;
+    var handlers = [];
+    var props = Object.getOwnPropertyNames(prototype);
+    var _loop_1 = function (prop) {
+        try {
+            if (typeof prototype[prop] !== 'function') {
+                return "continue";
+            }
+            var restoreHandler = patch(prototype, prop, function (original) {
+                return function () {
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    var result = original.apply(this, args);
+                    saveWebGLVar(result, win, prototype);
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        var id = mirror.getId(this.canvas);
+                        var recordArgs = serializeArgs(__spreadArray([], __read(args), false), win, prototype);
+                        var mutation = {
+                            type: type,
+                            property: prop,
+                            args: recordArgs,
+                        };
+                        cb(this.canvas, mutation);
+                    }
+                    return result;
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_b) {
+            var hookHandler = hookSetter(prototype, prop, {
+                set: function (v) {
+                    cb(this.canvas, {
+                        type: type,
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    };
+    try {
+        for (var props_1 = __values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
+            var prop = props_1_1.value;
+            _loop_1(prop);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (props_1_1 && !props_1_1.done && (_a = props_1.return)) _a.call(props_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return handlers;
+}
+function initCanvasWebGLMutationObserver(cb, win, blockClass, mirror) {
+    var handlers = [];
+    handlers.push.apply(handlers, __spreadArray([], __read(patchGLPrototype(win.WebGLRenderingContext.prototype, CanvasContext.WebGL, cb, blockClass, mirror, win)), false));
+    if (typeof win.WebGL2RenderingContext !== 'undefined') {
+        handlers.push.apply(handlers, __spreadArray([], __read(patchGLPrototype(win.WebGL2RenderingContext.prototype, CanvasContext.WebGL2, cb, blockClass, mirror, win)), false));
+    }
+    return function () {
+        handlers.forEach(function (h) { return h(); });
+    };
+}
+
+export default initCanvasWebGLMutationObserver;

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

@@ -0,0 +1,45 @@
+import { __assign } from '../../ext/tslib/tslib.es6.js';
+import { initMutationObserver, initScrollObserver } from './observer.js';
+import { patch } from '../utils.js';
+
+var ShadowDomManager = (function () {
+    function ShadowDomManager(options) {
+        this.restorePatches = [];
+        this.mutationCb = options.mutationCb;
+        this.scrollCb = options.scrollCb;
+        this.bypassOptions = options.bypassOptions;
+        this.mirror = options.mirror;
+        var manager = this;
+        this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
+            return function () {
+                var shadowRoot = original.apply(this, arguments);
+                if (this.shadowRoot)
+                    manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
+                return shadowRoot;
+            };
+        }));
+    }
+    ShadowDomManager.prototype.addShadowRoot = function (shadowRoot, doc) {
+        initMutationObserver(__assign(__assign({}, this.bypassOptions), { doc: doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
+        initScrollObserver(__assign(__assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
+    };
+    ShadowDomManager.prototype.observeAttachShadow = function (iframeElement) {
+        if (iframeElement.contentWindow) {
+            var manager_1 = this;
+            this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
+                return function () {
+                    var shadowRoot = original.apply(this, arguments);
+                    if (this.shadowRoot)
+                        manager_1.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
+                    return shadowRoot;
+                };
+            }));
+        }
+    };
+    ShadowDomManager.prototype.reset = function () {
+        this.restorePatches.forEach(function (restorePatch) { return restorePatch(); });
+    };
+    return ShadowDomManager;
+}());
+
+export { ShadowDomManager };

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

@@ -0,0 +1,25 @@
+function canvasMutation(_a) {
+    var event = _a.event, mutation = _a.mutation, target = _a.target, imageMap = _a.imageMap, errorHandler = _a.errorHandler;
+    try {
+        var ctx = target.getContext('2d');
+        if (mutation.setter) {
+            ctx[mutation.property] = mutation.args[0];
+            return;
+        }
+        var original = ctx[mutation.property];
+        if (mutation.property === 'drawImage' &&
+            typeof mutation.args[0] === 'string') {
+            var image = imageMap.get(event);
+            mutation.args[0] = image;
+            original.apply(ctx, mutation.args);
+        }
+        else {
+            original.apply(ctx, mutation.args);
+        }
+    }
+    catch (error) {
+        errorHandler(mutation, error);
+    }
+}
+
+export default canvasMutation;

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

@@ -0,0 +1,35 @@
+import { CanvasContext } from '../../types.js';
+import webglMutation from './webgl.js';
+import canvasMutation$1 from './2d.js';
+
+function canvasMutation(_a) {
+    var event = _a.event, mutation = _a.mutation, target = _a.target, imageMap = _a.imageMap, errorHandler = _a.errorHandler;
+    try {
+        var mutations = 'commands' in mutation ? mutation.commands : [mutation];
+        if ([CanvasContext.WebGL, CanvasContext.WebGL2].includes(mutation.type)) {
+            return mutations.forEach(function (command) {
+                webglMutation({
+                    mutation: command,
+                    type: mutation.type,
+                    target: target,
+                    imageMap: imageMap,
+                    errorHandler: errorHandler,
+                });
+            });
+        }
+        return mutations.forEach(function (command) {
+            canvasMutation$1({
+                event: event,
+                mutation: command,
+                target: target,
+                imageMap: imageMap,
+                errorHandler: errorHandler,
+            });
+        });
+    }
+    catch (error) {
+        errorHandler(mutation, error);
+    }
+}
+
+export default canvasMutation;

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

@@ -0,0 +1,124 @@
+import { __spreadArray, __read } from '../../../ext/tslib/tslib.es6.js';
+import { decode } from '../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+import { CanvasContext } from '../../types.js';
+
+var webGLVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    var contextMap = webGLVarMap.get(ctx);
+    if (!contextMap) {
+        contextMap = new Map();
+        webGLVarMap.set(ctx, contextMap);
+    }
+    if (!contextMap.has(ctor)) {
+        contextMap.set(ctor, []);
+    }
+    return contextMap.get(ctor);
+}
+function getContext(target, type) {
+    try {
+        if (type === CanvasContext.WebGL) {
+            return (target.getContext('webgl') || target.getContext('experimental-webgl'));
+        }
+        return target.getContext('webgl2');
+    }
+    catch (e) {
+        return null;
+    }
+}
+var WebGLVariableConstructorsNames = [
+    'WebGLActiveInfo',
+    'WebGLBuffer',
+    'WebGLFramebuffer',
+    'WebGLProgram',
+    'WebGLRenderbuffer',
+    'WebGLShader',
+    'WebGLShaderPrecisionFormat',
+    'WebGLTexture',
+    'WebGLUniformLocation',
+    'WebGLVertexArrayObject',
+];
+function saveToWebGLVarMap(ctx, result) {
+    if (!(result === null || result === void 0 ? void 0 : result.constructor))
+        return;
+    var name = result.constructor.name;
+    if (!WebGLVariableConstructorsNames.includes(name))
+        return;
+    var variables = variableListFor(ctx, name);
+    if (!variables.includes(result))
+        variables.push(result);
+}
+function deserializeArg(imageMap, ctx) {
+    return function (arg) {
+        if (arg && typeof arg === 'object' && 'rr_type' in arg) {
+            if ('index' in arg) {
+                var name_1 = arg.rr_type, index = arg.index;
+                return variableListFor(ctx, name_1)[index];
+            }
+            else if ('args' in arg) {
+                var name_2 = arg.rr_type, args = arg.args;
+                var ctor = window[name_2];
+                return new (ctor.bind.apply(ctor, __spreadArray([void 0], __read(args.map(deserializeArg(imageMap, ctx))), false)))();
+            }
+            else if ('base64' in arg) {
+                return decode(arg.base64);
+            }
+            else if ('src' in arg) {
+                var image = imageMap.get(arg.src);
+                if (image) {
+                    return image;
+                }
+                else {
+                    var image_1 = new Image();
+                    image_1.src = arg.src;
+                    imageMap.set(arg.src, image_1);
+                    return image_1;
+                }
+            }
+        }
+        else if (Array.isArray(arg)) {
+            return arg.map(deserializeArg(imageMap, ctx));
+        }
+        return arg;
+    };
+}
+function webglMutation(_a) {
+    var mutation = _a.mutation, target = _a.target, type = _a.type, imageMap = _a.imageMap, errorHandler = _a.errorHandler;
+    try {
+        var ctx = getContext(target, type);
+        if (!ctx)
+            return;
+        if (mutation.setter) {
+            ctx[mutation.property] = mutation.args[0];
+            return;
+        }
+        var original = ctx[mutation.property];
+        var args = mutation.args.map(deserializeArg(imageMap, ctx));
+        var result = original.apply(ctx, args);
+        saveToWebGLVarMap(ctx, result);
+        var debugMode = false;
+        if (debugMode) {
+            if (mutation.property === 'compileShader') {
+                if (!ctx.getShaderParameter(args[0], ctx.COMPILE_STATUS))
+                    console.warn('something went wrong in replay', ctx.getShaderInfoLog(args[0]));
+            }
+            else if (mutation.property === 'linkProgram') {
+                ctx.validateProgram(args[0]);
+                if (!ctx.getProgramParameter(args[0], ctx.LINK_STATUS))
+                    console.warn('something went wrong in replay', ctx.getProgramInfoLog(args[0]));
+            }
+            var webglError = ctx.getError();
+            if (webglError !== ctx.NO_ERROR) {
+                console.warn.apply(console, __spreadArray(['WEBGL ERROR',
+                    webglError,
+                    'on command:',
+                    mutation.property], __read(args), false));
+            }
+        }
+    }
+    catch (error) {
+        errorHandler(mutation, error);
+    }
+}
+
+export default webglMutation;
+export { deserializeArg, variableListFor };