Additional canvas image error handling (#297)

* additional error handling

* 1.34.2

Author: mdroidian

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.34.1",
+  "version": "1.34.2",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {

package.json

@@ -8,6 +8,7 @@ import getDiscourseNodes from "./getDiscourseNodes";
 import resolveRefs from "roamjs-components/dom/resolveRefs";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import { loadImage } from "./loadImage";
+import apiPost from "roamjs-components/util/apiPost";
 
 const extractFirstImageUrl = (text: string): string | null => {
   const regex = /!\[.*?\]\((https:\/\/[^)]+)\)/;
@@ -96,10 +97,32 @@ const calcCanvasNodeSizeAndImg = async ({
       h: h + nodeImageHeight + padding * 2,
       imageUrl,
     };
-  } catch {
+  } catch (e) {
+    const error = e as Error;
+    apiPost({
+      domain: "https://api.samepage.network",
+      path: "errors",
+      data: {
+        method: "extension-error",
+        type: "Canvas Image Load Failed",
+        message: error.message,
+        stack: error.stack,
+        version: process.env.VERSION,
+        notebookUuid: JSON.stringify({
+          owner: "RoamJS",
+          app: "query-builder",
+          workspace: window.roamAlphaAPI.graph.name,
+        }),
+        data: {
+          uid,
+          nodeText,
+          imageUrl,
+        },
+      },
+    }).catch(() => {});
     renderToast({
       id: "tldraw-image-load-fail",
-      content: "Failed to load image",
+      content: error.message,
       intent: "warning",
     });
     return { w, h, imageUrl: "" };

src/utils/calcCanvasNodeSizeAndImg.ts

@@ -13,8 +13,8 @@ export const loadImage = (
     };
 
     setTimeout(() => {
-      reject(new Error("Image load timeout"));
-    }, 5000);
+      reject(new Error("Failed to load image: timeout"));
+    }, 10000);
 
     img.src = url;
   });