Handle server action failure better

.cursorrules

@@ -112,19 +112,23 @@ You are an expert in TypeScript, Node.js, Next.js App Router, React, Prisma, Pos
 - This is the format of a server action. Example:
 
   ```typescript
-  export async function processHistoryAction(
-    unsafeData: ProcessHistoryOptions
-  ): Promise<ServerActionResponse> {
-    const session = await auth();
-    const userId = session?.user.id;
-    if (!userId) return { error: "Not logged in" };
+  export const deactivateApiKeyAction = withActionInstrumentation(
+    "deactivateApiKey",
+    async (unsafeData: DeactivateApiKeyBody) => {
+      const session = await auth();
+      const userId = session?.user.id;
+      if (!userId) return { error: "Not logged in" };
 
-    const data = processHistorySchema.safeParse(unsafeData);
-    if (!data.success) return { error: "Invalid data" };
+      const { data, success, error } =
+        deactivateApiKeyBody.safeParse(unsafeData);
+      if (!success) return { error: error.message };
 
-    // perform action
-    await processHistory();
+      await prisma.apiKey.update({
+        where: { id: data.id, userId },
+        data: { isActive: false },
+      });
 
-    revalidatePath("/history");
-  }
+      revalidatePath("/settings");
+    }
+  );
   ```

apps/web/app/(app)/ErrorMessages.tsx

