doc: registry error handling (#1212)

Author: franky47

.github/workflows/ci-cd.yml

@@ -410,10 +410,9 @@ jobs:
           echo "version=$VERSION" >> $GITHUB_OUTPUT
           echo "Released version: $VERSION"
         working-directory: packages/nuqs
-      - name: Invalidate ISR caches in the docs
+      - name: Invalidate contributors ISR cache in the docs
         if: ${{ github.event_name == 'push' && github.ref_name == 'master' }}
         run: |
-          curl -s "https://nuqs.dev/api/isr?tag=npm-version&token=${{ secrets.ISR_TOKEN }}"
           curl -s "https://nuqs.dev/api/isr?tag=contributors&token=${{ secrets.ISR_TOKEN }}"
       - name: Install dependencies
         if: ${{ github.event_name == 'push' && steps.package-version.outputs.version != '0.0.0-semantically-released' }}

packages/docs/src/app/(pages)/stats/lib/npm.ts

@@ -133,7 +133,7 @@ export async function fetchNpmPackage(
 async function get(url: string): Promise<unknown> {
   const res = await fetch(url, {
     next: {
-      revalidate: 86_400,
+      revalidate: 6 * 60 * 60, // 6 hours
       tags: ['npm-stats']
     }
   })

packages/docs/src/app/api/isr/route.ts

@@ -5,7 +5,6 @@ const ACCEPTED_TAGS = [
   'github',
   'github-actions-status',
   'npm-stats',
-  'npm-version',
   'contributors'
 ]
 

packages/docs/src/app/docs/layout.tsx

@@ -2,7 +2,7 @@ import { source } from '@/src/app/source'
 import { getSharedLayoutProps } from '@/src/components/shared-layout'
 import { SidebarFooter } from '@/src/components/sidebar-footer'
 import { DocsLayout } from 'fumadocs-ui/layouts/notebook'
-import { type ReactNode } from 'react'
+import { Suspense, type ReactNode } from 'react'
 
 export default function RootDocsLayout({ children }: { children: ReactNode }) {
   const shared = getSharedLayoutProps()
@@ -15,7 +15,11 @@ export default function RootDocsLayout({ children }: { children: ReactNode }) {
       sidebar={{
         collapsible: false,
         // banner: // note: side banner goes here
-        footer: <SidebarFooter />
+        footer: (
+          <Suspense>
+            <SidebarFooter />
+          </Suspense>
+        )
       }}
     >
       {children}

packages/docs/src/app/registry/[name]/opengraph-image.tsx

@@ -7,15 +7,20 @@ export { contentType, size } from '@/src/components/og-image'
 export const dynamic = 'force-static'
 
 export async function generateStaticParams(): Promise<{ name: string }[]> {
-  const registry = await readRegistry()
+  const [registry, error] = await readRegistry()
+  if (error || !registry) {
+    notFound()
+  }
   return registry.items.map(item => ({ name: item.name }))
 }
 
 // Image generation
 export default async function Image({ params }: PageProps<'/registry/[name]'>) {
   const { name } = await params
-  const item = await readRegistryItem(name).catch(notFound)
-
+  const [item, error] = await readRegistryItem(name).catch(notFound)
+  if (error || !item) {
+    notFound()
+  }
   return generateOpengraphImage({
     title: item.title,
     description: item.description

packages/docs/src/app/registry/[name]/page.tsx

@@ -29,8 +29,11 @@ import remarkSmartypants from 'remark-smartypants'
 
 export default async function Page({ params }: PageProps<'/registry/[name]'>) {
   const { name } = await params
-  const { title, description, files } =
-    await readRegistryItem(name).catch(notFound)
+  const [item, error] = await readRegistryItem(name)
+  if (error || !item) {
+    notFound()
+  }
+  const { title, description, files } = item
   const category = getRegistryItemCategory(name)
   const usage = await readUsage(name)
   return (
@@ -84,15 +87,21 @@ export default async function Page({ params }: PageProps<'/registry/[name]'>) {
 }
 
 export async function generateStaticParams() {
-  const registry = await readRegistry()
+  const [registry, error] = await readRegistry()
+  if (error || !registry) {
+    notFound()
+  }
   return registry.items.map(item => ({ name: item.name }))
 }
 
 export async function generateMetadata({
   params
 }: PageProps<'/registry/[name]'>) {
   const { name } = await params
-  const item = await readRegistryItem(name)
+  const [item, error] = await readRegistryItem(name)
+  if (error || !item) {
+    notFound()
+  }
   return {
     title: item.title,
     description: item.description,

packages/docs/src/app/registry/layout.tsx

@@ -3,6 +3,7 @@ import { SidebarFooter } from '@/src/components/sidebar-footer'
 import { categorizeRegistryItems, readRegistry } from '@/src/registry/read'
 import { DocsLayout } from 'fumadocs-ui/layouts/notebook'
 import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
 import { Suspense, type ReactNode } from 'react'
 
 export const metadata = {
@@ -24,7 +25,10 @@ export default async function RegistryLayout({
   children: ReactNode
 }) {
   const sharedLayoutProps = getSharedLayoutProps()
-  const registry = await readRegistry()
+  const [registry, error] = await readRegistry()
+  if (error || !registry) {
+    notFound()
+  }
   const categories = categorizeRegistryItems(registry)
   return (
     <>

packages/docs/src/app/registry/page.tsx

@@ -26,7 +26,7 @@ export default function Page() {
         <a href="https://ui.shadcn.com/docs/cli" className="underline">
           shadcn CLI
         </a>{' '}
-        to install custom parsers, adapters and utilities from the community.
+        to install custom parsers, adapters, and utilities from the community.
       </DocsDescription>
       <DocsBody>
         <H2 id="using-the-registry">Using the registry</H2>

packages/docs/src/app/registry/rss.xml/route.ts

@@ -1,5 +1,6 @@
 import { getLastModified } from '@/src/lib/get-last-modified'
 import { readRegistry } from '@/src/registry/read'
+import { notFound } from 'next/navigation'
 
 export const dynamic = 'force-static'
 
@@ -14,7 +15,10 @@ export async function GET() {
 
 async function generateRssXml() {
   const baseUrl = 'https://nuqs.dev/registry'
-  const registry = await readRegistry()
+  const [registry, error] = await readRegistry()
+  if (error || !registry) {
+    notFound()
+  }
   const items = await Promise.all(
     registry.items.map(async item => {
       return `<item>

packages/docs/src/components/sidebar-footer.tsx

@@ -1,7 +1,15 @@
-export async function SidebarFooter() {
-  const version = await getLatestVersion()
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function SidebarFooter() {
+  const [version, setVersion] = useState<string | null>(null)
+  useEffect(() => {
+    getLatestVersion().then(setVersion).catch(console.error)
+  }, [])
+  if (!version) return null
   return (
-    <footer className="flex w-full items-baseline gap-2 text-zinc-600 dark:text-zinc-400">
+    <footer className="ml-2 flex w-full items-baseline gap-2 text-zinc-600 dark:text-zinc-400">
       <a
         href={`https://npmjs.com/package/nuqs/v/${version}`}
         className="hover:underline"
@@ -15,11 +23,9 @@ export async function SidebarFooter() {
 
 async function getLatestVersion() {
   try {
-    const res = await fetch('https://registry.npmjs.org/nuqs', {
-      next: {
-        tags: ['npm-version']
-      }
-    }).then(r => r.json())
+    const res = await fetch('https://registry.npmjs.org/nuqs').then(r =>
+      r.json()
+    )
     return res['dist-tags'].latest
   } catch {
     return 'latest'