Enhance error handling in root.tsx ErrorBoundary with user-facing error mapping and deduplication of error descriptions

Author: Oksamies

apps/cyberstorm-remix/app/root.tsx

@@ -1,5 +1,7 @@
-// The styles need to be imported at the beginning, so that the layers are correctly set up
-// eslint-disable-next-line prettier/prettier
+// sort-imports-ignore
+import "./styles";
+// NOTE: The sort-imports-ignore is needed here to prevent css layers from not being loaded in the correct order, feel free to remove the ignore momentarily to sort imports
+
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
 import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
@@ -8,6 +10,11 @@ import {
   type publicEnvVariablesType,
 } from "cyberstorm/security/publicEnvVariables";
 import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
+import { NimbusAwaitErrorElement } from "cyberstorm/utils/errors/NimbusErrorBoundary";
+import {
+  type UserFacingErrorPayload,
+  parseUserFacingErrorPayload,
+} from "cyberstorm/utils/errors/userFacingErrorResponse";
 import { type ReactNode, Suspense, memo, useEffect, useRef } from "react";
 import {
   Await,
@@ -35,8 +42,6 @@ import {
   isRecord,
 } from "@thunderstore/cyberstorm";
 import { Toast } from "@thunderstore/cyberstorm";
-import "@thunderstore/cyberstorm-theme/css";
-import "@thunderstore/cyberstorm/css";
 import { type CurrentUser } from "@thunderstore/dapper";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { type RequestConfig } from "@thunderstore/thunderstore-api";
@@ -50,10 +55,7 @@ import {
 
 import type { Route } from "./+types/root";
 import { Footer } from "./commonComponents/Footer/Footer";
-// Annoying prettier issue, where it wants to insert styles import here
-// eslint-disable-next-line prettier/prettier
 import { NavigationWrapper } from "./commonComponents/Navigation/NavigationWrapper";
-import "./styles/index.css";
 
 // REMIX TODO: https://remix.run/docs/en/main/route/links
 // export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -621,18 +623,36 @@ export function ErrorBoundary() {
     console.log(error);
   }
   const isResponseError = isRouteErrorResponse(error);
+  let payload: UserFacingErrorPayload | null = null;
+
+  if (isResponseError) {
+    payload = parseUserFacingErrorPayload(error.data);
+  }
+
+  const statusCode = payload?.status ?? (isResponseError ? error.status : 500);
+  const headline =
+    payload?.headline ??
+    (isResponseError
+      ? error.statusText || `Error ${error.status}`
+      : "Internal server error");
+
+  const fallbackDescription =
+    isResponseError && typeof error.data === "string"
+      ? dedupeDescription(headline, error.data)
+      : undefined;
+
+  const description = payload?.description ?? fallbackDescription;
+  const showDefaultFlavor = !payload && !isResponseError;
   return (
     <div className="error">
-      <div
-        className="error__glitch"
-        data-text={isResponseError ? error.status : 500}
-      >
-        <span>{isResponseError ? error.status : 500}</span>
+      <div className="error__glitch" data-text={statusCode}>
+        <span>{statusCode}</span>
       </div>
       <div className="error__description">
-        {isResponseError ? error.data : "Internal server error"}
+        <strong>{headline}</strong>
+        {description ? <div>{description}</div> : null}
       </div>
-      {!isResponseError && (
+      {showDefaultFlavor && (
         <div className="error__flavor">
           Beep boop. Server something error happens.
         </div>
@@ -641,6 +661,26 @@ export function ErrorBoundary() {
   );
 }
 
+function dedupeDescription(
+  headline: string,
+  description: string | undefined
+): string | undefined {
+  if (!description) {
+    return undefined;
+  }
+
+  const trimmedDescription = description.trim();
+  if (!trimmedDescription) {
+    return undefined;
+  }
+
+  if (trimmedDescription.toLowerCase() === headline.trim().toLowerCase()) {
+    return undefined;
+  }
+
+  return trimmedDescription;
+}
+
 // Temporary solution for implementing ads
 // REMIX TODO: Move to dynamic html
 function AdsInit() {
@@ -739,7 +779,10 @@ function getCommunityBreadcrumb(
             </span>
           }
         >
-          <Await resolve={communityPage.data.community}>
+          <Await
+            resolve={communityPage.data.community}
+            errorElement={<NimbusAwaitErrorElement />}
+          >
             {(resolvedValue) => {
               let label = undefined;
               let icon = undefined;

apps/cyberstorm-remix/app/styles.ts

@@ -0,0 +1,4 @@
+// sort-imports-ignore
+import "./styles/index.css";
+import "@thunderstore/cyberstorm-theme/css";
+import "@thunderstore/cyberstorm/css";