@sentry-internal/replay-canvas - npm Package Compare versions

Comparing version 8.11.0 to 8.12.0-beta.0

cjs/index.js

@@ -541,3 +541,21 @@ var {
         this.pendingCanvasMutations.clear();
-        this.resetObservers && this.resetObservers();
+        this.restoreHandlers.forEach((handler) => {
+            try {
+                handler();
+            }
+            catch (e) {
+            }
+        });
+        this.restoreHandlers = [];
+        this.windowsSet = new WeakSet();
+        this.windows = [];
+        this.shadowDoms = new Set();
+        _optionalChain([this, 'access', _ => _.worker, 'optionalAccess', _2 => _2.terminate, 'call', _3 => _3()]);
+        this.worker = null;
+        this.snapshotInProgressMap = new Map();
+        if ((this.options.recordCanvas &&
+            typeof this.options.sampling === 'number') ||
+            this.options.enableManualSnapshot) {
+            this.worker = this.initFPSWorker();
+        }
     }
@@ -559,4 +577,10 @@ freeze() {
         this.rafStamps = { latestId: 0, invokeId: null };
+        this.shadowDoms = new Set();
+        this.windowsSet = new WeakSet();
+        this.windows = [];
+        this.restoreHandlers = [];
         this.frozen = false;
         this.locked = false;
+        this.snapshotInProgressMap = new Map();
+        this.worker = null;
         this.processMutation = (target, mutation) => {
@@ -579,2 +603,7 @@ const newFrame = this.rafStamps.invokeId &&
         }
+        if ((recordCanvas && typeof sampling === 'number') ||
+            options.enableManualSnapshot) {
+            this.worker = this.initFPSWorker();
+        }
+        this.addWindow(win);
         if (options.enableManualSnapshot) {
@@ -584,39 +613,43 @@ return;
         callbackWrapper(() => {
-            if (recordCanvas && sampling === 'all')
-                this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector);
-            if (recordCanvas && typeof sampling === 'number')
-                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
+            if (recordCanvas && sampling === 'all') {
+                this.startRAFTimestamping();
+                this.startPendingCanvasMutationFlusher();
+            }
+            if (recordCanvas && typeof sampling === 'number') {
+                this.initCanvasFPSObserver(sampling, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
                     dataURLOptions,
                 });
+            }
         })();
     }
-    initCanvasFPSObserver(fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options) {
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, true);
-        const rafId = this.takeSnapshot(false, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
-        this.resetObservers = () => {
-            canvasContextReset();
-            cancelAnimationFrame(rafId);
-        };
+    addWindow(win) {
+        const { sampling = 'all', blockClass, blockSelector, unblockSelector, recordCanvas, enableManualSnapshot, } = this.options;
+        if (this.windowsSet.has(win))
+            return;
+        if (enableManualSnapshot) {
+            this.windowsSet.add(win);
+            this.windows.push(new WeakRef(win));
+            return;
+        }
+        callbackWrapper(() => {
+            if (recordCanvas && sampling === 'all') {
+                this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector);
+            }
+            if (recordCanvas && typeof sampling === 'number') {
+                const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, true);
+                this.restoreHandlers.push(() => {
+                    canvasContextReset();
+                });
+            }
+        })();
+        this.windowsSet.add(win);
+        this.windows.push(new WeakRef(win));
     }
-    initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector) {
-        this.startRAFTimestamping();
-        this.startPendingCanvasMutationFlusher();
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, false);
-        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector);
-        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
-        this.resetObservers = () => {
-            canvasContextReset();
-            canvas2DReset();
-            canvasWebGL1and2Reset();
-        };
+    addShadowRoot(shadowRoot) {
+        this.shadowDoms.add(new WeakRef(shadowRoot));
     }
-    snapshot(canvasElement) {
-        const { options } = this;
-        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.win, options.blockClass, options.blockSelector, options.unblockSelector, options.maxCanvasSize, options.dataURLOptions, canvasElement);
-        this.resetObservers = () => {
-            cancelAnimationFrame(rafId);
-        };
+    resetShadowRoots() {
+        this.shadowDoms = new Set();
     }
