From 423e463b95ea125e882e43717a8bcf21970fbd1d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 26 Aug 2024 22:44:47 +1000
Subject: [PATCH] fix(ui): handle error from internal konva method

We are dipping into konva's private API for preview images and it appears to be unsafe (got an error once). Wrapped in a try/catch.
---
 .../konva/CanvasObjectRenderer.ts             | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
index 9a3b32cec8..b586976f1a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasObjectRenderer.ts
@@ -30,6 +30,7 @@ import type { GroupConfig } from 'konva/lib/Group';
 import { debounce } from 'lodash-es';
 import { atom } from 'nanostores';
 import type { Logger } from 'roarr';
+import { serializeError } from 'serialize-error';
 import { getImageDTO, uploadImage } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { assert } from 'tsafe';
@@ -550,17 +551,22 @@ export class CanvasObjectRenderer extends CanvasModuleBase {
     if (this.parent.transformer.pixelRect.width === 0 || this.parent.transformer.pixelRect.height === 0) {
       return;
     }
-    const canvas = this.konva.objectGroup._getCachedSceneCanvas()._canvas as HTMLCanvasElement | undefined | null;
-    if (canvas) {
-      const nodeRect = this.parent.transformer.nodeRect;
-      const pixelRect = this.parent.transformer.pixelRect;
-      const rect = {
-        x: pixelRect.x - nodeRect.x,
-        y: pixelRect.y - nodeRect.y,
-        width: pixelRect.width,
-        height: pixelRect.height,
-      };
-      this.$canvasCache.set({ rect, canvas });
+    try {
+      const canvas = this.konva.objectGroup._getCachedSceneCanvas()._canvas as HTMLCanvasElement | undefined | null;
+      if (canvas) {
+        const nodeRect = this.parent.transformer.nodeRect;
+        const pixelRect = this.parent.transformer.pixelRect;
+        const rect = {
+          x: pixelRect.x - nodeRect.x,
+          y: pixelRect.y - nodeRect.y,
+          width: pixelRect.width,
+          height: pixelRect.height,
+        };
+        this.$canvasCache.set({ rect, canvas });
+      }
+    } catch (error) {
+      // We are using an internal Konva method, so we need to catch any errors that may occur.
+      this.log.warn({ error: serializeError(error) }, 'Failed to update preview canvas');
     }
   }, 300);