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

Comparing version 7.111.0 to 7.112.0

cjs/index.js

@@ -523,3 +523,3 @@ var {
 
-var r = `for(var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",e="undefined"==typeof Uint8Array?[]:new Uint8Array(256),n=0;n<64;n++)e[t.charCodeAt(n)]=n;var a=function(e){var n,a=new Uint8Array(e),s=a.length,r="";for(n=0;n<s;n+=3)r+=t[a[n]>>2],r+=t[(3&a[n])<<4|a[n+1]>>4],r+=t[(15&a[n+1])<<2|a[n+2]>>6],r+=t[63&a[n+2]];return s%3==2?r=r.substring(0,r.length-1)+"=":s%3==1&&(r=r.substring(0,r.length-2)+"=="),r};const s=new Map,r=new Map;const i=self;i.onmessage=async function(t){if(!("OffscreenCanvas"in globalThis))return i.postMessage({id:t.data.id});{const{id:e,bitmap:n,width:o,height:f,dataURLOptions:c}=t.data,g=async function(t,e,n){const s=t+"-"+e;if("OffscreenCanvas"in globalThis){if(r.has(s))return r.get(s);const i=new OffscreenCanvas(t,e);i.getContext("2d");const o=await i.convertToBlob(n),f=await o.arrayBuffer(),c=a(f);return r.set(s,c),c}return""}(o,f,c),d=new OffscreenCanvas(o,f);d.getContext("2d").drawImage(n,0,0),n.close();const u=await d.convertToBlob(c),h=u.type,w=await u.arrayBuffer(),l=a(w);if(!s.has(e)&&await g===l)return s.set(e,l),i.postMessage({id:e});if(s.get(e)===l)return i.postMessage({id:e});i.postMessage({id:e,type:h,base64:l,width:o,height:f}),s.set(e,l)}};`;
+var r = `for(var e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",t="undefined"==typeof Uint8Array?[]:new Uint8Array(256),a=0;a<64;a++)t[e.charCodeAt(a)]=a;var n=function(t){var a,n=new Uint8Array(t),r=n.length,s="";for(a=0;a<r;a+=3)s+=e[n[a]>>2],s+=e[(3&n[a])<<4|n[a+1]>>4],s+=e[(15&n[a+1])<<2|n[a+2]>>6],s+=e[63&n[a+2]];return r%3==2?s=s.substring(0,s.length-1)+"=":r%3==1&&(s=s.substring(0,s.length-2)+"=="),s};const r=new Map,s=new Map;const i=self;i.onmessage=async function(e){if(!("OffscreenCanvas"in globalThis))return i.postMessage({id:e.data.id});{const{id:t,bitmap:a,width:o,height:f,maxCanvasSize:c,dataURLOptions:g}=e.data,u=async function(e,t,a){const r=e+"-"+t;if("OffscreenCanvas"in globalThis){if(s.has(r))return s.get(r);const i=new OffscreenCanvas(e,t);i.getContext("2d");const o=await i.convertToBlob(a),f=await o.arrayBuffer(),c=n(f);return s.set(r,c),c}return""}(o,f,g),[h,d]=function(e,t,a){if(!a)return[e,t];const[n,r]=a;if(e<=n&&t<=r)return[e,t];let s=e,i=t;return s>n&&(i=Math.floor(n*t/e),s=n),i>r&&(s=Math.floor(r*e/t),i=r),[s,i]}(o,f,c),l=new OffscreenCanvas(h,d),w=l.getContext("bitmaprenderer"),p=h===o&&d===f?a:await createImageBitmap(a,{resizeWidth:h,resizeHeight:d,resizeQuality:"low"});w.transferFromImageBitmap(p),a.close();const y=await l.convertToBlob(g),v=y.type,b=await y.arrayBuffer(),m=n(b);if(p.close(),!r.has(t)&&await u===m)return r.set(t,m),i.postMessage({id:t});if(r.get(t)===m)return i.postMessage({id:t});i.postMessage({id:t,type:v,base64:m,width:o,height:f}),r.set(t,m)}};`;
 
@@ -560,3 +560,3 @@ function t(){const t=new Blob([r]);return URL.createObjectURL(t)}
         };
-        const { sampling = 'all', win, blockClass, blockSelector, unblockSelector, recordCanvas, dataURLOptions, errorHandler, } = options;
+        const { sampling = 'all', win, blockClass, blockSelector, unblockSelector, maxCanvasSize, recordCanvas, dataURLOptions, errorHandler, } = options;
         this.mutationCb = options.mutationCb;
