fix: show error page if org doesn't exist

resolves #94

Author: danielroe

app/composables/useNpmRegistry.ts

@@ -287,16 +287,25 @@ export function useNpmSearch(
 /**
  * Fetch all package names in an npm organization
  * Uses the /-/org/{org}/package endpoint
- * Returns empty array if org doesn't exist or has no packages
+ * Throws error with statusCode 404 if org doesn't exist
+ * Returns empty array if org exists but has no packages
  */
 async function fetchOrgPackageNames(orgName: string): Promise<string[]> {
   try {
     const data = await $fetch<Record<string, string>>(
       `${NPM_REGISTRY}/-/org/${encodeURIComponent(orgName)}/package`,
     )
     return Object.keys(data)
-  } catch {
-    // Org doesn't exist or has no packages
+  } catch (err) {
+    // Check if this is a 404 (org not found)
+    if (err && typeof err === 'object' && 'statusCode' in err && err.statusCode === 404) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Organization not found',
+        message: `The organization "@${orgName}" does not exist on npm`,
+      })
+    }
+    // For other errors (network, etc.), return empty array to be safe
     return []
   }
 }

app/error.vue

@@ -5,10 +5,10 @@ const props = defineProps<{
   error: NuxtError
 }>()
 
-const statusCode = computed(() => props.error.statusCode || 500)
-const statusMessage = computed(() => {
-  if (props.error.statusMessage) return props.error.statusMessage
-  switch (statusCode.value) {
+const status = computed(() => props.error.status || 500)
+const statusText = computed(() => {
+  if (props.error.statusText) return props.error.statusText
+  switch (status.value) {
     case 404:
       return 'Page not found'
     case 500:
@@ -25,7 +25,7 @@ function handleError() {
 }
 
 useHead({
-  title: `${statusCode.value} - ${statusMessage.value}`,
+  title: `${status.value} - ${statusText.value}`,
 })
 </script>
 
@@ -35,15 +35,15 @@ useHead({
 
     <main class="flex-1 container flex flex-col items-center justify-center py-20 text-center">
       <p class="font-mono text-8xl sm:text-9xl font-medium text-fg-subtle mb-4">
-        {{ statusCode }}
+        {{ status }}
       </p>
 
       <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-4">
-        {{ statusMessage }}
+        {{ statusText }}
       </h1>
 
       <p
-        v-if="error.message && error.message !== statusMessage"
+        v-if="error.message && error.message !== statusText"
         class="text-fg-muted text-base max-w-md mb-8"
       >
         {{ error.message }}

app/pages/@[org].vue

@@ -37,7 +37,15 @@ watch([filterText, sortOption], ([filter, sort]) => {
 })
 
 // Fetch all packages in this org using the org packages API
-const { data: results, status, error } = useOrgPackages(orgName)
+const { data: results, status, error } = await useOrgPackages(orgName)
+
+if (status.value === 'error' && error.value?.statusCode === 404) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Organization not found',
+    message: `The organization "@${orgName.value}" does not exist on npm`,
+  })
+}
 
 const packages = computed(() => results.value?.objects ?? [])
 const packageCount = computed(() => packages.value.length)