Merge pull request #15584 from ethereum/500-404-patches

fix: Error (500) and Not Found (404) routing logic

Author: pettinarip

app/[locale]/[...slug]/page.tsx

@@ -1,14 +1,20 @@
 import { pick } from "lodash"
 import { notFound } from "next/navigation"
-import { getMessages, setRequestLocale } from "next-intl/server"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
+
+import { SlugPageParams } from "@/lib/types"
 
 import I18nProvider from "@/components/I18nProvider"
 import mdComponents from "@/components/MdComponents"
 
 import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { dateToString } from "@/lib/utils/date"
 import { getLayoutFromSlug } from "@/lib/utils/layout"
-import { getPostSlugs } from "@/lib/utils/md"
+import { checkPathValidity, getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { LOCALES_CODES } from "@/lib/constants"
@@ -23,20 +29,15 @@ const loadData = dataLoader([["gfissues", fetchGFIs]])
 export default async function Page({
   params,
 }: {
-  params: Promise<{ locale: string; slug: string[] }>
+  params: Promise<SlugPageParams>
 }) {
   const { locale, slug: slugArray } = await params
 
   // Check if this specific path is in our valid paths
   const validPaths = await generateStaticParams()
-  const isValidPath = validPaths.some(
-    (path) =>
-      path.locale === locale && path.slug.join("/") === slugArray.join("/")
-  )
+  const isValidPath = checkPathValidity(validPaths, await params)
 
-  if (!isValidPath) {
-    notFound()
-  }
+  if (!isValidPath) notFound()
 
   // Enable static rendering
   setRequestLocale(locale)
@@ -97,27 +98,45 @@ export default async function Page({
 }
 
 export async function generateStaticParams() {
-  const slugs = await getPostSlugs("/")
-
-  return LOCALES_CODES.flatMap((locale) =>
-    slugs.map((slug) => ({
-      slug: slug.split("/").slice(1),
-      locale,
-    }))
-  )
+  try {
+    const slugs = await getPostSlugs("/")
+
+    return LOCALES_CODES.flatMap((locale) =>
+      slugs.map((slug) => ({
+        slug: slug.split("/").slice(1),
+        locale,
+      }))
+    )
+  } catch (error) {
+    // If content directory doesn't exist (e.g., in Netlify serverless environment),
+    // return empty array to allow ISR to handle all routes dynamically
+    console.warn(
+      "Content directory not found, enabling full dynamic routing:",
+      error
+    )
+    return []
+  }
 }
 
-export const dynamicParams = false
-
 export async function generateMetadata({
   params,
 }: {
-  params: Promise<{ locale: string; slug: string[] }>
+  params: Promise<SlugPageParams>
 }) {
   const { locale, slug } = await params
 
-  return await getMdMetadata({
-    locale,
-    slug,
-  })
+  try {
+    return await getMdMetadata({
+      locale,
+      slug,
+    })
+  } catch (error) {
+    const t = await getTranslations({ locale, namespace: "common" })
+
+    // Return basic metadata for invalid paths
+    return {
+      title: t("page-not-found"),
+      description: t("page-not-found-description"),
+    }
+  }
 }

app/[locale]/error.tsx

@@ -1,32 +1,54 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 
+import RefreshCW from "@/components/icons/refresh-cw.svg"
 import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
+import { Button } from "@/components/ui/buttons/Button"
 import { BaseLink } from "@/components/ui/Link"
 
+import { cn } from "@/lib/utils/cn"
+
 export default function Error({ error }: { error: Error; reset: () => void }) {
+  const [refreshing, setRefreshing] = useState(false)
+  const handleRefresh = () => {
+    setRefreshing(true)
+    window.location.reload()
+  }
+
+  useEffect(() => {
+    // Scroll view to top on error
+    window.scrollTo(0, 0)
+  }, [])
+
   useEffect(() => {
     // TODO: log the error to an error reporting service
     console.error(error)
   }, [error])
 
   return (
-    <div className="mx-auto mb-0 mt-16 flex w-full flex-col items-center">
-      <MainArticle className="my-8 w-full space-y-8 px-8 py-4">
-        <h1>
-          <Translation id="error-page-title" />
-        </h1>
-        <p className="mb-4">
-          <Translation id="error-page-description" />
-        </p>
-        <p>
-          <BaseLink href="/">
-            <Translation id="error-page-home-link" />
-          </BaseLink>
-        </p>
-      </MainArticle>
-    </div>
+    <MainArticle className="mb-32 mt-24 w-full space-y-8 px-8 py-4 md:mb-48 md:mt-32">
+      <h1>
+        <Translation id="error-page-title" />
+      </h1>
+      <p className="mb-4">
+        <Translation id="error-page-description" />
+      </p>
+
+      <Button onClick={handleRefresh}>
+        <RefreshCW
+          className={cn(
+            "size-5",
+            refreshing && "motion-safe:animate-spin motion-reduce:animate-pulse"
+          )}
+        />
+        <Translation id="refresh" />
+      </Button>
+
+      <BaseLink href="/" className="block">
+        <Translation id="error-page-home-link" />
+      </BaseLink>
+    </MainArticle>
   )
 }

app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import { pick } from "lodash"
+import { notFound } from "next/navigation"
 import {
   getMessages,
   getTranslations,
@@ -23,6 +24,8 @@ import {
   BLOG_FEEDS,
   BLOGS_WITHOUT_FEED,
   CALENDAR_DISPLAY_COUNT,
+  DEFAULT_LOCALE,
+  LOCALES_CODES,
   RSS_DISPLAY_COUNT,
 } from "@/lib/constants"
 
@@ -61,6 +64,8 @@ const loadData = dataLoader(
 const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
   const { locale } = await params
 
+  if (!LOCALES_CODES.includes(locale)) return notFound()
+
   setRequestLocale(locale)
 
   const [
@@ -142,14 +147,26 @@ export async function generateMetadata({
 }) {
   const { locale } = await params
 
-  const t = await getTranslations({ locale, namespace: "page-index" })
+  try {
+    const t = await getTranslations({ locale, namespace: "page-index" })
+    return await getMetadata({
+      locale,
+      slug: [""],
+      title: t("page-index-meta-title"),
+      description: t("page-index-meta-description"),
+    })
+  } catch (error) {
+    const t = await getTranslations({
+      locale: DEFAULT_LOCALE,
+      namespace: "common",
+    })
 
-  return await getMetadata({
-    locale,
-    slug: [""],
-    title: t("page-index-meta-title"),
-    description: t("page-index-meta-description"),
-  })
+    // Return basic metadata for invalid paths
+    return {
+      title: t("page-not-found"),
+      description: t("page-not-found-description"),
+    }
+  }
 }
 
 export default Page

app/not-found.tsx

@@ -1,15 +1,13 @@
-"use client"
-
-import Error from "next/error"
+import NotFoundPage from "@/components/NotFoundPage"
 
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
-export default function GlobalNotFound() {
+import LocaleLayout from "./[locale]/layout"
+
+export default async function GlobalNotFound() {
   return (
-    <html lang={DEFAULT_LOCALE}>
-      <body>
-        <Error statusCode={404} />
-      </body>
-    </html>
+    <LocaleLayout params={{ locale: DEFAULT_LOCALE }}>
+      <NotFoundPage />
+    </LocaleLayout>
   )
 }

src/components/NotFoundPage/index.tsx

@@ -1,23 +1,21 @@
+"use client"
+
 import MainArticle from "../MainArticle"
-import Translation from "../Translation"
 import InlineLink from "../ui/Link"
 
+import useTranslation from "@/hooks/useTranslation"
+
 function NotFoundPage() {
+  const { t } = useTranslation("common")
+
   return (
-    <div className="mx-auto mb-0 mt-16 flex w-full flex-col items-center">
-      <MainArticle className="my-8 w-full space-y-8 px-8 py-4">
-        <h1>
-          <Translation id="we-couldnt-find-that-page" />
-        </h1>
-        <p>
-          <Translation id="try-using-search" />{" "}
-          <InlineLink href="/">
-            <Translation id="return-home" />
-          </InlineLink>
-          .
-        </p>
-      </MainArticle>
-    </div>
+    <MainArticle className="mb-32 mt-24 w-full space-y-8 px-8 py-4 md:mb-48 md:mt-32">
+      <h1>{t("we-couldnt-find-that-page")}</h1>
+      <p>
+        {t("try-using-search")}{" "}
+        <InlineLink href="/">{t("return-home")}</InlineLink>.
+      </p>
+    </MainArticle>
   )
 }
 

src/components/icons/refresh-cw.svg

@@ -80,6 +80,9 @@
   "enterprise": "Enterprise",
   "enterprise-mainnet": "Enterprise - Mainnet Ethereum",
   "enterprise-menu": "Enterprise Menu",
+  "error-page-title": "Oops! Something went wrong",
+  "error-page-description": "You can help us improve by reporting this issue on our <a href='https://github.com/ethereum/ethereum-org-website/issues/new?label%3A%22bug%20%F0%9F%90%9B%22&template=bug_report.yaml'>GitHub repository</a>.",
+  "error-page-home-link": "Return to the home page",
   "esp": "Ecosystem Support Program",
   "eth-current-price": "Current ETH price (USD)",
   "ethereum": "Ethereum",
@@ -371,6 +374,8 @@
   "page-languages-want-more-paragraph": "ethereum.org translators are always translating pages in as many languages as possible. To see what they're working on right now or to sign up to join them, read about our",
   "page-languages-words": "words",
   "page-last-updated": "Page last updated",
+  "page-not-found": "Page not found",
+  "page-not-found-description": "The requested page could not be found.",
   "participate": "Participate",
   "participate-menu": "Participate menu",
   "payments-page": "Payments",
@@ -382,7 +387,7 @@
   "product-disclaimer": "Products and services are listed as a convenience for the Ethereum community. Inclusion of a product or service <strong>does not represent an endorsement</strong> from the ethereum.org website team, or the Ethereum Foundation.",
   "quizzes": "Quizzes",
   "quizzes-title": "Quiz Hub",
-  "refresh": "Please refresh the page.",
+  "refresh": "Refresh page",
   "regenerative-finance": "ReFi - Regenerative finance",
   "research": "Research",
   "research-menu": "Research menu",
@@ -444,9 +449,6 @@
   "verkle-trees": "Verkle trees",
   "wallets": "Wallets",
   "we-couldnt-find-that-page": "We couldn't find that page",
-  "error-page-title": "Oops! Something went wrong",
-  "error-page-description": "You can help us improve by reporting this issue on our <a href='https://github.com/ethereum/ethereum-org-website/issues/new?label%3A%22bug%20%F0%9F%90%9B%22&template=bug_report.yaml'>GitHub repository</a>.",
-  "error-page-home-link": "Return to the home page",
   "web3": "What is Web3?",
   "web3-title": "Web3",
   "website-last-updated": "Website last updated",

src/intl/en/common.json

@@ -1028,3 +1028,11 @@ export interface ITutorial {
   lang: string
   isExternal: boolean
 }
+
+export type PageParams = {
+  locale: string
+}
+
+export type SlugPageParams = PageParams & {
+  slug: string[]
+}