chore: check route details

Author: alexdln

app/pages/package/[[org]]/[name].vue

@@ -27,6 +27,7 @@ defineOgImageComponent('Package', {
 })
 
 const router = useRouter()
+const route = useRoute()
 
 const header = useTemplateRef('header')
 const isHeaderPinned = shallowRef(false)
@@ -94,8 +95,9 @@ const navExtraOffsetStyle = computed(() => ({
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
 
+console.log(packageName.value, JSON.stringify({...route, requestedVersion: requestedVersion.value, orgName: orgName.value}))
 if (import.meta.server) {
-  assertValidPackageName(packageName.value)
+  assertValidPackageName(packageName.value, JSON.stringify({...route, requestedVersion: requestedVersion.value, orgName: orgName.value}))
 }
 
 // Fetch README for specific version if requested, otherwise latest
@@ -206,9 +208,10 @@ if (
   versionError.value.statusCode >= 400 &&
   versionError.value.statusCode < 500
 ) {
+  // pass information to client somehow
   throw createError({
     statusCode: 404,
-    statusMessage: $t('package.not_found'),
+    statusMessage: $t('package.not_found'), // todo22 add more detailed for stages
     message: $t('package.not_found_message'),
   })
 }
@@ -218,6 +221,7 @@ const {
   status,
   error,
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
+console.log(resolvedVersion.value, requestedVersion.value, pkg.value);
 const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
 const versionSecurityMetadata = computed<PackageVersionInfo[]>(() => {
   if (!pkg.value) return []
@@ -254,7 +258,7 @@ const { copied: copiedVersion, copy: copyVersion } = useClipboard({
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
   packageName,
-  () => resolvedVersion.value ?? '',
+  () => resolvedVersion.value ?? '', // todo22 check early run
 )
 
 const {
@@ -1102,7 +1106,7 @@ const showSkeleton = shallowRef(false)
               {{ $t('package.stats.published') }}
             </dt>
             <dd class="font-mono text-sm text-fg">
-              <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
+              <DateTime v-if="resolvedVersion" :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
             </dd>
           </div>
         </dl>
@@ -1385,6 +1389,7 @@ const showSkeleton = shallowRef(false)
           <PackageCompatibility :engines="displayVersion?.engines" />
 
           <!-- Versions (grouped by release channel) -->
+           <!-- todo22 check condition -->
           <PackageVersions
             v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
             :package-name="pkg.name"

shared/utils/npm.ts

@@ -37,14 +37,14 @@ export async function fetchLatestVersion(name: string): Promise<string | null> {
  * Validate an npm package name and throw an HTTP error if invalid.
  * Uses validate-npm-package-name to check against npm naming rules.
  */
-export function assertValidPackageName(name: string): void {
+export function assertValidPackageName(name: string, meta: string = ""): void {
   const result = validatePackageName(name)
   if (!result.validForNewPackages && !result.validForOldPackages) {
     const errors = [...(result.errors ?? []), ...(result.warnings ?? [])]
     throw createError({
       // TODO: throwing 404 rather than 400 as it's cacheable
       statusCode: 404,
-      message: `Invalid package name: ${errors[0] ?? 'unknown error'}`,
+      message: `Invalid package name: ${errors[0] ?? 'unknown error'}\n${meta}`,
     })
   }
 }