chore: bump version to 2.23.14 and refactor error handling components (#451)

- Updated application version from 2.23.13 to 2.23.14 in package.json.
- Refactored error handling components in web app to utilize a new ErrorPageContent component for improved code organization and readability.
- Simplified error and not found page layouts by removing redundant code and enhancing localization keys for better user experience.

apps/web/app/(marketing)/changelog/[slug]/page.tsx

@@ -72,10 +72,10 @@ export async function generateMetadata({
       url: data.entry.url,
       images: image
         ? [
-            {
-              url: image,
-            },
-          ]
+          {
+            url: image,
+          },
+        ]
         : [],
     },
     twitter: {

apps/web/app/error.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import Link from 'next/link';
-
-import { ArrowLeft, MessageCircle } from 'lucide-react';
-
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
 
 import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 
 const ErrorPage = ({
   error,
@@ -27,53 +21,13 @@ const ErrorPage = ({
     <div className={'flex h-screen flex-1 flex-col'}>
       <SiteHeader user={user.data} />
 
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-8'}>
-          <div>
-            <h1 className={'font-heading text-9xl font-semibold'}>
-              <Trans i18nKey={'common:errorPageHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div
-              className={
-                'flex max-w-xl flex-col items-center gap-y-2 text-center'
-              }
-            >
-              <div>
-                <Heading level={2}>
-                  <Trans i18nKey={'common:genericError'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground text-lg'}>
-                <Trans i18nKey={'common:genericErrorSubHeading'} />
-              </p>
-            </div>
-
-            <div className={'flex space-x-4'}>
-              <Button className={'w-full'} variant={'default'} onClick={reset}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:goBack'} />
-              </Button>
-
-              <Button className={'w-full'} variant={'outline'} asChild>
-                <Link href={'/contact'}>
-                  <MessageCircle className={'mr-2 h-4'} />
-
-                  <Trans i18nKey={'common:contactUs'} />
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:errorPageHeading'}
+        heading={'common:genericError'}
+        subtitle={'common:genericErrorSubHeading'}
+        backLabel={'common:goBack'}
+        reset={reset}
+      />
     </div>
   );
 };

apps/web/app/global-error.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import Link from 'next/link';
-
-import { ArrowLeft, MessageCircle } from 'lucide-react';
-
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
 
 import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 import { RootProviders } from '~/components/root-providers';
 
 const GlobalErrorPage = ({
@@ -40,53 +34,13 @@ function GlobalErrorContent({ reset }: { reset: () => void }) {
     <div className={'flex h-screen flex-1 flex-col'}>
       <SiteHeader user={user.data} />
 
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-8'}>
-          <div>
-            <h1 className={'font-heading text-9xl font-semibold'}>
-              <Trans i18nKey={'common:errorPageHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div
-              className={
-                'flex max-w-xl flex-col items-center gap-y-2 text-center'
-              }
-            >
-              <div>
-                <Heading level={2}>
-                  <Trans i18nKey={'common:genericError'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground text-lg'}>
-                <Trans i18nKey={'common:genericErrorSubHeading'} />
-              </p>
-            </div>
-
-            <div className={'flex space-x-4'}>
-              <Button className={'w-full'} variant={'default'} onClick={reset}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:goBack'} />
-              </Button>
-
-              <Button className={'w-full'} variant={'outline'} asChild>
-                <Link href={'/contact'}>
-                  <MessageCircle className={'mr-2 h-4'} />
-
-                  <Trans i18nKey={'common:contactUs'} />
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:errorPageHeading'}
+        heading={'common:genericError'}
+        subtitle={'common:genericErrorSubHeading'}
+        backLabel={'common:goBack'}
+        reset={reset}
+      />
     </div>
   );
 }

apps/web/app/not-found.tsx

@@ -1,14 +1,4 @@
-import Link from 'next/link';
-
-import { ArrowLeft } from 'lucide-react';
-
-import { requireUser } from '@kit/supabase/require-user';
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
-
-import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -22,48 +12,13 @@ export const generateMetadata = async () => {
 };
 
 const NotFoundPage = async () => {
-  const client = getSupabaseServerClient();
-  const user = await requireUser(client, { verifyMfa: false });
-
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader user={user.data} />
-
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-12'}>
-          <div>
-            <h1 className={'font-heading text-8xl font-extrabold xl:text-9xl'}>
-              <Trans i18nKey={'common:pageNotFoundHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div className={'flex flex-col items-center space-y-2.5'}>
-              <div>
-                <Heading level={1}>
-                  <Trans i18nKey={'common:pageNotFound'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground'}>
-                <Trans i18nKey={'common:pageNotFoundSubHeading'} />
-              </p>
-            </div>
-
-            <Button asChild variant={'outline'}>
-              <Link href={'/'}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:backToHomePage'} />
-              </Link>
-            </Button>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:pageNotFoundHeading'}
+        heading={'common:pageNotFound'}
+        subtitle={'common:pageNotFoundSubHeading'}
+      />
     </div>
   );
 };

apps/web/components/error-page-content.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ArrowLeft, MessageCircleQuestion } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function ErrorPageContent({
+  statusCode,
+  heading,
+  subtitle,
+  reset,
+  backLink = '/',
+  backLabel = 'common:backToHomePage',
+  contactLabel = 'common:contactUs',
+}: {
+  statusCode: string;
+  heading: string;
+  subtitle: string;
+  reset?: () => void;
+  backLink?: string;
+  backLabel?: string;
+  contactLabel?: string;
+}) {
+  return (
+    <div
+      className={
+        'relative flex w-full flex-1 flex-col items-center justify-center overflow-hidden px-4'
+      }
+    >
+      <span
+        aria-hidden="true"
+        className={
+          'font-heading pointer-events-none absolute top-1/2 left-1/2 z-0 -translate-x-1/2 -translate-y-1/2 text-[16rem] leading-none font-extrabold tracking-tighter opacity-[0.02] select-none sm:text-[22rem] lg:text-[28rem]'
+        }
+      >
+        <Trans i18nKey={statusCode} />
+      </span>
+
+      <div
+        className={
+          'relative z-10 flex max-w-md flex-col items-center text-center'
+        }
+      >
+        <h1
+          className={
+            'font-heading text-2xl font-semibold tracking-tight sm:text-3xl'
+          }
+        >
+          <Trans i18nKey={heading} />
+        </h1>
+
+        <p
+          className={
+            'text-muted-foreground mt-3 max-w-sm text-sm leading-relaxed'
+          }
+        >
+          <Trans i18nKey={subtitle} />
+        </p>
+
+        <div className={'mt-8 flex items-center gap-3'}>
+          {reset ? (
+            <Button onClick={reset}>
+              <ArrowLeft className={'h-4 w-4'} />
+              <Trans i18nKey={backLabel} />
+            </Button>
+          ) : (
+            <Button asChild>
+              <Link href={backLink}>
+                <ArrowLeft className={'h-4 w-4 mr-1'} />
+                <Trans i18nKey={backLabel} />
+              </Link>
+            </Button>
+          )}
+
+          <Button asChild variant={'ghost'}>
+            <Link href={'/contact'}>
+              <MessageCircleQuestion className={'h-4 w-4 mr-1'} />
+              <Trans i18nKey={contactLabel} />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/public/locales/en/common.json

@@ -18,14 +18,14 @@
   "cancel": "Cancel",
   "clear": "Clear",
   "notFound": "Not Found",
-  "backToHomePage": "Back to Home Page",
-  "goBack": "Go Back",
+  "backToHomePage": "Back to Home",
+  "goBack": "Try Again",
   "genericServerError": "Sorry, something went wrong.",
   "genericServerErrorHeading": "Sorry, something went wrong while processing your request. Please contact us if the issue persists.",
-  "pageNotFound": "Sorry, this page does not exist.",
-  "pageNotFoundSubHeading": "Apologies, the page you were looking for was not found",
-  "genericError": "Sorry, something went wrong.",
-  "genericErrorSubHeading": "Apologies, an error occurred while processing your request. Please contact us if the issue persists.",
+  "pageNotFound": "Page not found",
+  "pageNotFoundSubHeading": "The page you're looking for doesn't exist or has been moved. Check the URL or head back to the homepage.",
+  "genericError": "Something went wrong",
+  "genericErrorSubHeading": "We ran into an unexpected issue. Please try again, and if the problem persists, reach out to our support team.",
   "anonymousUser": "Anonymous",
   "tryAgain": "Try Again",
   "theme": "Theme",
@@ -48,8 +48,8 @@
   "pageOfPages": "Page {{page}} of {{total}}",
   "showingRecordCount": "Showing {{pageSize}} of {{totalCount}} rows",
   "noData": "No data available",
-  "pageNotFoundHeading": "Ouch! :|",
-  "errorPageHeading": "Ouch! :|",
+  "pageNotFoundHeading": "404",
+  "errorPageHeading": "500",
   "notifications": "Notifications",
   "noNotifications": "No notifications",
   "justNow": "Just now",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.23.13",
+  "version": "2.23.14",
   "private": true,
   "sideEffects": false,
   "engines": {