@@ -575,3 +575,3 @@ this.mirror = options.mirror;
             if (recordCanvas && typeof sampling === 'number')
-                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, {
+                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
                     dataURLOptions,
@@ -581,5 +581,5 @@ });
     }
-    initCanvasFPSObserver(fps, win, blockClass, blockSelector, unblockSelector, options) {
+    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, options.dataURLOptions);
+        const rafId = this.takeSnapshot(false, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
         this.resetObservers = () => {
@@ -604,3 +604,3 @@ canvasContextReset();
         const { options } = this;
-        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.win, options.blockClass, options.blockSelector, options.unblockSelector, options.dataURLOptions, canvasElement);
+        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 = () => {
@@ -610,3 +610,3 @@ cancelAnimationFrame(rafId);
     }
-    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, dataURLOptions, canvasElement) {
+    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
         const snapshotInProgressMap = new Map();
@@ -644,2 +644,4 @@ const worker = new Worker(t());
                             0,
+                            width,
+                            height,
                         ],
@@ -694,2 +696,3 @@ },
                         dataURLOptions,
+                        maxCanvasSize,
                     }, [bitmap]);
@@ -773,8 +776,14 @@ })
 const INTEGRATION_NAME = 'ReplayCanvas';
+const DEFAULT_MAX_CANVAS_SIZE = 1280;
 
 /** Exported only for type safe tests. */
 const _replayCanvasIntegration = ((options = {}) => {
+  const [maxCanvasWidth, maxCanvasHeight] = options.maxCanvasSize || [];
   const _canvasOptions = {
     quality: options.quality || 'medium',
     enableManualSnapshot: options.enableManualSnapshot,
+    maxCanvasSize: [
+      maxCanvasWidth ? Math.min(maxCanvasWidth, DEFAULT_MAX_CANVAS_SIZE) : DEFAULT_MAX_CANVAS_SIZE,
+      maxCanvasHeight ? Math.min(maxCanvasHeight, DEFAULT_MAX_CANVAS_SIZE) : DEFAULT_MAX_CANVAS_SIZE,
+    ] ,
   };
@@ -790,3 +799,3 @@
     getOptions() {
-      const { quality, enableManualSnapshot } = _canvasOptions;
+      const { quality, enableManualSnapshot, maxCanvasSize } = _canvasOptions;
 
@@ -796,6 +805,7 @@ return {
         recordCanvas: true,
-        getCanvasManager: (options) => {
+        getCanvasManager: (getCanvasManagerOptions) => {
           const manager = new CanvasManager({
-            ...options,
+            ...getCanvasManagerOptions,
             enableManualSnapshot,
+            maxCanvasSize,
             errorHandler: (err) => {
@@ -802,0 +812,0 @@ try {

esm/index.js

@@ -518,3 +518,3 @@ import { _optionalChain } from '@sentry/utils';
 
-var r = `for(var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",e="undefined"==typeof Uint8Array?[]:new Uint8Array(256),n=0;n<64;n++)e[t.charCodeAt(n)]=n;var a=function(e){var n,a=new Uint8Array(e),s=a.length,r="";for(n=0;n<s;n+=3)r+=t[a[n]>>2],r+=t[(3&a[n])<<4|a[n+1]>>4],r+=t[(15&a[n+1])<<2|a[n+2]>>6],r+=t[63&a[n+2]];return s%3==2?r=r.substring(0,r.length-1)+"=":s%3==1&&(r=r.substring(0,r.length-2)+"=="),r};const s=new Map,r=new Map;const i=self;i.onmessage=async function(t){if(!("OffscreenCanvas"in globalThis))return i.postMessage({id:t.data.id});{const{id:e,bitmap:n,width:o,height:f,dataURLOptions:c}=t.data,g=async function(t,e,n){const s=t+"-"+e;if("OffscreenCanvas"in globalThis){if(r.has(s))return r.get(s);const i=new OffscreenCanvas(t,e);i.getContext("2d");const o=await i.convertToBlob(n),f=await o.arrayBuffer(),c=a(f);return r.set(s,c),c}return""}(o,f,c),d=new OffscreenCanvas(o,f);d.getContext("2d").drawImage(n,0,0),n.close();const u=await d.convertToBlob(c),h=u.type,w=await u.arrayBuffer(),l=a(w);if(!s.has(e)&&await g===l)return s.set(e,l),i.postMessage({id:e});if(s.get(e)===l)return i.postMessage({id:e});i.postMessage({id:e,type:h,base64:l,width:o,height:f}),s.set(e,l)}};`;
+var r = `for(var e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",t="undefined"==typeof Uint8Array?[]:new Uint8Array(256),a=0;a<64;a++)t[e.charCodeAt(a)]=a;var n=function(t){var a,n=new Uint8Array(t),r=n.length,s="";for(a=0;a<r;a+=3)s+=e[n[a]>>2],s+=e[(3&n[a])<<4|n[a+1]>>4],s+=e[(15&n[a+1])<<2|n[a+2]>>6],s+=e[63&n[a+2]];return r%3==2?s=s.substring(0,s.length-1)+"=":r%3==1&&(s=s.substring(0,s.length-2)+"=="),s};const r=new Map,s=new Map;const i=self;i.onmessage=async function(e){if(!("OffscreenCanvas"in globalThis))return i.postMessage({id:e.data.id});{const{id:t,bitmap:a,width:o,height:f,maxCanvasSize:c,dataURLOptions:g}=e.data,u=async function(e,t,a){const r=e+"-"+t;if("OffscreenCanvas"in globalThis){if(s.has(r))return s.get(r);const i=new OffscreenCanvas(e,t);i.getContext("2d");const o=await i.convertToBlob(a),f=await o.arrayBuffer(),c=n(f);return s.set(r,c),c}return""}(o,f,g),[h,d]=function(e,t,a){if(!a)return[e,t];const[n,r]=a;if(e<=n&&t<=r)return[e,t];let s=e,i=t;return s>n&&(i=Math.floor(n*t/e),s=n),i>r&&(s=Math.floor(r*e/t),i=r),[s,i]}(o,f,c),l=new OffscreenCanvas(h,d),w=l.getContext("bitmaprenderer"),p=h===o&&d===f?a:await createImageBitmap(a,{resizeWidth:h,resizeHeight:d,resizeQuality:"low"});w.transferFromImageBitmap(p),a.close();const y=await l.convertToBlob(g),v=y.type,b=await y.arrayBuffer(),m=n(b);if(p.close(),!r.has(t)&&await u===m)return r.set(t,m),i.postMessage({id:t});if(r.get(t)===m)return i.postMessage({id:t});i.postMessage({id:t,type:v,base64:m,width:o,height:f}),r.set(t,m)}};`;
 
@@ -555,3 +555,3 @@ function t(){const t=new Blob([r]);return URL.createObjectURL(t)}
         };
-        const { sampling = 'all', win, blockClass, blockSelector, unblockSelector, recordCanvas, dataURLOptions, errorHandler, } = options;
+        const { sampling = 'all', win, blockClass, blockSelector, unblockSelector, maxCanvasSize, recordCanvas, dataURLOptions, errorHandler, } = options;
         this.mutationCb = options.mutationCb;
@@ -570,3 +570,3 @@ this.mirror = options.mirror;
             if (recordCanvas && typeof sampling === 'number')
-                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, {
+                this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, {
                     dataURLOptions,
@@ -576,5 +576,5 @@ });
     }
-    initCanvasFPSObserver(fps, win, blockClass, blockSelector, unblockSelector, options) {
+    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, options.dataURLOptions);
+        const rafId = this.takeSnapshot(false, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, options.dataURLOptions);
         this.resetObservers = () => {
@@ -599,3 +599,3 @@ canvasContextReset();
         const { options } = this;
-        const rafId = this.takeSnapshot(true, options.sampling === 'all' ? 2 : options.sampling || 2, options.win, options.blockClass, options.blockSelector, options.unblockSelector, options.dataURLOptions, canvasElement);
+        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 = () => {
@@ -605,3 +605,3 @@ cancelAnimationFrame(rafId);
     }
-    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, dataURLOptions, canvasElement) {
+    takeSnapshot(isManualSnapshot, fps, win, blockClass, blockSelector, unblockSelector, maxCanvasSize, dataURLOptions, canvasElement) {
         const snapshotInProgressMap = new Map();
@@ -639,2 +639,4 @@ const worker = new Worker(t());
                             0,
+                            width,
+                            height,
                         ],
@@ -689,2 +691,3 @@ },
                         dataURLOptions,
+                        maxCanvasSize,
                     }, [bitmap]);
@@ -768,8 +771,14 @@ })
 const INTEGRATION_NAME = 'ReplayCanvas';
+const DEFAULT_MAX_CANVAS_SIZE = 1280;
 
 /** Exported only for type safe tests. */
 const _replayCanvasIntegration = ((options = {}) => {
+  const [maxCanvasWidth, maxCanvasHeight] = options.maxCanvasSize || [];
   const _canvasOptions = {
     quality: options.quality || 'medium',
     enableManualSnapshot: options.enableManualSnapshot,
+    maxCanvasSize: [
+      maxCanvasWidth ? Math.min(maxCanvasWidth, DEFAULT_MAX_CANVAS_SIZE) : DEFAULT_MAX_CANVAS_SIZE,
+      maxCanvasHeight ? Math.min(maxCanvasHeight, DEFAULT_MAX_CANVAS_SIZE) : DEFAULT_MAX_CANVAS_SIZE,
+    ] ,
   };
@@ -785,3 +794,3 @@
     getOptions() {
-      const { quality, enableManualSnapshot } = _canvasOptions;
+      const { quality, enableManualSnapshot, maxCanvasSize } = _canvasOptions;
 
@@ -791,6 +800,7 @@ return {
         recordCanvas: true,
-        getCanvasManager: (options) => {
+        getCanvasManager: (getCanvasManagerOptions) => {
           const manager = new CanvasManager({
-            ...options,
+            ...getCanvasManagerOptions,
             enableManualSnapshot,
+            maxCanvasSize,
             errorHandler: (err) => {
@@ -797,0 +807,0 @@ try {

package.json

 {
   "name": "@sentry-internal/replay-canvas",
-  "version": "7.111.0",
+  "version": "7.112.0",
   "description": "Replay canvas integration",
@@ -37,9 +37,9 @@ "main": "cjs/index.js",
     "@babel/core": "^7.17.5",
-    "@sentry-internal/rrweb": "2.12.0"
+    "@sentry-internal/rrweb": "2.13.0"
   },
   "dependencies": {
-    "@sentry/core": "7.111.0",
-    "@sentry/replay": "7.111.0",
-    "@sentry/types": "7.111.0",
-    "@sentry/utils": "7.111.0"
+    "@sentry/core": "7.112.0",
+    "@sentry/replay": "7.112.0",
+    "@sentry/types": "7.112.0",
+    "@sentry/utils": "7.112.0"
   },
@@ -46,0 +46,0 @@ "engines": {

types-ts3.8/canvas.d.ts

@@ -5,2 +5,6 @@ import { InternalCanvasManagerInterface, InternalCanvasManagerOptions } from '@sentry/replay';
     enableManualSnapshot?: boolean;
+    maxCanvasSize?: [
+        /*width*/ number,
+        /*height*/ number
+    ];
     quality: 'low' | 'medium' | 'high';
@@ -11,2 +15,3 @@ }
     enableManualSnapshot?: boolean;
+    maxCanvasSize?: number;
     recordCanvas: true;
@@ -13,0 +18,0 @@ getCanvasManager: GetCanvasManager;

types/canvas.d.ts

@@ -5,2 +5,3 @@ import type { InternalCanvasManagerInterface, InternalCanvasManagerOptions } from '@sentry/replay';
     enableManualSnapshot?: boolean;
+    maxCanvasSize?: [width: number, height: number];
     quality: 'low' | 'medium' | 'high';
@@ -11,2 +12,3 @@ }
     enableManualSnapshot?: boolean;
+    maxCanvasSize?: number;
     recordCanvas: true;
@@ -13,0 +15,0 @@ getCanvasManager: GetCanvasManager;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

503491

increased by2.51%

Lines of code

1723

increased by1.71%

Dependency changes

• + Added@sentry-internal/tracing@7.112.0(transitive)

• + Added@sentry/core@7.112.0(transitive)

• + Added@sentry/replay@7.112.0(transitive)

• + Added@sentry/types@7.112.0(transitive)

• + Added@sentry/utils@7.112.0(transitive)

• - Removed@sentry-internal/tracing@7.111.0(transitive)

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

• - Removed@sentry/replay@7.111.0(transitive)

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

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

• Updated@sentry/core@7.112.0

• Updated@sentry/replay@7.112.0

• Updated@sentry/types@7.112.0

• Updated@sentry/utils@7.112.0