From 33cf1feb98499b426819fe76c28f94a89ce570c8 Mon Sep 17 00:00:00 2001 From: treejamie Date: Thu, 10 Apr 2025 09:09:49 +0100 Subject: [PATCH 1/2] Updated readme --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d4bbf40..0940c76 100644 --- a/README.md +++ b/README.md @@ -41,8 +41,8 @@ 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 🚧️ @@ -60,4 +60,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 \ No newline at end of file +[2-12]: https://github.com/treejamie/next-js-learn/pull/20 +[2-13]: https://github.com/treejamie/next-js-learn/pull/23 \ No newline at end of file From 2c857b68f84a139c4674d20a22e7dc21793c8580 Mon Sep 17 00:00:00 2001 From: treejamie Date: Thu, 10 Apr 2025 09:48:33 +0100 Subject: [PATCH 2/2] 500s and 404s are handled with a hierchy of files - error.tsx and not-found.tsx --- README.md | 2 -- .../invoices/[id]/edit/not-found.tsx | 18 ++++++++++ .../app/dashboard/invoices/[id]/edit/page.tsx | 5 +++ .../app/dashboard/invoices/error.tsx | 31 +++++++++++++++++ .../nextjs-dashboard/app/lib/actions.ts | 34 +++++++++++++------ 5 files changed, 77 insertions(+), 13 deletions(-) create mode 100644 app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/not-found.tsx create mode 100644 app-router/nextjs-dashboard/app/dashboard/invoices/error.tsx diff --git a/README.md b/README.md index 0940c76..451fb42 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,6 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t 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 diff --git a/app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/not-found.tsx b/app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/not-found.tsx new file mode 100644 index 0000000..1373306 --- /dev/null +++ b/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 ( +
+ +

404 Not Found

+

Could not find the requested invoice.

+ + Go Back + +
+ ); +} \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/page.tsx b/app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/page.tsx index ba62230..882a4c0 100644 --- a/app-router/nextjs-dashboard/app/dashboard/invoices/[id]/edit/page.tsx +++ b/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 (
void; +}) { + useEffect(() => { + // Optionally log the error to an error reporting service + console.error(error); + }, [error]); + + return ( +
+

Something went wrong!

+ +
+ ); +} \ No newline at end of file diff --git a/app-router/nextjs-dashboard/app/lib/actions.ts b/app-router/nextjs-dashboard/app/lib/actions.ts index e5c8f5f..1272502 100644 --- a/app-router/nextjs-dashboard/app/lib/actions.ts +++ b/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'); } \ No newline at end of file