implement error handling

README.md

@@ -570,6 +570,74 @@ export default async function Page(props: {
 }
 ```
 
+## Error handling
+Error handling works in `TypeScript` the same way like in JS.
+```tsx
+try{
+    await sql`DELETE FROM invoices WHERE id = ${id}`;
+} catch (error){
+    console.error(error);
+}
+```
+
+> Redirects have to be outside of a try & catch block, becuase a redirect would cause to trigger a error each time it's executed.
+
+A error also can be thrown manually by using `throw`.
+```tsx
+throw new Error('Failed to delete invoice.');
+```
+
+To show an error also to the user instead only on the server you can add a `error.tsx` file. This file needs to be a client component.
+
+Here is a simple example for a such error page:
+```tsx
+'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>
+  );
+}
+```
+
+It's also possible to create separate error pages for specific errors. An example would be a not found page.
+
+A redirect to a not found page can be implemented with `notFound` from `next/navigation`.
+
+```tsx
+import { notFound } from 'next/navigation';
+
+if(!invoice){
+    notFound();
+}
+```
+
+Therefor the file `not-found.tsx` should be created with the UI you want to show, when something is not found.
+Thoose specific error pages will be shown before the general error page.
 
 
 ## Ressources

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

dashboard-app-course/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 { fetchCustomers, fetchInvoiceById } from '@/app/lib/data';
+import { notFound } from 'next/navigation';
 
 export default async function Page(props: {
     params: Promise<{
@@ -14,6 +15,10 @@ export default async function Page(props: {
         fetchCustomers(),
     ]);
 
+    if(!invoice){
+        notFound();
+    }
+
     return (
         <main>
             <Breadcrumbs

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

dashboard-app-course/app/lib/actions.ts

@@ -27,10 +27,14 @@ export async function createInvoice(formData: FormData){
     const amountInCents = amount * 100;
     const date = new Date().toISOString().split('T')[0];
 
+    try{
         await sql`
         INSERT INTO invoices (customer_Id, amount, status, date)
         VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
         `;
+    } catch(error){
+        console.error(error);
+    }
 
     revalidatePath('/dashboard/invoices');
     redirect('/dashboard/invoices');
@@ -46,17 +50,27 @@ export async function updateInvoice(id: string, formData: FormData){
     });
 
     const amountInCents = amount * 100;
+
+    try{
         await sql`
         UPDATE invoices
         SET customer_id = ${customerId}, amount = ${amountInCents}, status = ${status}
         WHERE id = ${id}
         `;
+    } catch(error){
+        console.error(error);
+    }
 
     revalidatePath('/dashboard/invoices');
     redirect('/dashboard/invoices');
 }
 
 export async function deleteInvoice(id: string){  
+    try{
         await sql`DELETE FROM invoices WHERE id = ${id}`;
+    } catch (error){
+        console.error(error);
+    }
+
     revalidatePath('/dashboard/invoices');
 }