From 8b4cf2297ae6ce4b6efcb733a6b9d5e0029d1f9c Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Mon, 2 Feb 2026 20:00:56 +0600
Subject: [PATCH 1/3] chore: ignore internal HTTP detail

---
 app/error.vue                      | 20 ++++++++++++++++++--
 app/pages/package/[...package].vue |  5 +----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/error.vue b/app/error.vue
index 7bb9ed11d3..6add87db71 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -20,6 +20,22 @@ const statusText = computed(() => {
   }
 })
 
+// Sanitize error messages to hide internal details (e.g., HTTP methods, registry URLs)
+const sanitizedMessage = computed(() => {
+  const msg = props.error.message
+  if (!msg) return null
+
+  // Clean up messages that expose internal HTTP details like:
+  // [GET] "https://registry.npmjs.org/...": 404 Not Found
+  // Extract just the status part (e.g., "404 Not Found")
+  const httpMatch = msg.match(/^\[(GET|POST|PUT|DELETE|PATCH)\]\s+"https?:\/\/[^"]+"\s*:\s*(.+)$/)
+  if (httpMatch) {
+    return httpMatch[2] // Return just "404 Not Found" part
+  }
+
+  return msg
+})
+
 function handleError() {
   clearError({ redirect: '/' })
 }
@@ -43,10 +59,10 @@ useHead({
       </h1>
 
       <p
-        v-if="error.message && error.message !== statusText"
+        v-if="sanitizedMessage && sanitizedMessage !== statusText"
         class="text-fg-muted text-base max-w-md mb-8"
       >
-        {{ error.message }}
+        {{ sanitizedMessage }}
       </p>
 
       <button
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 7b0c1c8384..913200f61f 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1105,12 +1105,9 @@ defineOgImageComponent('Package', {
       role="alert"
       class="flex flex-col items-center py-20 text-center"
     >
-      <h1 class="font-mono text-2xl font-medium mb-4">
+      <h1 class="font-mono text-2xl font-medium mb-8">
         {{ $t('package.not_found') }}
       </h1>
-      <p class="text-fg-muted mb-8">
-        {{ error?.message ?? $t('package.not_found_message') }}
-      </p>
       <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
   </main>

From 60aecfeb144c12deae15e8142fe4c27e31ad735b Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Mon, 2 Feb 2026 21:12:39 +0600
Subject: [PATCH 2/3] chore: update

---
 app/pages/package/[...package].vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 913200f61f..36d3421e5e 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -106,11 +106,7 @@ const { data: moduleReplacement } = useModuleReplacement(packageName)
 
 const { data: resolvedVersion } = await useResolvedVersion(packageName, requestedVersion)
 
-const {
-  data: pkg,
-  status,
-  error,
-} = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
+const { data: pkg, status } = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
 // Process package description

From 65b06e90fdef3b5233c044194471094fc8fd2486 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Feb 2026 16:47:52 +0000
Subject: [PATCH 3/3] fix: throw early error for package 404s

---
 app/error.vue                      | 20 ++------------------
 app/pages/package/[...package].vue | 30 +++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/app/error.vue b/app/error.vue
index 6add87db71..7bb9ed11d3 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -20,22 +20,6 @@ const statusText = computed(() => {
   }
 })
 
-// Sanitize error messages to hide internal details (e.g., HTTP methods, registry URLs)
-const sanitizedMessage = computed(() => {
-  const msg = props.error.message
-  if (!msg) return null
-
-  // Clean up messages that expose internal HTTP details like:
-  // [GET] "https://registry.npmjs.org/...": 404 Not Found
-  // Extract just the status part (e.g., "404 Not Found")
-  const httpMatch = msg.match(/^\[(GET|POST|PUT|DELETE|PATCH)\]\s+"https?:\/\/[^"]+"\s*:\s*(.+)$/)
-  if (httpMatch) {
-    return httpMatch[2] // Return just "404 Not Found" part
-  }
-
-  return msg
-})
-
 function handleError() {
   clearError({ redirect: '/' })
 }
@@ -59,10 +43,10 @@ useHead({
       </h1>
 
       <p
-        v-if="sanitizedMessage && sanitizedMessage !== statusText"
+        v-if="error.message && error.message !== statusText"
         class="text-fg-muted text-base max-w-md mb-8"
       >
-        {{ sanitizedMessage }}
+        {{ error.message }}
       </p>
 
       <button
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 36d3421e5e..c89fca53b1 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -104,9 +104,30 @@ const { data: skillsData } = useLazyFetch<SkillsListResponse>(
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
 
-const { data: resolvedVersion } = await useResolvedVersion(packageName, requestedVersion)
+const {
+  data: resolvedVersion,
+  status: versionStatus,
+  error: versionError,
+} = await useResolvedVersion(packageName, requestedVersion)
+
+if (
+  versionStatus.value === 'error' &&
+  versionError.value?.statusCode &&
+  versionError.value.statusCode >= 400 &&
+  versionError.value.statusCode < 500
+) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('package.not_found'),
+    message: $t('package.not_found_message'),
+  })
+}
 
-const { data: pkg, status } = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
+const {
+  data: pkg,
+  status,
+  error,
+} = usePackage(packageName, resolvedVersion.value ?? requestedVersion)
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 
 // Process package description
@@ -1101,9 +1122,12 @@ defineOgImageComponent('Package', {
       role="alert"
       class="flex flex-col items-center py-20 text-center"
     >
-      <h1 class="font-mono text-2xl font-medium mb-8">
+      <h1 class="font-mono text-2xl font-medium mb-4">
         {{ $t('package.not_found') }}
       </h1>
+      <p class="text-fg-muted mb-8">
+        {{ error?.message ?? $t('package.not_found_message') }}
+      </p>
       <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
   </main>