13 - Handling Errors

README.md

@@ -41,15 +41,13 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 9. [Streaming ♻️][2-9]
 10. Partial Prerendering ✅ (_no code, theory / beta functionality_)
 11. [Adding Search and Pagination ♻️][2-11]
-12. [Mutating Data️][2-12]
-13. Handling Errors 🚧 
+12. [Mutating Data️ ♻️][2-12]
+13. [Handling Errors ♻️][2-13]
 14. Improving Accessibility 🚧 
 15. Adding Authentication 🚧  
 16. Adding Metadata 🚧️ 
 
 
-
-
 [2-1]: https://github.com/treejamie/next-js-learn/pull/7
 [2-2]: https://github.com/treejamie/next-js-learn/pull/9
 [2-3]: https://github.com/treejamie/next-js-learn/pull/10
@@ -60,4 +58,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-8]: https://github.com/treejamie/next-js-learn/pull/16
 [2-9]: https://github.com/treejamie/next-js-learn/pull/17
 [2-11]: https://github.com/treejamie/next-js-learn/pull/19
-[2-12]: https://github.com/treejamie/next-js-learn/pull/20
+[2-12]: https://github.com/treejamie/next-js-learn/pull/20
+[2-13]: https://github.com/treejamie/next-js-learn/pull/23

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

@@ -0,0 +1,18 @@
+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-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-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/page.tsx

@@ -1,6 +1,7 @@
 import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
+import { notFound } from 'next/navigation';
 
 
 export default async function Page(props: { params: Promise<{ id: string }> }) {
@@ -11,6 +12,10 @@ export default async function Page(props: { params: Promise<{ id: string }> }) {
         fetchCustomers(),
       ]);
 
+    if (!invoice) {
+        notFound();
+    }
+
     return (
         <main>
             <Breadcrumbs

app-router/nextjs-dashboard/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>
+  );
+}

app-router/nextjs-dashboard/app/lib/actions.ts

@@ -24,6 +24,9 @@ const UpdateInvoice = FormSchema.omit({ id: true, date: true });
 
 
 export async function deleteInvoice(id: string) {
+
+  throw new Error('Failed to Delete Invoice');
+
   await sql`DELETE FROM invoices WHERE id = ${id}`;
   revalidatePath('/dashboard/invoices');
 }
@@ -36,12 +39,16 @@ export async function updateInvoice(id: string, 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}
+    `;
+  } catch (error){
+    console.log(error)
+  }
 
   revalidatePath('/dashboard/invoices');
   redirect('/dashboard/invoices');
@@ -60,11 +67,16 @@ export async function createInvoice(formData: FormData){
     // floating point errors.
     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})
+      `;
+    } catch(error){
+      console.log(error)
+    }
+
     revalidatePath('/dashboard/invoices');
     redirect('/dashboard/invoices');
 }