fix: unhandled validation error, add Not Found Page (#28)

Author: fityannugroho

app/(main)/[code]/page.tsx

@@ -1,19 +1,21 @@
 import MapDashboard from '@/components/map-dashboard'
 import { config } from '@/lib/config'
 import { Areas, singletonArea } from '@/lib/const'
-import { getSpecificData } from '@/lib/data'
-import { areaCodeSchema, determineAreaByCode, ucWords } from '@/lib/utils'
+import { getSpecificData, GetSpecificDataReturn } from '@/lib/data'
+import { determineAreaByCode, ucWords } from '@/lib/utils'
 import { Metadata, ResolvingMetadata } from 'next'
-import { ZodError } from 'zod'
-import { fromZodError } from 'zod-validation-error'
+import { notFound } from 'next/navigation'
 
 type Props = {
   params: {
     code: string
   }
 }
 
-async function getAreaData(area: Areas, areaCode: string) {
+async function getAreaData(
+  area: Areas,
+  areaCode: string,
+): Promise<GetSpecificDataReturn<Areas>['data']> {
   const res = await getSpecificData(area, areaCode.replaceAll('.', ''))
 
   if (!('data' in res)) {
@@ -30,8 +32,17 @@ export async function generateMetadata(
   { params: { code } }: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
-  const area = determineAreaByCode(code)
-  const areaData = await getAreaData(area, code)
+  let area, areaData: Awaited<ReturnType<typeof getAreaData>>
+  try {
+    area = determineAreaByCode(code)
+    areaData = await getAreaData(area, code)
+  } catch (error) {
+    return {
+      title: 'Area Not Found',
+      description:
+        'The area you are looking for does not exist. Ensure the link is correct or search the data manually in the Main Page.',
+    }
+  }
 
   const url = `${config.appUrl}/${areaData.code}`
   const parentNames = Object.keys(areaData.parent ?? {}).map((parent) =>
@@ -45,7 +56,7 @@ export async function generateMetadata(
     ...parentNames,
   ].join(', ')
 
-  const title = `${areaNames} | ${config.appName}`
+  const title = areaNames
   const description = `See the information about ${areaNames}, Indonesia.`
   const ogImage = `/api/og-image/area/${areaData.code}`
 
@@ -68,25 +79,21 @@ export async function generateMetadata(
 }
 
 export default async function DetailAreaPage({ params }: Props) {
-  let areaCode
-
+  let area, areaData
   try {
-    areaCode = areaCodeSchema.parse(params.code)
+    area = determineAreaByCode(params.code)
+    areaData = await getAreaData(area, params.code)
   } catch (error) {
-    if (error instanceof ZodError) {
-      throw fromZodError(error)
-    }
-    throw error
+    return notFound()
   }
 
-  const area = determineAreaByCode(areaCode)
-  const { parent: parentAreas, ...areaData } = await getAreaData(area, areaCode)
+  const { parent, ...data } = areaData
 
   return (
     <MapDashboard
       defaultSelected={{
-        [singletonArea[area]]: areaData,
-        ...parentAreas,
+        [singletonArea[area]]: data,
+        ...parent,
       }}
     />
   )

app/(main)/page.tsx

@@ -0,0 +1,5 @@
+import MapDashboard from '@/components/map-dashboard'
+
+export default function Home() {
+  return <MapDashboard />
+}

app/api/og-image/area/[code]/route.tsx

@@ -19,7 +19,13 @@ export async function GET(
   request: Request,
   { params: { code } }: { params: { code: string } },
 ) {
-  const area = determineAreaByCode(code)
+  let area
+  try {
+    area = determineAreaByCode(code)
+  } catch (error) {
+    return NextResponse.json({ message: 'Invalid area code' }, { status: 400 })
+  }
+
   const config = featureConfig[area as FeatureAreas]
   const [resBoundary] = await Promise.all([getBoundaryData(area, code)])
 

app/layout.tsx

@@ -16,7 +16,10 @@ const title = config.appName
 const description = config.appDescription
 
 export const metadata: Metadata = {
-  title,
+  title: {
+    template: `%s | ${config.appName}`,
+    default: config.appName,
+  },
   description,
   robots: {
     index: true,

app/not-found.tsx

@@ -0,0 +1,34 @@
+import { Navbar } from '@/components/navbar'
+import { Button } from '@/components/ui/button'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+export const metadata: Metadata = {
+  title: 'Not Found',
+  description:
+    "Sorry, we couldn't find the page or resource you were looking for. It might have been removed, renamed, or did not exist in the first place.",
+}
+
+export default function NotFound() {
+  return (
+    <>
+      <header>
+        <Navbar />
+      </header>
+
+      <main className="flex flex-col items-center justify-center text-center h-[calc(100vh-72px)] px-4 py-16 space-y-4">
+        <ExclamationTriangleIcon className="h-10 w-10 text-yellow-500" />
+        <h1 className="text-2xl font-bold">404 - Not Found</h1>
+        <p className="max-w-prose">
+          Sorry, we couldn&apos;t find the page or resource you were looking
+          for. It might have been removed, renamed, or did not exist in the
+          first place.
+        </p>
+        <Button asChild>
+          <Link href="/">Go to Main Page</Link>
+        </Button>
+      </main>
+    </>
+  )
+}

app/page.tsx

@@ -1,7 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { Areas, parentArea } from './const'
-import { z } from 'zod'
 
 /**
  * Add dot separator for the area code.
@@ -77,19 +76,6 @@ export function getAllParents<Area extends Areas>(area: Area): Areas[] {
   return [parent, ...getAllParents(parent)]
 }
 
-/**
- * Schema for area code, either province, regency, district, or village.
- * The code can be separated by dot (.) or not.
- */
-export const areaCodeSchema = z.string().refine(
-  (code) => {
-    return /^\d{2}(?:\.?\d{2})?(?:\.?\d{2})?(?:\.?\d{4})?$/.test(code)
-  },
-  {
-    message: 'Invalid area code',
-  },
-)
-
 /**
  * Determine the area of the given code.
  * The code can be separated by dot (.) or not.