@@ -30,7 +30,7 @@ export async function ErrorMessages() {
               className="mt-2"
             >
               <Button type="submit" variant="red" size="sm">
-                Clear
+                I've fixed them
               </Button>
             </form>
           </>

apps/web/app/(app)/admin/AdminUserControls.tsx

@@ -41,7 +41,9 @@ export const AdminUserControls = () => {
           onClick={async () => {
             setIsProcessing(true);
             const email = getValues("email");
-            const result = await adminProcessHistoryAction(email);
+            const result = await adminProcessHistoryAction({
+              emailAddress: email,
+            });
             handleActionResult(result, `Processed history for ${email}`);
             setIsProcessing(false);
           }}

apps/web/app/(app)/automation/RulesPrompt.tsx

@@ -3,7 +3,6 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
-import Link from "next/link";
 import { useForm } from "react-hook-form";
 import useSWR from "swr";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -30,6 +29,7 @@ import { SectionHeader } from "@/components/Typography";
 import type { RulesPromptResponse } from "@/app/api/user/rules/prompt/route";
 import { LoadingContent } from "@/components/LoadingContent";
 import { Tooltip } from "@/components/Tooltip";
+import { handleActionCall } from "@/utils/server-action";
 
 const examplePrompts = [
   'Label newsletters as "Newsletter" and archive them',
@@ -96,36 +96,37 @@ function RulesPromptForm({
       setIsSubmitting(true);
 
       const saveRulesPromise = async (data: SaveRulesPromptBody) => {
-        try {
-          const result = await saveRulesPromptAction(data);
-          console.log("saveRulesPromptAction completed", result);
-          setIsSubmitting(false);
-          if (isActionError(result)) {
-            throw new Error(result.error);
-          }
-
-          router.push("/automation?tab=rules");
-          mutate();
-          setIsSubmitting(false);
+        setIsSubmitting(true);
+        const result = await handleActionCall("saveRulesPromptAction", () =>
+          saveRulesPromptAction(data),
+        );
 
-          return result;
-        } catch (error) {
+        if (isActionError(result)) {
           setIsSubmitting(false);
-          captureException(error);
-          throw error;
+          throw new Error(result.error);
         }
+
+        router.push("/automation?tab=rules");
+        mutate();
+        setIsSubmitting(false);
+
+        return result;
       };
 
       toast.promise(() => saveRulesPromise(data), {
         loading: "Saving rules... This may take a while to process...",
         success: (result) => {
           const { createdRules, editedRules, removedRules } = result || {};
 
-          return `Rules saved successfully! ${[
-            createdRules ? `${createdRules} rules created. ` : "",
-            editedRules ? `${editedRules} rules edited. ` : "",
-            removedRules ? `${removedRules} rules removed. ` : "",
-          ].join("")}`;
+          const message = [
+            createdRules ? `${createdRules} rules created.` : "",
+            editedRules ? `${editedRules} rules edited.` : "",
+            removedRules ? `${removedRules} rules removed.` : "",
+          ]
+            .filter(Boolean)
+            .join(" ");
+
+          return `Rules saved successfully! ${message}`;
         },
         error: (err) => {
           return `Error saving rules: ${err.message}`;
@@ -198,27 +199,26 @@ Feel free to add as many as you want:
                       if (isSubmitting || isGenerating) return;
                       toast.promise(
                         async () => {
-                          try {
-                            setIsGenerating(true);
-                            const result = await generateRulesPromptAction();
-                            setIsGenerating(false);
-                            if (isActionError(result))
-                              throw new Error(result.error);
-                            if (!result)
-                              throw new Error("Unable to generate prompt");
-
-                            const currentPrompt = getValues("rulesPrompt");
-                            const updatedPrompt = currentPrompt
-                              ? `${currentPrompt}\n\n${result.rulesPrompt}`
-                              : result.rulesPrompt;
-                            setValue("rulesPrompt", updatedPrompt.trim());
+                          setIsGenerating(true);
+                          const result = await handleActionCall(
+                            "generateRulesPromptAction",
+                            generateRulesPromptAction,
+                          );
 
-                            return result;
-                          } catch (error) {
+                          if (isActionError(result)) {
                             setIsGenerating(false);
-                            captureException(error);
-                            throw error;
+                            throw new Error(result.error);
                           }
+
+                          const currentPrompt = getValues("rulesPrompt");
+                          const updatedPrompt = currentPrompt
+                            ? `${currentPrompt}\n\n${result.rulesPrompt}`
+                            : result.rulesPrompt;
+                          setValue("rulesPrompt", updatedPrompt.trim());
+
+                          setIsGenerating(false);
+
+                          return result;
                         },
                         {
                           loading: "Generating prompt...",

apps/web/app/(landing)/components/page.tsx

@@ -143,9 +143,10 @@ export default function Components() {
           </div>
         </div>
 
-        <TestErrorButton />
-
-        <TestActionButton />
+        <div className="flex gap-2">
+          <TestErrorButton />
+          <TestActionButton />
+        </div>
       </div>
     </Container>
   );

apps/web/components/email-list/EmailList.tsx

@@ -230,6 +230,8 @@ export function EmailList(props: {
           if (isActionError(result)) {
             setIsCategorizing((s) => ({ ...s, [thread.id]: false }));
             throw new Error(`There was an error categorizing the email.`);
+          } else if (!result) {
+            throw new Error("The request did not complete");
           } else {
             // setCategory(res);
             refetch();

apps/web/utils/actions/admin.ts

@@ -3,27 +3,34 @@
 import { auth } from "@/app/api/auth/[...nextauth]/auth";
 import { processHistoryForUser } from "@/app/api/google/webhook/process-history";
 import { isAdmin } from "@/utils/admin";
-import type { ServerActionResponse } from "@/utils/error";
+import { withActionInstrumentation } from "@/utils/actions/middleware";
 
-export async function adminProcessHistoryAction(
-  emailAddress: string,
-  historyId?: number,
-  startHistoryId?: number,
-): Promise<ServerActionResponse> {
-  const session = await auth();
-  const userId = session?.user.id;
-  if (!userId) return { error: "Not logged in" };
-  if (!isAdmin(session.user.email)) return { error: "Not admin" };
+export const adminProcessHistoryAction = withActionInstrumentation(
+  "adminProcessHistory",
+  async ({
+    emailAddress,
+    historyId,
+    startHistoryId,
+  }: {
+    emailAddress: string;
+    historyId?: number;
+    startHistoryId?: number;
+  }) => {
+    const session = await auth();
+    const userId = session?.user.id;
+    if (!userId) return { error: "Not logged in" };
+    if (!isAdmin(session.user.email)) return { error: "Not admin" };
 
-  console.log(`Processing history for ${emailAddress}`);
+    console.log(`Processing history for ${emailAddress}`);
 
-  await processHistoryForUser(
-    {
-      emailAddress,
-      historyId: historyId ? historyId : 0,
-    },
-    {
-      startHistoryId: startHistoryId ? startHistoryId.toString() : undefined,
-    },
-  );
-}
+    await processHistoryForUser(
+      {
+        emailAddress,
+        historyId: historyId ? historyId : 0,
+      },
+      {
+        startHistoryId: startHistoryId ? startHistoryId.toString() : undefined,
+      },
+    );
+  },
+);

apps/web/utils/actions/categorize.ts

@@ -57,6 +57,6 @@ export const categorizeAction = withActionInstrumentation(
       { email: u.email! },
     );
 
-    return res;
+    return { category: res?.category };
   },
 );

apps/web/utils/actions/error-messages.ts

@@ -2,12 +2,15 @@
 
 import { revalidatePath } from "next/cache";
 import { auth } from "@/app/api/auth/[...nextauth]/auth";
-import { ServerActionResponse } from "@/utils/error";
 import { clearUserErrorMessages } from "@/utils/error-messages";
+import { withActionInstrumentation } from "@/utils/actions/middleware";
 
-export async function clearUserErrorMessagesAction(): Promise<ServerActionResponse> {
-  const session = await auth();
-  if (!session?.user) return { error: "Not logged in" };
-  await clearUserErrorMessages(session.user.id);
-  revalidatePath("/(app)", "layout");
-}
+export const clearUserErrorMessagesAction = withActionInstrumentation(
+  "clearUserErrorMessages",
+  async () => {
+    const session = await auth();
+    if (!session?.user) return { error: "Not logged in" };
+    await clearUserErrorMessages(session.user.id);
+    revalidatePath("/(app)", "layout");
+  },
+);