Refactor error handling and reporting: remove user display name from error context, add username to error email payload, and enhance EmailTemplate to display username. Update ErrorEmailProps type to require username. (#575) (#576)

Author: mdroidian

apps/roam/src/components/canvas/Tldraw.tsx

@@ -513,7 +513,6 @@ const TldrawCanvas = ({ title }: { title: string }) => {
         type: "Tldraw Error",
         context: {
           title: title,
-          user: getCurrentUserDisplayName(),
           lastActions: lastActionsRef.current,
         },
       }).catch(() => {});

apps/roam/src/components/canvas/useRoamStore.ts

@@ -153,7 +153,6 @@ export const useRoamStore = ({
         type: errorMessage,
         context: {
           pageUid,
-          user: getCurrentUserDisplayName(),
           snapshotSize,
           ...(snapshotSize < 10000 ? { initialSnapshot } : {}),
         },

apps/roam/src/components/settings/AdminPanel.tsx

@@ -28,6 +28,7 @@ import {
 import migrateRelations from "~/utils/migrateRelations";
 import { countReifiedRelations } from "~/utils/createReifiedBlock";
 import { DGSupabaseClient } from "@repo/database/lib/client";
+import sendErrorEmail from "~/utils/sendErrorEmail";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
   return (
@@ -326,24 +327,40 @@ const FeatureFlagsTab = (): React.ReactElement => {
     getSetting("use-reified-relations"),
   );
   return (
-    <Checkbox
-      defaultChecked={useReifiedRelations}
-      onChange={(e) => {
-        const target = e.target as HTMLInputElement;
-        setUseReifiedRelations(target.checked);
-        setSetting("use-reified-relations", target.checked);
-      }}
-      labelElement={
-        <>
-          Reified Relation Triples
-          <Description
-            description={
-              "When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
-            }
-          />
-        </>
-      }
-    />
+    <div className="flex flex-col gap-4 p-4">
+      <Checkbox
+        defaultChecked={useReifiedRelations}
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          setUseReifiedRelations(target.checked);
+          setSetting("use-reified-relations", target.checked);
+        }}
+        labelElement={
+          <>
+            Reified Relation Triples
+            <Description
+              description={
+                "When ON, relations are read/written as reifiedRelationUid in [[roam/js/discourse-graph/relations]]."
+              }
+            />
+          </>
+        }
+      />
+
+      <Button
+        className="w-96"
+        icon="send-message"
+        onClick={() => {
+          console.log("sending error email");
+          sendErrorEmail({
+            error: new Error("test"),
+            type: "Test",
+          }).catch(() => {});
+        }}
+      >
+        Send Error Email
+      </Button>
+    </div>
   );
 };
 

apps/roam/src/utils/sendErrorEmail.ts

@@ -1,6 +1,7 @@
 import { getNodeEnv } from "roamjs-components/util/env";
 import { ErrorEmailProps } from "@repo/types";
 import { getVersionWithDate } from "~/utils/getVersion";
+import getCurrentUserDisplayName from "roamjs-components/queries/getCurrentUserDisplayName";
 
 const sendErrorEmail = async ({
   error,
@@ -16,21 +17,25 @@ const sendErrorEmail = async ({
       ? "http://localhost:3000/api/errors"
       : "https://discoursegraphs.com/api/errors";
   const { version, buildDate } = getVersionWithDate();
+  const username = getCurrentUserDisplayName();
+
   const payload: ErrorEmailProps = {
     errorMessage: error.message,
     errorStack: error.stack || "",
     type,
     app: "Roam",
     graphName: window.roamAlphaAPI?.graph?.name || "unknown",
-    version,
-    buildDate,
+    version: version || "-",
+    buildDate: buildDate || "-",
+    username: username || "unknown",
     context,
   };
 
   try {
     const response = await fetch(url, {
       method: "POST",
       headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
         "Content-Type": "application/json",
       },
       body: JSON.stringify(payload),
@@ -41,7 +46,8 @@ const sendErrorEmail = async ({
       console.error(`Failed to send error email: ${errorMessage}`);
     }
   } catch (err) {
-    console.error(`Error sending request: ${err}`);
+    const errorMessage = err instanceof Error ? err.message : String(err);
+    console.error(`Error sending request: ${errorMessage}`);
   }
 };
 

apps/website/app/api/errors/EmailTemplate.tsx

@@ -1,6 +1,12 @@
 import { ErrorEmailProps } from "@repo/types";
 import React from "react";
 
+const ErrorField = ({ label, value }: { label: string; value: string }) => (
+  <div>
+    <span style={{ fontWeight: "bold", minWidth: "100px" }}>{label}:</span>{" "}
+    {value}
+  </div>
+);
 // TODO: use react.email
 export const EmailTemplate = ({
   errorMessage,
@@ -10,17 +16,18 @@ export const EmailTemplate = ({
   graphName,
   version,
   buildDate,
+  username,
   context,
 }: ErrorEmailProps) => {
   return (
     <div>
       <h1>Error Report</h1>
-
-      <span>Type: {type}</span>
-      <span>App: {app}</span>
-      <span>Graph Name: {graphName}</span>
-      {version && <span>Version: {version}</span>}
-      {buildDate && <span>Build Date: {buildDate}</span>}
+      <ErrorField label="Type" value={type} />
+      <ErrorField label="App" value={app} />
+      <ErrorField label="Graph Name" value={graphName} />
+      <ErrorField label="Username" value={username} />
+      <ErrorField label="Version" value={version} />
+      <ErrorField label="Build Date" value={buildDate} />
 
       <div>
         <h2>Error Details</h2>

apps/website/app/api/errors/route.tsx

@@ -7,23 +7,46 @@ const allowedOrigins = ["https://roamresearch.com", "http://localhost:3000"];
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
-export async function POST(request: Request) {
-  try {
-    const origin = request.headers.get("origin");
-    const isAllowedOrigin = origin && allowedOrigins.includes(origin);
+const createCorsResponse = (
+  data: unknown,
+  status: number,
+  origin: string | null,
+): Response => {
+  const response = NextResponse.json(data, { status });
+  const isAllowedOrigin = origin && allowedOrigins.includes(origin);
+
+  if (isAllowedOrigin) {
+    response.headers.set("Access-Control-Allow-Origin", origin);
+    response.headers.set("Access-Control-Allow-Methods", "POST, OPTIONS");
+    response.headers.set("Access-Control-Allow-Headers", "Content-Type");
+  }
 
-    const body = await request.json();
+  return response;
+};
+
+export const POST = async (request: Request) => {
+  const origin = request.headers.get("origin");
+
+  try {
+    const body = (await request.json()) as ErrorEmailProps;
     const {
       errorMessage,
       errorStack,
       type,
       app,
       graphName,
+      username,
+      version,
+      buildDate,
       context = {},
-    } = body as ErrorEmailProps;
+    } = body;
 
     if (!errorMessage) {
-      return Response.json({ error: "Missing error message" }, { status: 400 });
+      return createCorsResponse(
+        { error: "Missing error message" },
+        400,
+        origin,
+      );
     }
 
     const { data, error: resendError } = await resend.emails.send({
@@ -37,32 +60,30 @@ export async function POST(request: Request) {
         type,
         app,
         graphName,
+        // ?: Why is username assignment unsafe and graphName,version,buildDate are not?
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        username,
+        version,
+        buildDate,
         context,
       }),
     });
 
     if (resendError) {
-      return Response.json({ error: resendError }, { status: 500 });
-    }
-
-    const response = NextResponse.json({ success: true, data });
-
-    if (isAllowedOrigin) {
-      response.headers.set("Access-Control-Allow-Origin", origin);
-      response.headers.set("Access-Control-Allow-Methods", "POST, OPTIONS");
-      response.headers.set("Access-Control-Allow-Headers", "Content-Type");
+      return createCorsResponse({ error: resendError }, 500, origin);
     }
 
-    return response;
+    return createCorsResponse({ success: true, data }, 200, origin);
   } catch (error) {
-    return Response.json(
+    return createCorsResponse(
       { error: error instanceof Error ? error.message : "Unknown error" },
-      { status: 500 },
+      500,
+      origin,
     );
   }
-}
+};
 
-export async function OPTIONS(request: Request) {
+export const OPTIONS = (request: Request) => {
   const origin = request.headers.get("origin");
 
   const isAllowedOrigin = origin && allowedOrigins.includes(origin);
@@ -78,4 +99,4 @@ export async function OPTIONS(request: Request) {
   }
 
   return response;
-}
+};

packages/types/index.ts

@@ -4,7 +4,8 @@ export type ErrorEmailProps = {
   type: string; // To identify the type of error, eg "Export Dialog Failed"
   app: "Roam" | "Obsidian";
   graphName: string;
-  version?: string;
-  buildDate?: string;
+  version: string;
+  buildDate: string;
+  username: string;
   context?: Record<string, unknown>;
 };