From 4521db13c3d1c8a0ff209443bc26465949898751 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Wed, 19 Feb 2025 11:18:35 -0600
Subject: [PATCH] add error event

---
 ...@tldraw+editor+2.0.0-canary.ffda4cfb.patch | 33 ++++++++++++++
 src/components/tldraw/Tldraw.tsx              | 43 +++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/patches/@tldraw+tldraw++@tldraw+editor+2.0.0-canary.ffda4cfb.patch b/patches/@tldraw+tldraw++@tldraw+editor+2.0.0-canary.ffda4cfb.patch
index 16cd9133..ba3adbe1 100644
--- a/patches/@tldraw+tldraw++@tldraw+editor+2.0.0-canary.ffda4cfb.patch
+++ b/patches/@tldraw+tldraw++@tldraw+editor+2.0.0-canary.ffda4cfb.patch
@@ -151,6 +151,39 @@ index 185d39d..f19078a 100644
 +  DraggingHandle,
  };
  //# sourceMappingURL=TLSelectTool.mjs.map
+diff --git a/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/components/ErrorBoundary/ErrorFallback.mjs b/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/components/ErrorBoundary/ErrorFallback.mjs
+index 3a679a0..ca10bd7 100644
+--- a/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/components/ErrorBoundary/ErrorFallback.mjs
++++ b/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/components/ErrorBoundary/ErrorFallback.mjs
+@@ -15,6 +15,20 @@ function ErrorFallback({ error, app }) {
+   const [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false);
+   const errorMessage = error instanceof Error ? error.message : String(error);
+   const errorStack = error instanceof Error ? error.stack : null;
++  // Notify Query Builder that an error occurred
++  useEffect(() => {
++    const errorDetails = {
++      message: error instanceof Error ? error.message : String(error),
++      stack: error instanceof Error ? error.stack : null
++    };
++    
++    const event = new CustomEvent("tldraw:error", {
++      detail: errorDetails,
++      bubbles: true
++    });
++    
++    document.dispatchEvent(event);
++  }, [error]);
+   const isDarkModeFromApp = useValue(
+     "isDarkMode",
+     () => {
+@@ -56,6 +70,7 @@ function ErrorFallback({ error, app }) {
+       return () => clearTimeout(timeout);
+     }
+   }, [didCopy]);
++
+   const copyError = () => {
+     const textarea = document.createElement("textarea");
+     textarea.value = errorStack ?? errorMessage;
 diff --git a/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/hooks/useCanvasEvents.mjs b/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/hooks/useCanvasEvents.mjs
 index 043e7c0..f480bc6 100644
 --- a/node_modules/@tldraw/tldraw/node_modules/@tldraw/editor/dist/esm/lib/hooks/useCanvasEvents.mjs
diff --git a/src/components/tldraw/Tldraw.tsx b/src/components/tldraw/Tldraw.tsx
index 4ee99ee1..11e9e519 100644
--- a/src/components/tldraw/Tldraw.tsx
+++ b/src/components/tldraw/Tldraw.tsx
@@ -60,6 +60,7 @@ import {
   DiscourseRelationUtil,
 } from "./DiscourseRelationsUtil";
 import { isPageUid } from "../../utils/isPageUid";
+import apiPost from "roamjs-components/util/apiPost";
 
 declare global {
   interface Window {
@@ -787,6 +788,48 @@ const TldrawCanvas = ({ title }: Props) => {
     maximized,
     setMaximized,
   });
+
+  // Catch a custom event we used patch-package to add
+  useEffect(() => {
+    const handleTldrawError = (
+      e: CustomEvent<{ message: string; stack: string | null }>
+    ) => {
+      apiPost({
+        domain: "https://api.samepage.network",
+        path: "errors",
+        data: {
+          method: "extension-error",
+          type: "Tldraw Error",
+          message: e.detail.message,
+          stack: e.detail.stack,
+          version: process.env.VERSION,
+          notebookUuid: JSON.stringify({
+            owner: "RoamJS",
+            app: "query-builder",
+            workspace: window.roamAlphaAPI.graph.name,
+          }),
+          data: {
+            title,
+          },
+        },
+      }).catch(() => {});
+
+      console.error("Tldraw Error:", e.detail);
+    };
+
+    document.addEventListener(
+      "tldraw:error",
+      handleTldrawError as EventListener
+    );
+
+    return () => {
+      document.removeEventListener(
+        "tldraw:error",
+        handleTldrawError as EventListener
+      );
+    };
+  }, []);
+
   return (
     <div
       className={`border border-gray-300 rounded-md bg-white h-full w-full z-10 overflow-hidden ${