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

@@ -27,6 +27,10 @@ import {
   NewBreadCrumbs,
   NewBreadCrumbsLink,
 } from "@thunderstore/cyberstorm";
+import {
+  parseUserFacingErrorPayload,
+  type UserFacingErrorPayload,
+} from "cyberstorm/utils/errors/userFacingErrorResponse";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { type CurrentUser } from "@thunderstore/dapper/types";
 
@@ -35,6 +39,7 @@ import { memo, type ReactNode, Suspense, useEffect, useRef } from "react";
 import { useHydrated } from "remix-utils/use-hydrated";
 import Toast from "@thunderstore/cyberstorm/src/newComponents/Toast";
 import { Footer } from "./commonComponents/Footer/Footer";
+import { NimbusAwaitErrorElement } from "../cyberstorm/utils/errors/NimbusErrorBoundary";
 import { type RequestConfig } from "@thunderstore/thunderstore-api";
 import { NavigationWrapper } from "./commonComponents/Navigation/NavigationWrapper";
 import { NamespacedStorageManager } from "@thunderstore/ts-api-react";
@@ -617,18 +622,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>
@@ -637,6 +660,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() {
@@ -735,7 +778,10 @@ function getCommunityBreadcrumb(
             </span>
           }
         >
-          <Await resolve={communityPage.data.community}>
+          <Await
+            resolve={communityPage.data.community}
+            errorElement={<NimbusAwaitErrorElement />}
+          >
             {(resolvedValue) => {
               let label = undefined;
               let icon = undefined;