From 33d2d677740849ec7357a27ccf77a58a89867779 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 22 Feb 2026 18:30:44 +0100
Subject: [PATCH] feat: Improve error handling, refine i18n title fallbacks for
 product pages, update Next.js type paths, and add an image loader test file.

---
 app/[locale]/error.tsx                    | 23 ++++++++++++-----------
 app/[locale]/products/[...slug]/page.tsx  |  4 ++--
 app/[locale]/products/opengraph-image.tsx |  6 +++++-
 app/[locale]/products/page.tsx            |  6 +++++-
 components/home/ProductCategories.tsx     |  6 +++++-
 next-env.d.ts                             |  2 +-
 6 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
index d7fbb0a4..97be3c8b 100644
--- a/app/[locale]/error.tsx
+++ b/app/[locale]/error.tsx
@@ -16,12 +16,18 @@ export default function Error({
   const t = useTranslations('Error');
 
   useEffect(() => {
+    // Treat "Failed to find Server Action" as a deployment sync issue and reload
+    if (error?.message?.includes('Failed to find Server Action')) {
+      window.location.reload();
+      return;
+    }
+
     const services = getAppServices();
     services.errors.captureException(error);
     services.logger.error('Application error caught by boundary', {
-      message: error.message,
-      stack: error.stack,
-      digest: error.digest
+      message: error?.message || 'Unknown error',
+      stack: error?.stack,
+      digest: error?.digest,
     });
   }, [error]);
 
@@ -36,19 +42,14 @@ export default function Error({
         <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
           500
         </Heading>
-        <Scribble 
-          variant="underline" 
-          className="w-full h-6 -bottom-2 left-0 text-saturated/40" 
-        />
+        <Scribble variant="underline" className="w-full h-6 -bottom-2 left-0 text-saturated/40" />
       </div>
 
       <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4">
         {t('title')}
       </Heading>
-      
-      <p className="text-white/60 mb-10 max-w-md text-lg">
-        {t('description')}
-      </p>
+
+      <p className="text-white/60 mb-10 max-w-md text-lg">{t('description')}</p>
 
       <div className="flex flex-col sm:flex-row gap-4">
         <Button onClick={() => reset()} variant="saturated" size="lg">
diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx
index 117b5fa3..fb726aa5 100644
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -223,7 +223,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
                   className="hover:text-accent transition-colors"
                 >
-                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
+                  {t.has('breadcrumb') ? t('breadcrumb') : 'Products'}
                 </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
@@ -384,7 +384,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                 href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
                 className="hover:text-accent transition-colors"
               >
-                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
+                {t.has('breadcrumb') ? t('breadcrumb') : 'Products'}
               </Link>
               <span className="mx-4 opacity-20">/</span>
               <Link
diff --git a/app/[locale]/products/opengraph-image.tsx b/app/[locale]/products/opengraph-image.tsx
index f577ddf9..60c22abd 100644
--- a/app/[locale]/products/opengraph-image.tsx
+++ b/app/[locale]/products/opengraph-image.tsx
@@ -12,7 +12,11 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const t = await getTranslations({ locale, namespace: 'Products' });
   const fonts = await getOgFonts();
 
-  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
+  const title = t.has('meta.title')
+    ? t('meta.title')
+    : t.has('breadcrumb')
+      ? t('breadcrumb')
+      : 'Products';
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx
index 01027331..d654f3bf 100644
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -17,7 +17,11 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
+  const title = t.has('meta.title')
+    ? t('meta.title')
+    : t.has('breadcrumb')
+      ? t('breadcrumb')
+      : 'Products';
   const description = t('meta.description') || t('subtitle');
   return {
     title,
diff --git a/components/home/ProductCategories.tsx b/components/home/ProductCategories.tsx
index f3e495a7..d29c230a 100644
--- a/components/home/ProductCategories.tsx
+++ b/components/home/ProductCategories.tsx
@@ -43,7 +43,11 @@ export default function ProductCategories() {
 
   return (
     <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
-      {t('title') && <h2 className="sr-only">{t('title')}</h2>}
+      {t.has('title') && (
+        <h2 className="sr-only">
+          {t.rich('title', { green: (chunks: any) => <span>{chunks}</span> })}
+        </h2>
+      )}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
           <Link
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.