@highlight-run/rrweb 1.2.1 → 2.0.4

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

@@ -0,0 +1,172 @@
+import { __rest, __awaiter } from './../../../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../../types.js';
+import initCanvas2DMutationObserver from './2d.js';
+import initCanvasContextObserver from './canvas.js';
+import initCanvasWebGLMutationObserver from './webgl.js';
+import WorkerFactory from '../../../../../../_virtual/image-bitmap-data-url-worker.js';
+
+class CanvasManager {
+    constructor(options) {
+        this.pendingCanvasMutations = new Map();
+        this.rafStamps = { latestId: 0, invokeId: null };
+        this.frozen = false;
+        this.locked = false;
+        this.processMutation = function (target, mutation) {
+            const 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);
+        };
+        const { sampling = 'all', win, blockClass, recordCanvas } = options;
+        this.mutationCb = options.mutationCb;
+        this.mirror = options.mirror;
+        if (recordCanvas && sampling === 'all')
+            this.initCanvasMutationObserver(win, blockClass);
+        if (recordCanvas && typeof sampling === 'number')
+            this.initCanvasFPSObserver(sampling, win, blockClass);
+    }
+    reset() {
+        this.pendingCanvasMutations.clear();
+        this.resetObservers && this.resetObservers();
+    }
+    freeze() {
+        this.frozen = true;
+    }
+    unfreeze() {
+        this.frozen = false;
+    }
+    lock() {
+        this.locked = true;
+    }
+    unlock() {
+        this.locked = false;
+    }
+    initCanvasFPSObserver(fps, win, blockClass) {
+        const canvasContextReset = initCanvasContextObserver(win, blockClass);
+        const snapshotInProgressMap = new Map();
+        const worker = new WorkerFactory();
+        worker.onmessage = (e) => {
+            const { id } = e.data;
+            snapshotInProgressMap.set(id, false);
+            if (!('base64' in e.data))
+                return;
+            const { base64, type, width, height } = e.data;
+            this.mutationCb({
+                id,
+                type: CanvasContext['2D'],
+                commands: [
+                    {
+                        property: 'clearRect',
+                        args: [0, 0, width, height],
+                    },
+                    {
+                        property: 'drawImage',
+                        args: [
+                            {
+                                rr_type: 'ImageBitmap',
+                                args: [
+                                    {
+                                        rr_type: 'Blob',
+                                        data: [{ rr_type: 'ArrayBuffer', base64 }],
+                                        type,
+                                    },
+                                ],
+                            },
+                            0,
+                            0,
+                        ],
+                    },
+                ],
+            });
+        };
+        const timeBetweenSnapshots = 1000 / fps;
+        let lastSnapshotTime = 0;
+        let rafId;
+        const takeCanvasSnapshots = (timestamp) => {
+            if (lastSnapshotTime &&
+                timestamp - lastSnapshotTime < timeBetweenSnapshots) {
+                rafId = requestAnimationFrame(takeCanvasSnapshots);
+                return;
+            }
+            lastSnapshotTime = timestamp;
+            win.document
+                .querySelectorAll(`canvas:not(.${blockClass} *)`)
+                .forEach((canvas) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const id = this.mirror.getId(canvas);
+                if (snapshotInProgressMap.get(id))
+                    return;
+                snapshotInProgressMap.set(id, true);
+                if (['webgl', 'webgl2'].includes(canvas.__context)) {
+                    const context = canvas.getContext(canvas.__context);
+                    if (((_a = context === null || context === void 0 ? void 0 : context.getContextAttributes()) === null || _a === void 0 ? void 0 : _a.preserveDrawingBuffer) === false) {
+                        context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
+                    }
+                }
+                const bitmap = yield createImageBitmap(canvas);
+                worker.postMessage({
+                    id,
+                    bitmap,
+                    width: canvas.width,
+                    height: canvas.height,
+                }, [bitmap]);
+            }));
+            rafId = requestAnimationFrame(takeCanvasSnapshots);
+        };
+        rafId = requestAnimationFrame(takeCanvasSnapshots);
+        this.resetObservers = () => {
+            canvasContextReset();
+            cancelAnimationFrame(rafId);
+        };
+    }
+    initCanvasMutationObserver(win, blockClass) {
+        this.startRAFTimestamping();
+        this.startPendingCanvasMutationFlusher();
+        const canvasContextReset = initCanvasContextObserver(win, blockClass);
+        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        this.resetObservers = () => {
+            canvasContextReset();
+            canvas2DReset();
+            canvasWebGL1and2Reset();
+        };
+    }
+    startPendingCanvasMutationFlusher() {
+        requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    }
+    startRAFTimestamping() {
+        const setLatestRAFTimestamp = (timestamp) => {
+            this.rafStamps.latestId = timestamp;
+            requestAnimationFrame(setLatestRAFTimestamp);
+        };
+        requestAnimationFrame(setLatestRAFTimestamp);
+    }
+    flushPendingCanvasMutations() {
+        this.pendingCanvasMutations.forEach((values, canvas) => {
+            const id = this.mirror.getId(canvas);
+            this.flushPendingCanvasMutationFor(canvas, id);
+        });
+        requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    }
+    flushPendingCanvasMutationFor(canvas, id) {
+        if (this.frozen || this.locked) {
+            return;
+        }
+        const valuesWithType = this.pendingCanvasMutations.get(canvas);
+        if (!valuesWithType || id === -1)
+            return;
+        const values = valuesWithType.map((value) => {
+            const rest = __rest(value, ["type"]);
+            return rest;
+        });
+        const { type } = valuesWithType[0];
+        this.mutationCb({ id, type, commands: values });
+        this.pendingCanvasMutations.delete(canvas);
+    }
+}
+
+export { CanvasManager };

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

