Code for Chapter 11 - Error Handling

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

@@ -0,0 +1,15 @@
+import Link from 'next/link';
+import { FaceFrownIcon } from '@heroicons/react/24/outline';
+
+export default function NotFound() {
+  return (
+    <main className="flex h-full flex-col items-center justify-center gap-2">
+      <FaceFrownIcon className="w-12 text-gray-400" />
+      <h2 className="text-lg font-semibold">Not Found</h2>
+      <p>Could not find the requested invoice.</p>
+      <button className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white">
+        <Link href="/dashboard/invoices">Go Back</Link>
+      </button>
+    </main>
+  );
+}

dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,6 +1,6 @@
-import { notFound } from 'next/navigation';
 import { fetchInvoiceById, fetchAllCustomers } from '@/app/lib/data';
 import { updateInvoice } from '@/app/lib/actions';
+import { notFound } from 'next/navigation';
 
 export default async function Page({ params }: { params: { id: string } }) {
   const id = params.id;

dashboard/15-final/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-black px-4 py-2 text-sm text-white"
+        onClick={
+          // Attempt to recover by trying to re-render the invoices route
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </main>
+  );
+}

dashboard/15-final/app/lib/actions.ts

@@ -26,13 +26,17 @@ export async function createInvoice(formData: FormData) {
   const amountInCents = amount * 100;
   const date = new Date().toISOString().split('T')[0];
 
-  await sql`
-    INSERT INTO invoices (customer_id, amount, status, date)
-    VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
-  `;
+  try {
+    await sql`
+        INSERT INTO invoices (customer_id, amount, status, date)
+        VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
+      `;
 
-  revalidatePath('/dashboard/invoices');
-  redirect('/dashboard/invoices');
+    revalidatePath('/dashboard/invoices');
+    redirect('/dashboard/invoices');
+  } catch (error) {
+    throw new Error('Failed to Create Invoice');
+  }
 }
 
 export async function updateInvoice(formData: FormData) {
@@ -45,21 +49,30 @@ export async function updateInvoice(formData: FormData) {
 
   const amountInCents = amount * 100;
 
-  await sql`
-    UPDATE invoices
-    SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
-    WHERE id = ${id}
-  `;
+  try {
+    await sql`
+      UPDATE invoices
+      SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
+      WHERE id = ${id}
+    `;
 
-  revalidatePath('/dashboard/invoices');
-  redirect('/dashboard/invoices');
+    revalidatePath('/dashboard/invoices');
+    redirect('/dashboard/invoices');
+  } catch (error) {
+    throw new Error('Failed to Update Invoice');
+  }
 }
 
 export async function deleteInvoice(formData: FormData) {
   const { id } = DeleteInvoice.parse({
     id: formData.get('id'),
   });
 
-  await sql`DELETE FROM invoices WHERE id = ${id}`;
-  revalidatePath('/dashboard/invoices');
+  try {
+    await sql`DELETE FROM invoices WHERE id = ${id}`;
+    revalidatePath('/dashboard/invoices');
+    return { message: 'Deleted Invoice' };
+  } catch (error) {
+    throw new Error('Failed to Delete Invoice');
+  }
 }

dashboard/15-final/app/lib/data.ts

@@ -149,12 +149,14 @@ export async function fetchInvoiceById(id: string) {
       amount: invoice.amount / 100,
     }));
 
-    return invoice[0] as {
-      id: string;
-      amount: number;
-      status: string;
-      name: string;
-    };
+    return invoice[0] as
+      | {
+          id: string;
+          amount: number;
+          status: string;
+          name: string;
+        }
+      | undefined;
   } catch (error) {
     console.error('Database Error:', error);
     throw new Error('Failed to fetch invoice.');