fix: createImageBitmap throws DOMException if source is 0 (#1422)

* fix: createImageBitmap throws DOMException if source is 0

* code review

* fix

* Create breezy-cats-heal.md

* fix format

---------

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

.changeset/breezy-cats-heal.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: createImageBitmap throws DOMException if source is 0 width or height

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -184,6 +184,12 @@ export class CanvasManager {
         .forEach(async (canvas: HTMLCanvasElement) => {
           const id = this.mirror.getId(canvas);
           if (snapshotInProgressMap.get(id)) return;
+
+          // The browser throws if the canvas is 0 in size
+          // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
+          // Assuming the same happens with height
+          if (canvas.width === 0 || canvas.height === 0) return;
+
           snapshotInProgressMap.set(id, true);
           if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) {
             // if the canvas hasn't been modified recently,