fix(web): improve error handling and ui

closed COD-308

Author: hakalb

apps/web/app/components/desktop-navigation.tsx

@@ -40,6 +40,7 @@ export function DesktopNavigation(
   props: React.ComponentPropsWithoutRef<'nav'>
 ) {
   const navigationTree = useNavigationTree();
+
   if (navigationTree.length === 0) {
     return null;
   }

apps/web/app/components/error-boundary.tsx

@@ -1,3 +1,4 @@
+import { Separator } from '@codeware/shared/ui/shadcn';
 import {
   type ErrorResponse,
   isRouteErrorResponse,
@@ -10,6 +11,8 @@ import * as React from 'react';
 // import { captureRemixErrorBoundaryError } from '@sentry/remix'
 import { getErrorMessage } from '../utils/misc';
 
+import { ErrorContainer } from './error-container';
+
 type StatusHandler = (info: {
   error: ErrorResponse;
   params: Record<string, string | undefined>;
@@ -37,13 +40,15 @@ export function GeneralErrorBoundary({
   }
 
   return (
-    <div className="text-h2 container flex items-center justify-center p-20">
+    <ErrorContainer severity="error">
+      <p>Please contact the administrator if the problem persists.</p>
+      <Separator className="my-4" />
       {isRouteErrorResponse(error)
         ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
             error,
             params
           })
         : unexpectedErrorHandler(error)}
-    </div>
+    </ErrorContainer>
   );
 }

apps/web/app/components/error-container.tsx

@@ -0,0 +1,58 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle
+} from '@codeware/shared/ui/shadcn';
+import { InfoIcon, LucideAlertTriangle } from 'lucide-react';
+
+import { Container } from './container';
+
+type Props = {
+  children?: React.ReactNode;
+  title?: string;
+  severity: 'error' | 'info';
+  stackTrace?: string;
+  withoutContainer?: boolean;
+};
+
+export const ErrorContainer: React.FC<Props> = ({
+  withoutContainer = false,
+  ...props
+}: Props) => {
+  return (
+    <>
+      {(withoutContainer && <RenderAlert {...props} />) || (
+        <Container className="mt-16 sm:mt-32">
+          <RenderAlert {...props} />
+        </Container>
+      )}
+    </>
+  );
+};
+
+const RenderAlert: React.FC<Props> = ({
+  children,
+  title = 'Something went wrong!',
+  severity,
+  stackTrace
+}) => {
+  return (
+    <div className="flex min-h-[40vh] items-center justify-center">
+      <Alert className="max-w-lg">
+        {severity === 'error' && (
+          <LucideAlertTriangle className="h-4 w-4 text-red-500" />
+        )}
+        {severity === 'info' && <InfoIcon className="h-4 w-4" />}
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>
+          {children}
+          {stackTrace && (
+            <p className="text-muted-foreground border-l-2 py-2 text-sm">
+              {stackTrace}
+            </p>
+          )}
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+};

apps/web/app/components/mobile-navigation.tsx

@@ -13,6 +13,10 @@ export function MobileNavigation(
 ) {
   const navigationTree = useNavigationTree();
 
+  if (navigationTree.length === 0) {
+    return null;
+  }
+
   return (
     <Popover {...props}>
       <PopoverButton className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">

apps/web/app/root.tsx

@@ -21,7 +21,6 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  data,
   useLoaderData,
   useNavigate
 } from '@remix-run/react';
@@ -31,6 +30,7 @@ import env from '../env-resolver/env';
 import { Container } from './components/container';
 import { DesktopNavigation } from './components/desktop-navigation';
 import { GeneralErrorBoundary } from './components/error-boundary';
+import { ErrorContainer } from './components/error-container';
 import { Footer } from './components/footer';
 import { MobileNavigation } from './components/mobile-navigation';
 import { ThemeSwitch, useTheme } from './routes/resources.theme-switch';
@@ -41,7 +41,7 @@ import { type Theme, getTheme } from './utils/theme.server';
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [
   {
-    title: data?.siteSettings.general.appName
+    title: data?.siteSettings?.general?.appName ?? ''
   }
 ];
 
@@ -60,15 +60,15 @@ export const links: LinksFunction = () => [
 ];
 
 export async function loader({ context, request }: LoaderFunctionArgs) {
+  /** Error message to display to the user when we have e.g. API issues */
+  let loaderErrorMessage = '';
+
   try {
     // Get the theme before fetching pages in case it fails
     const theme = await getTheme(request);
 
-    /** Error message to display to the user when we have e.g. API issues */
-    let displayError = '';
-
     let navigationTree: Array<NavigationItem> = [];
-    let siteSettings = {} as SiteSetting;
+    let siteSettings: SiteSetting | null = null;
 
     // Fetch layout data but don't propagate the exception to the error boundary
     try {
@@ -77,21 +77,18 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
         context,
         request.headers
       );
-      const gss = await getSiteSettings(requestOptions);
-      if (!gss) {
-        throw new Error('Site settings not found');
-      }
-      siteSettings = gss;
       navigationTree = await getNavigationTree(requestOptions);
+      siteSettings = await getSiteSettings(requestOptions);
     } catch (e) {
       const error = e as Error;
       console.error(`Failed to load data: ${error.message}`);
-      displayError = 'Unable to load content. Please try again later.';
+      loaderErrorMessage =
+        'Unable to load application content. Please try again later.';
     }
 
     return {
-      displayError,
       env,
+      loaderErrorMessage,
       navigationTree,
       requestInfo: {
         hints: getHints(request),
@@ -104,10 +101,8 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
     };
   } catch (error) {
     console.error('Failed to load root data:\n', error);
-    throw data(
-      { message: 'Failed to load application. Please try again later.' },
-      { status: 500 }
-    );
+    // Delegate to error boundary
+    throw error;
   }
 }
 
@@ -226,12 +221,12 @@ export default function App() {
             </div>
           </header>
           <main className="flex-auto">
-            <Outlet />
-            {loaderData.displayError && (
-              <div className="flex items-center justify-center p-4">
-                <p className="text-red-500">{loaderData.displayError}</p>
-              </div>
-            )}
+            {/* Display loader error message if it exists instead of the outlet */}
+            {(loaderData.loaderErrorMessage && (
+              <ErrorContainer severity="error">
+                {loaderData.loaderErrorMessage}
+              </ErrorContainer>
+            )) || <Outlet />}
           </main>
           <Footer />
         </div>

apps/web/app/routes/($collection).$slug.tsx

@@ -3,6 +3,7 @@ import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { json, useLoaderData, useRouteError } from '@remix-run/react';
 
 import { Container } from '../components/container';
+import { ErrorContainer } from '../components/error-container';
 import { RenderPagesDoc } from '../components/render-pages-doc';
 import { RenderPostsDoc } from '../components/render-posts-doc';
 import { getPayloadRequestOptions } from '../utils/get-payload-request-options';
@@ -73,17 +74,8 @@ export function ErrorBoundary() {
   const error = useRouteError() as LoaderError;
 
   return (
-    <Container className="mt-16 sm:mt-32">
-      <div className="flex min-h-[30vh] items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-            {error.message}
-          </h1>
-          <p className="mt-2 text-zinc-600 dark:text-zinc-400">
-            The page you're looking for doesn't exist.
-          </p>
-        </div>
-      </div>
-    </Container>
+    <ErrorContainer severity="error" stackTrace={error.message}>
+      The page you're looking for could not be rendered.
+    </ErrorContainer>
   );
 }

apps/web/app/routes/_index.tsx

@@ -2,6 +2,7 @@ import { RenderBlocks } from '@codeware/shared/ui/payload-components';
 import { type MetaFunction, useRouteError } from '@remix-run/react';
 
 import { Container } from '../components/container';
+import { ErrorContainer } from '../components/error-container';
 import { useSiteSettings } from '../utils/use-site-settings';
 
 type LoaderError = {
@@ -12,23 +13,33 @@ type LoaderError = {
 // TODO: How to use it properly?
 export const meta: MetaFunction = () => {
   const { landingPage } = useSiteSettings();
-  return [{ title: landingPage.name }];
+  return [{ title: landingPage?.name }];
 };
 
 export default function Index() {
   const { landingPage } = useSiteSettings();
 
   return (
     <Container className="mt-16 sm:mt-32">
-      {landingPage.header && (
+      {landingPage?.header && (
         <header className="max-w-2xl">
           <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
             {landingPage.header}
           </h1>
         </header>
       )}
       <article className="mt-16">
-        <RenderBlocks blocks={landingPage.layout} />
+        {landingPage ? (
+          <RenderBlocks blocks={landingPage.layout} />
+        ) : (
+          <ErrorContainer
+            title="Landing page was not found"
+            severity="info"
+            withoutContainer={true}
+          >
+            Please create a page in the CMS and assign it to be a landing page.
+          </ErrorContainer>
+        )}
       </article>
     </Container>
   );
@@ -38,17 +49,8 @@ export function ErrorBoundary() {
   const error = useRouteError() as LoaderError;
 
   return (
-    <Container className="mt-16 sm:mt-32">
-      <div className="flex min-h-[30vh] items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
-            {error.message}
-          </h1>
-          <p className="mt-2 text-zinc-600 dark:text-zinc-400">
-            The page you're looking for doesn't exist.
-          </p>
-        </div>
-      </div>
-    </Container>
+    <ErrorContainer severity="error" stackTrace={error.message}>
+      The page you're looking for could not be rendered.
+    </ErrorContainer>
   );
 }

apps/web/app/utils/use-navigation-tree.ts

@@ -8,7 +8,10 @@ import { type loader as rootLoader } from '../root';
  */
 export function useNavigationTree() {
   const data = useRouteLoaderData<typeof rootLoader>('root');
-  invariant(data?.navigationTree, 'No navigation tree found in root loader');
+  invariant(
+    data && data.navigationTree,
+    'No navigation tree found in root loader'
+  );
 
   return data.navigationTree;
 }

apps/web/app/utils/use-site-settings.ts

@@ -8,13 +8,18 @@ import { type loader as rootLoader } from '../root';
  */
 export function useSiteSettings() {
   const data = useRouteLoaderData<typeof rootLoader>('root');
-  invariant(data?.siteSettings, 'No site settings found in root loader');
-  const {
-    general: { landingPage }
-  } = data.siteSettings;
+  invariant(data, 'No data found in root loader');
+
+  // Don't break the site when site settings haven't been configured yet.
+  // Provide some useful information to the visitor.
+  // TODO: Let the cms handle this with client render components?
+
+  const landingPage = data.siteSettings?.general?.landingPage ?? undefined;
+
+  // TODO: Type narrowing should be handled by the cms api
   invariant(
     typeof landingPage !== 'number',
-    'No landing page found in site settings'
+    'Expected landing page to be an object'
   );
 
   return {