-    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
-        const snapshotInProgressMap = new Map();
+    initFPSWorker() {
         const worker = new Worker(t());
@@ -626,3 +659,3 @@ worker.onmessage = (e) => {
             const { id } = data;
-            snapshotInProgressMap.set(id, false);
+            this.snapshotInProgressMap.set(id, false);
             if (!('base64' in data))
@@ -661,2 +694,28 @@ return;
         };
+        return worker;
+    }
+    initCanvasFPSObserver(fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, options) {
+        const rafId = this.takeSnapshot(false, fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
+        this.restoreHandlers.push(() => {
+            cancelAnimationFrame(rafId);
+        });
+    }
+    initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector) {
+        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, false);
+        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector);
+        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
+        this.restoreHandlers.push(() => {
+            canvasContextReset();
+            canvas2DReset();
+            canvasWebGL1and2Reset();
+        });
+    }
+    snapshot(canvasElement) {
+        const { options } = this;
+        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.blockClass, options.blockSelector, options.unblockSelector, options.maxCanvasSize, options.dataURLOptions, canvasElement);
+        this.restoreHandlers.push(() => {
+            cancelAnimationFrame(rafId);
+        });
+    }
+    takeSnapshot(isManualSnapshot, fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
         const timeBetweenSnapshots = 1000 / fps;
@@ -670,10 +729,27 @@ let lastSnapshotTime = 0;
             const matchedCanvas = [];
-            win.document.querySelectorAll('canvas').forEach((canvas) => {
-                if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) {
-                    matchedCanvas.push(canvas);
+            const searchCanvas = (root) => {
+                root.querySelectorAll('canvas').forEach((canvas) => {
+                    if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) {
+                        matchedCanvas.push(canvas);
+                    }
+                });
+            };
+            for (const item of this.windows) {
+                const window = item.deref();
+                if (window) {
+                    searchCanvas(window.document);
                 }
-            });
+            }
+            for (const item of this.shadowDoms) {
+                const shadowRoot = item.deref();
+                if (shadowRoot) {
+                    searchCanvas(shadowRoot);
+                }
+            }
             return matchedCanvas;
         };
         const takeCanvasSnapshots = (timestamp) => {
+            if (!this.windows.length) {
+                return;
+            }
             if (lastSnapshotTime &&
@@ -686,12 +762,15 @@ timestamp - lastSnapshotTime < timeBetweenSnapshots) {
             getCanvas(canvasElement).forEach((canvas) => {
+                if (!this.mirror.hasNode(canvas)) {
+                    return;
+                }
                 const id = this.mirror.getId(canvas);
-                if (snapshotInProgressMap.get(id))
+                if (this.snapshotInProgressMap.get(id))
                     return;
                 if (!canvas.width || !canvas.height)
                     return;
-                snapshotInProgressMap.set(id, true);
+                this.snapshotInProgressMap.set(id, true);
                 if (!isManualSnapshot &&
                     ['webgl', 'webgl2'].includes(canvas.__context)) {
                     const context = canvas.getContext(canvas.__context);
-                    if (_optionalChain([context, 'optionalAccess', _ => _.getContextAttributes, 'call', _2 => _2(), 'optionalAccess', _3 => _3.preserveDrawingBuffer]) === false) {
+                    if (_optionalChain([context, 'optionalAccess', _4 => _4.getContextAttributes, 'call', _5 => _5(), 'optionalAccess', _6 => _6.preserveDrawingBuffer]) === false) {
                         context.clear(context.COLOR_BUFFER_BIT);
@@ -702,3 +781,3 @@ }
                     .then((bitmap) => {
-                    worker.postMessage({
+                    _optionalChain([this, 'access', _7 => _7.worker, 'optionalAccess', _8 => _8.postMessage, 'call', _9 => _9({
                         id,
@@ -710,3 +789,3 @@ bitmap,
                         maxCanvasSize,
-                    }, [bitmap]);
+                    }, [bitmap])]);
                 })
@@ -713,0 +792,0 @@ .catch((error) => {

esm/index.js

@@ -536,3 +536,21 @@ import { _optionalChain } from '@sentry/utils';
         this.pendingCanvasMutations.clear();
-        this.resetObservers && this.resetObservers();
+        this.restoreHandlers.forEach((handler) => {
+            try {
+                handler();
+            }
+            catch (e) {
+            }
+        });
+        this.restoreHandlers = [];
+        this.windowsSet = new WeakSet();
+        this.windows = [];
+        this.shadowDoms = new Set();
+        _optionalChain([this, 'access', _ => _.worker, 'optionalAccess', _2 => _2.terminate, 'call', _3 => _3()]);
+        this.worker = null;
+        this.snapshotInProgressMap = new Map();
+        if ((this.options.recordCanvas &&
+            typeof this.options.sampling === 'number') ||
+            this.options.enableManualSnapshot) {
+            this.worker = this.initFPSWorker();
+        }
     }
@@ -554,4 +572,10 @@ freeze() {
         this.rafStamps = { latestId: 0, invokeId: null };
+        this.shadowDoms = new Set();
+        this.windowsSet = new WeakSet();
+        this.windows = [];
+        this.restoreHandlers = [];
         this.frozen = false;
         this.locked = false;
+        this.snapshotInProgressMap = new Map();
+        this.worker = null;
         this.processMutation = (target, mutation) => {
@@ -574,2 +598,7 @@ const newFrame = this.rafStamps.invokeId &&
         }
+        if ((recordCanvas && typeof sampling === 'number') ||
+            options.enableManualSnapshot) {
+            this.worker = this.initFPSWorker();
+        }
+        this.addWindow(win);
         if (options.enableManualSnapshot) {
@@ -579,39 +608,43 @@ return;
         callbackWrapper(() => {
-            if (recordCanvas && sampling === 'all')
-                this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector);
-            if (recordCanvas && typeof sampling === 'number')
-                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
+            if (recordCanvas && sampling === 'all') {
+                this.startRAFTimestamping();
+                this.startPendingCanvasMutationFlusher();
+            }
+            if (recordCanvas && typeof sampling === 'number') {
+                this.initCanvasFPSObserver(sampling, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
                     dataURLOptions,
                 });
+            }
         })();
     }
-    initCanvasFPSObserver(fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options) {
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, true);
-        const rafId = this.takeSnapshot(false, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
-        this.resetObservers = () => {
-            canvasContextReset();
-            cancelAnimationFrame(rafId);
-        };
+    addWindow(win) {
+        const { sampling = 'all', blockClass, blockSelector, unblockSelector, recordCanvas, enableManualSnapshot, } = this.options;
+        if (this.windowsSet.has(win))
+            return;
+        if (enableManualSnapshot) {
+            this.windowsSet.add(win);
+            this.windows.push(new WeakRef(win));
+            return;
+        }
+        callbackWrapper(() => {
+            if (recordCanvas && sampling === 'all') {
+                this.initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector);
+            }
+            if (recordCanvas && typeof sampling === 'number') {
+                const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, true);
+                this.restoreHandlers.push(() => {
+                    canvasContextReset();
+                });
+            }
+        })();
+        this.windowsSet.add(win);
+        this.windows.push(new WeakRef(win));
     }
-    initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector) {
-        this.startRAFTimestamping();
-        this.startPendingCanvasMutationFlusher();
-        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, false);
-        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector);
-        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
-        this.resetObservers = () => {
-            canvasContextReset();
-            canvas2DReset();
-            canvasWebGL1and2Reset();
-        };
+    addShadowRoot(shadowRoot) {
+        this.shadowDoms.add(new WeakRef(shadowRoot));
     }
-    snapshot(canvasElement) {
-        const { options } = this;
-        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.win, options.blockClass, options.blockSelector, options.unblockSelector, options.maxCanvasSize, options.dataURLOptions, canvasElement);
-        this.resetObservers = () => {
-            cancelAnimationFrame(rafId);
-        };
+    resetShadowRoots() {
+        this.shadowDoms = new Set();
     }
-    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
-        const snapshotInProgressMap = new Map();
+    initFPSWorker() {
         const worker = new Worker(t());
@@ -621,3 +654,3 @@ worker.onmessage = (e) => {
             const { id } = data;
-            snapshotInProgressMap.set(id, false);
+            this.snapshotInProgressMap.set(id, false);
             if (!('base64' in data))
@@ -656,2 +689,28 @@ return;
         };
+        return worker;
+    }
+    initCanvasFPSObserver(fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, options) {
+        const rafId = this.takeSnapshot(false, fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
+        this.restoreHandlers.push(() => {
+            cancelAnimationFrame(rafId);
+        });
+    }
+    initCanvasMutationObserver(win, blockClass, blockSelector, unblockSelector) {
+        const canvasContextReset = initCanvasContextObserver(win, blockClass, blockSelector, unblockSelector, false);
+        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector);
+        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, blockSelector, unblockSelector, this.mirror);
+        this.restoreHandlers.push(() => {
+            canvasContextReset();
+            canvas2DReset();
+            canvasWebGL1and2Reset();
+        });
+    }
+    snapshot(canvasElement) {
+        const { options } = this;
+        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.blockClass, options.blockSelector, options.unblockSelector, options.maxCanvasSize, options.dataURLOptions, canvasElement);
+        this.restoreHandlers.push(() => {
+            cancelAnimationFrame(rafId);
+        });
+    }
+    takeSnapshot(isManualSnapshot, fps, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
         const timeBetweenSnapshots = 1000 / fps;
@@ -665,10 +724,27 @@ let lastSnapshotTime = 0;
             const matchedCanvas = [];
-            win.document.querySelectorAll('canvas').forEach((canvas) => {
-                if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) {
-                    matchedCanvas.push(canvas);
+            const searchCanvas = (root) => {
+                root.querySelectorAll('canvas').forEach((canvas) => {
+                    if (!isBlocked(canvas, blockClass, blockSelector, unblockSelector, true)) {
+                        matchedCanvas.push(canvas);
+                    }
+                });
+            };
+            for (const item of this.windows) {
+                const window = item.deref();
+                if (window) {
+                    searchCanvas(window.document);
                 }
-            });
+            }
+            for (const item of this.shadowDoms) {
+                const shadowRoot = item.deref();
+                if (shadowRoot) {
+                    searchCanvas(shadowRoot);
+                }
+            }
             return matchedCanvas;
         };
         const takeCanvasSnapshots = (timestamp) => {
+            if (!this.windows.length) {
+                return;
+            }
             if (lastSnapshotTime &&
@@ -681,12 +757,15 @@ timestamp - lastSnapshotTime < timeBetweenSnapshots) {
             getCanvas(canvasElement).forEach((canvas) => {
+                if (!this.mirror.hasNode(canvas)) {
+                    return;
+                }
                 const id = this.mirror.getId(canvas);
-                if (snapshotInProgressMap.get(id))
+                if (this.snapshotInProgressMap.get(id))
                     return;
                 if (!canvas.width || !canvas.height)
                     return;
-                snapshotInProgressMap.set(id, true);
+                this.snapshotInProgressMap.set(id, true);
                 if (!isManualSnapshot &&
                     ['webgl', 'webgl2'].includes(canvas.__context)) {
                     const context = canvas.getContext(canvas.__context);
-                    if (_optionalChain([context, 'optionalAccess', _ => _.getContextAttributes, 'call', _2 => _2(), 'optionalAccess', _3 => _3.preserveDrawingBuffer]) === false) {
+                    if (_optionalChain([context, 'optionalAccess', _4 => _4.getContextAttributes, 'call', _5 => _5(), 'optionalAccess', _6 => _6.preserveDrawingBuffer]) === false) {
                         context.clear(context.COLOR_BUFFER_BIT);
@@ -697,3 +776,3 @@ }
                     .then((bitmap) => {
-                    worker.postMessage({
+                    _optionalChain([this, 'access', _7 => _7.worker, 'optionalAccess', _8 => _8.postMessage, 'call', _9 => _9({
                         id,
@@ -705,3 +784,3 @@ bitmap,
                         maxCanvasSize,
-                    }, [bitmap]);
+                    }, [bitmap])]);
                 })
@@ -708,0 +787,0 @@ .catch((error) => {

package.json

 {
   "name": "@sentry-internal/replay-canvas",
-  "version": "8.11.0",
+  "version": "8.12.0-beta.0",
   "description": "Replay canvas integration",
@@ -50,9 +50,9 @@ "main": "cjs/index.js",
     "@babel/core": "^7.17.5",
-    "@sentry-internal/rrweb": "2.15.0"
+    "@sentry-internal/rrweb": "2.25.0"
   },
   "dependencies": {
-    "@sentry-internal/replay": "8.11.0",
-    "@sentry/core": "8.11.0",
-    "@sentry/types": "8.11.0",
-    "@sentry/utils": "8.11.0"
+    "@sentry-internal/replay": "8.12.0-beta.0",
+    "@sentry/core": "8.12.0-beta.0",
+    "@sentry/types": "8.12.0-beta.0",
+    "@sentry/utils": "8.12.0-beta.0"
   },
@@ -59,0 +59,0 @@ "engines": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

529690

increased by5.77%

Lines of code

1882

increased by9.16%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@sentry-internal/browser-utils@8.12.0-beta.0(transitive)

• + Added@sentry-internal/replay@8.12.0-beta.0(transitive)

• + Added@sentry/core@8.12.0-beta.0(transitive)

• + Added@sentry/types@8.12.0-beta.0(transitive)

• + Added@sentry/utils@8.12.0-beta.0(transitive)

• - Removed@sentry-internal/browser-utils@8.11.0(transitive)

• - Removed@sentry-internal/replay@8.11.0(transitive)

• - Removed@sentry/core@8.11.0(transitive)

• - Removed@sentry/types@8.11.0(transitive)

• - Removed@sentry/utils@8.11.0(transitive)

• Updated@sentry-internal/replay@8.12.0-beta.0

• Updated@sentry/core@8.12.0-beta.0

• Updated@sentry/types@8.12.0-beta.0

• Updated@sentry/utils@8.12.0-beta.0