feat: custom error page

app/error.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{ error: NuxtError }>()
+</script>
+
+<template>
+  <UApp>
+    <div class="min-h-screen flex items-center justify-center">
+      <div class="text-center space-y-2">
+        <p class="text-8xl font-black tracking-tight">404</p>
+        <p class="text-lg font-medium">This link doesn't exist.</p>
+        <p class="text-muted text-sm">
+          Maybe check out
+          <a
+            href="https://pihkaal.me"
+            class="underline underline-offset-2 hover:text-default transition-colors"
+          >pihkaal.me</a>
+          instead?
+        </p>
+      </div>
+    </div>
+  </UApp>
+</template>

app/plugins/redirect-error.server.ts

@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(() => {
+  const event = useRequestEvent()
+  if (event?.context.redirectNotFound) {
+    showError({ statusCode: 404, message: 'Link not found' })
+  }
+})

server/middleware/redirect.ts

@@ -15,16 +15,13 @@ export default defineEventHandler(async (event) => {
 
   const path = getRequestURL(event).pathname;
 
-  const link = await db.query.links.findFirst({
+  let link = await db.query.links.findFirst({
     where: eq(tables.links.path, path),
   });
 
-  if (!link) {
-    throw createError({ statusCode: 404, message: "Not found" });
-  }
-
-  if (link.disabled) {
-    throw createError({ statusCode: 410, message: "This link has been disabled" });
+  if (!link || link.disabled) {
+    event.context.redirectNotFound = true;
+    return;
   }
 
   return sendRedirect(event, link.url, 302);