@@ -0,0 +1,25 @@
+import { patch, isBlocked } from '../../../utils.js';
+
+function initCanvasContextObserver(win, blockClass) {
+    const handlers = [];
+    try {
+        const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
+            return function (contextType, ...args) {
+                if (!isBlocked(this, blockClass)) {
+                    if (!('__context' in this))
+                        (this).__context = contextType;
+                }
+                return original.apply(this, [contextType, ...args]);
+            };
+        });
+        handlers.push(restoreHandler);
+    }
+    catch (_a) {
+        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+
+export { initCanvasContextObserver as default };

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

@@ -0,0 +1,123 @@
+import { encode } from './../../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+
+const canvasVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    let contextMap = canvasVarMap.get(ctx);
+    if (!contextMap) {
+        contextMap = new Map();
+        canvasVarMap.set(ctx, contextMap);
+    }
+    if (!contextMap.has(ctor)) {
+        contextMap.set(ctor, []);
+    }
+    return contextMap.get(ctor);
+}
+const saveWebGLVar = (value, win, ctx) => {
+    if (!value ||
+        !(isInstanceOfWebGLObject(value, win) || typeof value === 'object'))
+        return;
+    const name = value.constructor.name;
+    const list = variableListFor(ctx, name);
+    let 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((arg) => 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) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [Object.values(value)],
+        };
+    }
+    else if (value instanceof ArrayBuffer) {
+        const name = value.constructor.name;
+        const base64 = encode(value);
+        return {
+            rr_type: name,
+            base64,
+        };
+    }
+    else if (value instanceof DataView) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [
+                serializeArg(value.buffer, win, ctx),
+                value.byteOffset,
+                value.byteLength,
+            ],
+        };
+    }
+    else if (value instanceof HTMLImageElement) {
+        const name = value.constructor.name;
+        const { src } = value;
+        return {
+            rr_type: name,
+            src,
+        };
+    }
+    else if (value instanceof HTMLCanvasElement) {
+        const name = 'HTMLImageElement';
+        const src = value.toDataURL();
+        return {
+            rr_type: name,
+            src,
+        };
+    }
+    else if (value instanceof ImageData) {
+        const name = value.constructor.name;
+        return {
+            rr_type: name,
+            args: [serializeArg(value.data, win, ctx), value.width, value.height],
+        };
+    }
+    else if (isInstanceOfWebGLObject(value, win) || typeof value === 'object') {
+        const name = value.constructor.name;
+        const index = saveWebGLVar(value, win, ctx);
+        return {
+            rr_type: name,
+            index: index,
+        };
+    }
+    return value;
+}
+const serializeArgs = (args, win, ctx) => {
+    return [...args].map((arg) => serializeArg(arg, win, ctx));
+};
+const isInstanceOfWebGLObject = (value, win) => {
+    const webGLConstructorNames = [
+        'WebGLActiveInfo',
+        'WebGLBuffer',
+        'WebGLFramebuffer',
+        'WebGLProgram',
+        'WebGLRenderbuffer',
+        'WebGLShader',
+        'WebGLShaderPrecisionFormat',
+        'WebGLTexture',
+        'WebGLUniformLocation',
+        'WebGLVertexArrayObject',
+        'WebGLVertexArrayObjectOES',
+    ];
+    const supportedWebGLConstructorNames = webGLConstructorNames.filter((name) => typeof win[name] === 'function');
+    return Boolean(supportedWebGLConstructorNames.find((name) => value instanceof win[name]));
+};
+
+export { isInstanceOfWebGLObject, saveWebGLVar, serializeArg, serializeArgs, variableListFor };

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

