handle expections for failed fetch

Author: JohanCodeForFun

app/dashboard/invoices/page.tsx

@@ -35,11 +35,11 @@ export default async function Page({
         <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
-       <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
-        <Table query={query} currentPage={currentPage} />
+       <Suspense key={query ?? 0 + currentPage ?? 1} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query ?? 0} currentPage={currentPage} />
       </Suspense>
       <div className="mt-5 flex w-full justify-center">
-        <Pagination totalPages={totalPages} />
+        <Pagination totalPages={totalPages ?? 1} />
       </div>
     </div>
   );

app/ui/dashboard/cards.tsx

@@ -16,11 +16,11 @@ const iconMap = {
 
 export default async function CardWrapper() {
   const {
-    numberOfInvoices,
-    numberOfCustomers,
-    totalPaidInvoices,
-    totalPendingInvoices,
-  } = await fetchCardData();
+    numberOfInvoices = 0,
+    numberOfCustomers = 0,
+    totalPaidInvoices = "0",
+    totalPendingInvoices = "0",
+  } = await fetchCardData() ?? {};
 
   return (
     <>

app/ui/dashboard/latest-invoices.tsx

@@ -14,7 +14,7 @@ export default async function LatestInvoices() {
       </h2>
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
         <div className="bg-white px-6">
-          {latestInvoices.map((invoice, i) => {
+          {latestInvoices && latestInvoices.map((invoice, i) => {
             return (
               <div
                 key={invoice.id}

app/ui/dashboard/revenue-chart.tsx

@@ -10,7 +10,7 @@ import { fetchRevenue } from '@/app/lib/data';
 // https://airbnb.io/visx/
 
 export default async function RevenueChart() {
-  const revenue = await fetchRevenue();
+  const revenue = await fetchRevenue() ?? [];
 
   const chartHeight = 350;