feat(invoices): add fallback UI for uncaught exceptions

app/dashboard/invoices/[id]/edit/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+import { Frown } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <main className="flex h-full flex-col items-center justify-center gap-2">
+      <Frown className="w-10 text-gray-400" />
+      <h2 className="text-xl font-semibold">404 Not Found</h2>
+      <p>Could not find the requested invoice.</p>
+      <Link
+        href="/dashboard/invoices"
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
+      >
+        Go Back
+      </Link>
+    </main>
+  );
+}

app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 import EditInvoice from "@/components/pages/edit-invoice";
 
+import { notFound } from "next/navigation";
 import { getCustomersDTO } from "@/data/customers-dto";
 import { getInvoiceByIdDTO } from "@/data/invoices-dto";
 
@@ -15,5 +16,9 @@ export default async function EditInvoicePage({
     getInvoiceByIdDTO(id),
   ]);
 
+  if (!invoice) {
+    notFound();
+  }
+
   return <EditInvoice customers={customers} invoice={invoice} />;
 }

app/dashboard/invoices/error.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Optionally log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="flex h-full flex-col items-center justify-center">
+      <h2 className="text-center">Something went wrong!</h2>
+      <button
+        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
+        onClick={
+          // Attempt to recover by trying to re-render the invoices route
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </main>
+  );
+}

lib/__tests__/actions.test.ts

@@ -1,7 +1,7 @@
-import { revalidatePath } from "next/cache";
-import { createInvoice, deleteInvoice, updateInvoice } from "../actions";
 import { sql } from "../db";
 import { redirect } from "next/navigation";
+import { revalidatePath } from "next/cache";
+import { createInvoice, deleteInvoice, updateInvoice } from "../actions";
 
 jest.mock("@/lib/db", () => {
   return {
@@ -29,41 +29,107 @@ beforeEach(() => {
 });
 
 describe("createInvoice(formData)", () => {
-  it("create invoice successfully and navigates back to the invoices page", async () => {
-    const mockFormData = new FormData();
+  const mockFormData = new FormData();
 
-    mockFormData.set("amount", "100");
-    mockFormData.set("status", "pending");
-    mockFormData.set("customerId", "1");
+  mockFormData.set("amount", "100");
+  mockFormData.set("status", "pending");
+  mockFormData.set("customerId", "1");
 
+  it("create invoice successfully and navigates back to the invoices page", async () => {
     await createInvoice(mockFormData);
 
     expect(sql).toHaveBeenCalledTimes(1);
     expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
     expect(redirect).toHaveBeenCalledWith("/dashboard/invoices");
   });
+
+  it("handles error gracefully", async () => {
+    jest.isolateModules(async () => {
+      jest.mock("@/data/invoices/create-invoice", () => {
+        const originalModule = jest.requireActual(
+          "@/data/invoices/create-invoice",
+        );
+        return {
+          __esModule: true,
+          ...originalModule,
+          createInvoiceDAL: jest.fn().mockRejectedValue(""),
+        };
+      });
+
+      const { createInvoice } = require("../actions");
+
+      await createInvoice(mockFormData);
+
+      expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
+      expect(redirect).toHaveBeenCalledWith("/dashboard/invoices");
+    });
+  });
 });
 
 describe("updateInvoice(invoiceId, formData)", () => {
-  it("update invoice successfully and navigates back to the invoices page", async () => {
-    const mockFormData = new FormData();
+  const mockFormData = new FormData();
 
-    mockFormData.set("amount", "100");
-    mockFormData.set("status", "pending");
-    mockFormData.set("customerId", "1");
+  mockFormData.set("amount", "100");
+  mockFormData.set("status", "pending");
+  mockFormData.set("customerId", "1");
 
+  it("update invoice successfully and navigates back to the invoices page", async () => {
     await updateInvoice("1", mockFormData);
 
     expect(sql).toHaveBeenCalledTimes(1);
     expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
     expect(redirect).toHaveBeenCalledWith("/dashboard/invoices");
   });
+
+  it("handles error gracefully", async () => {
+    jest.isolateModules(async () => {
+      jest.mock("@/data/invoices/update-invoice", () => {
+        const originalModule = jest.requireActual(
+          "@/data/invoices/update-invoice",
+        );
+        return {
+          __esModule: true,
+          ...originalModule,
+          updateInvoiceDAL: jest.fn().mockRejectedValue(""),
+        };
+      });
+
+      const { updateInvoice } = require("../actions");
+
+      await updateInvoice("1", mockFormData);
+
+      expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
+      expect(redirect).toHaveBeenCalledWith("/dashboard/invoices");
+    });
+  });
 });
 
 describe("deleteInvoice(invoiceId)", () => {
   it("delete invoice successfully and rerender the invoices page", async () => {
     await deleteInvoice("1");
+
     expect(sql).toHaveBeenCalledTimes(1);
     expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
   });
+
+  it("handles error gracefully", async () => {
+    jest.isolateModules(async () => {
+      jest.mock("@/data/invoices/delete-invoice", () => {
+        const originalModule = jest.requireActual(
+          "@/data/invoices/delete-invoice",
+        );
+        return {
+          __esModule: true,
+          ...originalModule,
+          deleteInvoiceDAL: jest.fn().mockRejectedValue(""),
+        };
+      });
+
+      const { deleteInvoice } = require("../actions");
+
+      await deleteInvoice("1");
+
+      expect(revalidatePath).toHaveBeenCalledWith("/dashboard/invoices");
+    });
+  });
 });

lib/actions.ts

@@ -21,12 +21,16 @@ export async function createInvoice(formData: FormData) {
   const date = new Date().toISOString().split("T")[0];
   const amountInCents = amount * 100;
 
-  await createInvoiceDAL({
-    date,
-    status,
-    customerId,
-    amountInCents,
-  });
+  try {
+    await createInvoiceDAL({
+      date,
+      status,
+      customerId,
+      amountInCents,
+    });
+  } catch (error) {
+    console.error(error);
+  }
 
   revalidatePath("/dashboard/invoices");
   redirect("/dashboard/invoices");
@@ -40,12 +44,16 @@ export async function updateInvoice(invoiceId: string, formData: FormData) {
 
   const amountInCents = amount * 100;
 
-  await updateInvoiceDAL({
-    id,
-    status,
-    customerId,
-    amountInCents,
-  });
+  try {
+    await updateInvoiceDAL({
+      id,
+      status,
+      customerId,
+      amountInCents,
+    });
+  } catch (error) {
+    console.error(error);
+  }
 
   revalidatePath("/dashboard/invoices");
   redirect("/dashboard/invoices");
@@ -54,7 +62,11 @@ export async function updateInvoice(invoiceId: string, formData: FormData) {
 export async function deleteInvoice(invoiceId: string) {
   const { id } = deleteInvoiceDTO(invoiceId);
 
-  await deleteInvoiceDAL({ id });
+  try {
+    await deleteInvoiceDAL({ id });
+  } catch (error) {
+    console.error(error);
+  }
 
   revalidatePath("/dashboard/invoices");
 }