@@ -0,0 +1,59 @@
+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) {
+    const handlers = [];
+    const props = Object.getOwnPropertyNames(prototype);
+    for (const prop of props) {
+        try {
+            if (typeof prototype[prop] !== 'function') {
+                continue;
+            }
+            const restoreHandler = patch(prototype, prop, function (original) {
+                return function (...args) {
+                    const result = original.apply(this, args);
+                    saveWebGLVar(result, win, prototype);
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        const id = mirror.getId(this.canvas);
+                        const recordArgs = serializeArgs([...args], win, prototype);
+                        const mutation = {
+                            type,
+                            property: prop,
+                            args: recordArgs,
+                        };
+                        cb(this.canvas, mutation);
+                    }
+                    return result;
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_a) {
+            const hookHandler = hookSetter(prototype, prop, {
+                set(v) {
+                    cb(this.canvas, {
+                        type,
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    }
+    return handlers;
+}
+function initCanvasWebGLMutationObserver(cb, win, blockClass, mirror) {
+    const handlers = [];
+    handlers.push(...patchGLPrototype(win.WebGLRenderingContext.prototype, CanvasContext.WebGL, cb, blockClass, mirror, win));
+    if (typeof win.WebGL2RenderingContext !== 'undefined') {
+        handlers.push(...patchGLPrototype(win.WebGL2RenderingContext.prototype, CanvasContext.WebGL2, cb, blockClass, mirror, win));
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
+}
+
+export { initCanvasWebGLMutationObserver as default };

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

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

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

@@ -0,0 +1,31 @@
+class StylesheetManager {
+    constructor(options) {
+        this.trackedStylesheets = new WeakSet();
+        this.mutationCb = options.mutationCb;
+    }
+    addStylesheet(linkEl) {
+        if (this.trackedStylesheets.has(linkEl))
+            return;
+        this.trackedStylesheets.add(linkEl);
+        this.trackStylesheet(linkEl);
+    }
+    trackStylesheet(linkEl) {
+    }
+    attachStylesheet(linkEl, childSn, mirror) {
+        this.mutationCb({
+            adds: [
+                {
+                    parentId: mirror.getId(linkEl),
+                    nextId: null,
+                    node: childSn,
+                },
+            ],
+            removes: [],
+            texts: [],
+            attributes: [],
+        });
+        this.addStylesheet(linkEl);
+    }
+}
+
+export { StylesheetManager };

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

@@ -0,0 +1,29 @@
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { deserializeArg } from './deserialize-args.js';
+
+function canvasMutation({ event, mutation, target, imageMap, errorHandler, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const ctx = target.getContext('2d');
+            if (mutation.setter) {
+                ctx[mutation.property] = mutation.args[0];
+                return;
+            }
+            const original = ctx[mutation.property];
+            if (mutation.property === 'drawImage' &&
+                typeof mutation.args[0] === 'string') {
+                const image = imageMap.get(event);
+                original.apply(ctx, mutation.args);
+            }
+            else {
+                const args = yield Promise.all(mutation.args.map(deserializeArg(imageMap, ctx)));
+                original.apply(ctx, args);
+            }
+        }
+        catch (error) {
+            errorHandler(mutation, error);
+        }
+    });
+}
+
+export { canvasMutation as default };

package/es/rrweb/packages/rrweb/src/replay/canvas/deserialize-args.js

@@ -0,0 +1,67 @@
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { decode } from './../../../../../ext/base64-arraybuffer/dist/base64-arraybuffer.es5.js';
+
+const webGLVarMap = new Map();
+function variableListFor(ctx, ctor) {
+    let 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 deserializeArg(imageMap, ctx, preload) {
+    return (arg) => __awaiter(this, void 0, void 0, function* () {
+        if (arg && typeof arg === 'object' && 'rr_type' in arg) {
+            if (preload)
+                preload.isUnchanged = false;
+            if (arg.rr_type === 'ImageBitmap' && 'args' in arg) {
+                const args = yield deserializeArg(imageMap, ctx, preload)(arg.args);
+                return yield createImageBitmap.apply(null, args);
+            }
+            else if ('index' in arg) {
+                if (preload || ctx === null)
+                    return arg;
+                const { rr_type: name, index } = arg;
+                return variableListFor(ctx, name)[index];
+            }
+            else if ('args' in arg) {
+                const { rr_type: name, args } = arg;
+                const ctor = window[name];
+                return new ctor(...(yield Promise.all(args.map(deserializeArg(imageMap, ctx, preload)))));
+            }
+            else if ('base64' in arg) {
+                return decode(arg.base64);
+            }
+            else if ('src' in arg) {
+                const image = imageMap.get(arg.src);
+                if (image) {
+                    return image;
+                }
+                else {
+                    const image = new Image();
+                    image.src = arg.src;
+                    imageMap.set(arg.src, image);
+                    return image;
+                }
+            }
+            else if ('data' in arg && arg.rr_type === 'Blob') {
+                const blobContents = yield Promise.all(arg.data.map(deserializeArg(imageMap, ctx, preload)));
+                const blob = new Blob(blobContents, {
+                    type: arg.type,
+                });
+                return blob;
+            }
+        }
+        else if (Array.isArray(arg)) {
+            const result = yield Promise.all(arg.map(deserializeArg(imageMap, ctx, preload)));
+            return result;
+        }
+        return arg;
+    });
+}
+
+export { deserializeArg, variableListFor };

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

@@ -0,0 +1,43 @@
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../types.js';
+import webglMutation from './webgl.js';
+import canvasMutation$1 from './2d.js';
+
+function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const precomputedMutation = canvasEventMap.get(event) || mutation;
+            const commands = 'commands' in precomputedMutation
+                ? precomputedMutation.commands
+                : [precomputedMutation];
+            if ([CanvasContext.WebGL, CanvasContext.WebGL2].includes(mutation.type)) {
+                for (let i = 0; i < commands.length; i++) {
+                    const command = commands[i];
+                    yield webglMutation({
+                        mutation: command,
+                        type: mutation.type,
+                        target,
+                        imageMap,
+                        errorHandler,
+                    });
+                }
+                return;
+            }
+            for (let i = 0; i < commands.length; i++) {
+                const command = commands[i];
+                yield canvasMutation$1({
+                    event,
+                    mutation: command,
+                    target,
+                    imageMap,
+                    errorHandler,
+                });
+            }
+        }
+        catch (error) {
+            errorHandler(mutation, error);
+        }
+    });
+}
+
+export { canvasMutation as default };

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

@@ -0,0 +1,62 @@
+import { __awaiter } from './../../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../types.js';
+import { deserializeArg, variableListFor } from './deserialize-args.js';
+
+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;
+    }
+}
+const 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;
+    const { name } = result.constructor;
+    if (!WebGLVariableConstructorsNames.includes(name))
+        return;
+    const variables = variableListFor(ctx, name);
+    if (!variables.includes(result))
+        variables.push(result);
+}
+function webglMutation({ mutation, target, type, imageMap, errorHandler, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const ctx = getContext(target, type);
+            if (!ctx)
+                return;
+            if (mutation.setter) {
+                ctx[mutation.property] = mutation.args[0];
+                return;
+            }
+            const original = ctx[mutation.property];
+            const args = yield Promise.all(mutation.args.map(deserializeArg(imageMap, ctx)));
+            const result = original.apply(ctx, args);
+            saveToWebGLVarMap(ctx, result);
+            const debugMode = false;
+            if (debugMode) ;
+        }
+        catch (error) {
+            errorHandler(mutation, error);
+        }
+    });
+}
+
+export { webglMutation as default };