refactor: error page i18n support

nodejs · Jan 17, 2024 · 26409ad · 26409ad
1 parent e462778
commit 26409ad
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { captureException } from '@sentry/nextjs';
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
@@ -21,19 +22,22 @@ const LegacyErrorPage: FC<{ error: Error }> = ({ error }) => {
 };
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
-  useMemo(() => captureException(error), [error]);
+  captureException(error);
+  const t = useTranslations();
 
   return (
     <CenteredLayout>
       <div className="glowingBackdrop" />
 
       <main>
         500
-        <h1 className="special -mt-4">Internal Server Error</h1>
+        <h1 className="special -mt-4">
+          {t('layouts.error.internalServerError.title')}
+        </h1>
         <p className="-mt-4 max-w-sm text-center text-lg">
-          This page has thrown a non-recoverable error.
+          {t('layouts.error.internalServerError.description')}
         </p>
-        <Button href="/">Back to Home</Button>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
       </main>
     </CenteredLayout>
   );

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
@@ -28,11 +28,11 @@ const NotFoundPage: FC = () => {
 
       <main>
         404
-        <h1 className="special -mt-4">{t('layouts.notFound.title')}</h1>
+        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
         <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.notFound.description')}
+          {t('layouts.error.notFound.description')}
         </p>
-        <Button href="/">{t('layouts.notFound.backToHome')}</Button>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
       </main>
     </CenteredLayout>
   );

diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -6,6 +6,7 @@ import type { FC } from 'react';
 import { useMemo } from 'react';
 
 import Button from '@/components/Common/Button';
+import BaseLayout from '@/layouts/BaseLayout';
 import CenteredLayout from '@/layouts/New/Centered';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 
@@ -23,23 +24,25 @@ const LegacyGlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
 };
 
 const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
-  useMemo(() => captureException(error), [error]);
+  captureException(error);
 
   return (
     <html>
       <body>
-        <CenteredLayout>
-          <div className="glowingBackdrop" />
-
-          <main>
-            500
-            <h1 className="special -mt-4">Internal Server Error</h1>
-            <p className="-mt-4 max-w-sm text-center text-lg">
-              This page has thrown a non-recoverable error.
-            </p>
-            <Button href="/">Back to Home</Button>
-          </main>
-        </CenteredLayout>
+        <BaseLayout>
+          <CenteredLayout>
+            <div className="glowingBackdrop" />
+
+            <main>
+              500
+              <h1 className="special -mt-4">Internal Server Error</h1>
+              <p className="-mt-4 max-w-sm text-center text-lg">
+                This page has thrown a non-recoverable error.
+              </p>
+              <Button href="/">Back to Home</Button>
+            </main>
+          </CenteredLayout>
+        </BaseLayout>
       </body>
     </html>
   );

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -209,9 +209,15 @@
         "wg": "Working Groups"
       }
     },
-    "notFound": {
-      "title": "Page could not be found",
-      "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage.",
+    "error": {
+      "notFound": {
+        "title": "Page could not be found",
+        "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage."
+      },
+      "internalServerError": {
+        "title": "Internal Server Error",
+        "description": "This page has thrown a non-recoverable error."
+      },
       "backToHome": "Back to Home"
     }
   },