feat: add error handling on dynamic pages

Author: VariableVic

src/app/collections/[handle]/page.tsx

@@ -7,10 +7,18 @@ type Props = {
 
 const BASEURL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"
 
+async function getCollection(handle: string) {
+  const res = await fetch(`${BASEURL}/collections?handle=${handle}`)
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch collection: ${handle}`)
+  }
+
+  return res.json()
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { collection } = await fetch(
-    `${BASEURL}/collections?handle=${params.handle}`
-  ).then((res) => res.json())
+  const { collection } = await getCollection(params.handle)
 
   return {
     title: `${collection.title} | Acme Store`,
@@ -19,9 +27,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function CollectionPage({ params }: Props) {
-  const { collection } = await fetch(
-    `${BASEURL}/collections?handle=${params.handle}`
-  ).then((res) => res.json())
+  const { collection } = await getCollection(params.handle)
 
   return <CollectionTemplate collection={collection} />
 }

src/app/order/confirmed/[id]/page.tsx

@@ -6,15 +6,23 @@ type Props = {
   params: { id: string }
 }
 
+async function getOrder(id: string) {
+  const res = await medusaRequest("GET", `/orders/${id}`)
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch order: ${id}`)
+  }
+
+  return res.body
+}
+
 export const metadata: Metadata = {
   title: "Order Confirmed",
   description: "You purchase was successful",
 }
 
 export default async function CollectionPage({ params }: Props) {
-  const { order } = await medusaRequest("GET", `/orders/${params.id}`).then(
-    (res) => res.body
-  )
+  const { order } = await getOrder(params.id)
 
   return <OrderCompletedTemplate order={order} />
 }

src/app/order/details/[id]/page.tsx

@@ -6,10 +6,18 @@ type Props = {
   params: { id: string }
 }
 
+async function getOrder(id: string) {
+  const res = await medusaRequest("GET", `/orders/${id}`)
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch order: ${id}`)
+  }
+
+  return res.body
+}
+
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { order } = await medusaRequest("GET", `/orders/${params.id}`).then(
-    (res) => res.body
-  )
+  const { order } = await getOrder(params.id)
 
   return {
     title: `Order #${order.display_id}`,
@@ -18,9 +26,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function CollectionPage({ params }: Props) {
-  const { order } = await medusaRequest("GET", `/orders/${params.id}`).then(
-    (res) => res.body
-  )
+  const { order } = await getOrder(params.id)
 
   return <OrderCompletedTemplate order={order} />
 }

src/app/products/[handle]/page.tsx

@@ -6,12 +6,22 @@ type Props = {
   params: { handle: string }
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { products } = await medusaRequest("GET", "/products", {
+async function getProducts(handle: string) {
+  const res = await medusaRequest("GET", "/products", {
     query: {
-      handle: params.handle,
+      handle,
     },
-  }).then((res) => res.body)
+  })
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch product: ${handle}`)
+  }
+
+  return res.body
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { products } = await getProducts(params.handle)
 
   const product = products[0]
 
@@ -27,11 +37,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function CollectionPage({ params }: Props) {
-  const { products } = await medusaRequest("GET", "/products", {
-    query: {
-      handle: params.handle,
-    },
-  }).then((res) => res.body)
+  const { products } = await getProducts(params.handle)
 
   return <ProductTemplate product={products[0]} />
 }

src/lib/medusa-fetch/index.ts

@@ -40,6 +40,7 @@ export default async function medusaRequest(
 
     return {
       status: result.status,
+      ok: result.ok,
       body,
     }
   } catch (error: any) {