create sendErrorEmail component, don't send if encrypted/offline (#302)

* create sendErrorEmail component, don't send if encrypted/offline

* type safe error

Author: mdroidian

src/components/Export.tsx

@@ -50,6 +50,7 @@ import localStorageSet from "roamjs-components/util/localStorageSet";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import createPage from "roamjs-components/writes/createPage";
 import { createInitialTldrawProps } from "../utils/createInitialTldrawProps";
+import sendErrorEmail from "../utils/sendErrorEmail";
 
 const ExportProgress = ({ id }: { id: string }) => {
   const [progress, setProgress] = useState(0);
@@ -447,26 +448,14 @@ const ExportDialog: ExportDialogComponent = ({
     } catch (e) {
       const error = e as Error;
       renderToast({
-        content: "Looks like there was an error. The team has been notified.",
+        content: "Looks like there was an error.",
         intent: "danger",
         id: "query-builder-error",
       });
-      apiPost({
-        domain: "https://api.samepage.network",
-        path: "errors",
-        data: {
-          method: "extension-error",
-          type: "Query Builder Export Dialog Failed",
-          message: error.message,
-          stack: error.stack,
-          version: process.env.VERSION,
-          notebookUuid: JSON.stringify({
-            owner: "RoamJS",
-            app: "query-builder",
-            workspace: window.roamAlphaAPI.graph.name,
-          }),
-        },
-      }).catch(() => {});
+      sendErrorEmail({
+        error,
+        type: "Query Builder Export Dialog Failed",
+      });
     } finally {
       setLoading(false);
       onClose();
@@ -719,28 +708,16 @@ const ExportDialog: ExportDialogComponent = ({
                   }
                 } catch (e) {
                   const error = e as Error;
-                  apiPost({
-                    domain: "https://api.samepage.network",
-                    path: "errors",
+                  sendErrorEmail({
+                    type: "Query Builder Export Dialog Failed",
+                    error,
                     data: {
-                      method: "extension-error",
-                      type: "Query Builder Export Dialog Failed",
-                      data: {
-                        activeExportType,
-                        filename,
-                        results:
-                          typeof results === "function" ? "dynamic" : results,
-                      },
-                      message: error.message,
-                      stack: error.stack,
-                      version: process.env.VERSION,
-                      notebookUuid: JSON.stringify({
-                        owner: "RoamJS",
-                        app: "query-builder",
-                        workspace: window.roamAlphaAPI.graph.name,
-                      }),
+                      activeExportType,
+                      filename,
+                      results:
+                        typeof results === "function" ? "dynamic" : results,
                     },
-                  }).catch(() => {});
+                  });
                   setDialogOpen(true);
                   setError((e as Error).message);
                 } finally {

src/components/tldraw/Tldraw.tsx

@@ -60,7 +60,7 @@ import {
   DiscourseRelationUtil,
 } from "./DiscourseRelationsUtil";
 import { isPageUid } from "../../utils/isPageUid";
-import apiPost from "roamjs-components/util/apiPost";
+import sendErrorEmail from "../../utils/sendErrorEmail";
 
 declare global {
   interface Window {
@@ -794,27 +794,13 @@ const TldrawCanvas = ({ title }: Props) => {
     const handleTldrawError = (
       e: CustomEvent<{ message: string; stack: string | null }>
     ) => {
-      apiPost({
-        domain: "https://api.samepage.network",
-        path: "errors",
+      sendErrorEmail({
+        type: "Tldraw Error",
+        error: new Error(e.detail.message, { cause: e.detail.stack }),
         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,
-          },
+          title,
         },
-      }).catch(() => {});
-
-      console.error("Tldraw Error:", e.detail);
+      });
     };
 
     document.addEventListener(

src/utils/calcCanvasNodeSizeAndImg.ts

@@ -8,7 +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";
+import sendErrorEmail from "./sendErrorEmail";
 
 const extractFirstImageUrl = (text: string): string | null => {
   const regex = /!\[.*?\]\((https:\/\/[^)]+)\)/;
@@ -99,27 +99,15 @@ const calcCanvasNodeSizeAndImg = async ({
     };
   } catch (e) {
     const error = e as Error;
-    apiPost({
-      domain: "https://api.samepage.network",
-      path: "errors",
+    sendErrorEmail({
+      type: "Canvas Image Load Failed",
+      error,
       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,
-        },
+        uid,
+        nodeText,
+        imageUrl,
       },
-    }).catch(() => {});
+    });
     renderToast({
       id: "tldraw-image-load-fail",
       content: error.message,

src/utils/sendErrorEmail.ts

@@ -0,0 +1,35 @@
+import apiPost from "roamjs-components/util/apiPost";
+
+const sendErrorEmail = ({
+  error,
+  data,
+  type,
+}: {
+  error: Error;
+  data?: Record<string, unknown>;
+  type: string;
+}) => {
+  const isEncrypted = window.roamAlphaAPI.graph.isEncrypted;
+  const isOffline = window.roamAlphaAPI.graph.type === "offline";
+  if (isEncrypted || isOffline) return;
+
+  apiPost({
+    domain: "https://api.samepage.network",
+    path: "errors",
+    data: {
+      method: "extension-error",
+      type,
+      message: error.message,
+      stack: error.stack,
+      version: process.env.VERSION,
+      notebookUuid: JSON.stringify({
+        owner: "RoamJS",
+        app: "query-builder",
+        workspace: window.roamAlphaAPI.graph.name,
+      }),
+      data,
+    },
+  }).catch(() => {});
+};
+
+export default sendErrorEmail;