Enhance error handling in user settings routes with user-facing error mapping

Author: Oksamies

apps/cyberstorm-remix/app/settings/user/Account/Account.tsx

@@ -1,12 +1,17 @@
 import { faTrashCan } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+import {
+  NimbusErrorBoundary,
+  NimbusErrorBoundaryFallback,
+  type NimbusErrorBoundaryFallbackProps,
+} from "cyberstorm/utils/errors/NimbusErrorBoundary";
 import { useReducer } from "react";
 import { useNavigate, useOutletContext, useRevalidator } from "react-router";
 import { useHydrated } from "remix-utils/use-hydrated";
 import { Loading } from "~/commonComponents/Loading/Loading";
 import { NotLoggedIn } from "~/commonComponents/NotLoggedIn/NotLoggedIn";
-import { type OutletContextShape } from "~/root";
+import type { OutletContextShape } from "~/root";
 
 import {
   NewAlert,
@@ -15,8 +20,12 @@ import {
   NewTextInput,
   useToast,
 } from "@thunderstore/cyberstorm";
-import { UserFacingError, userDelete } from "@thunderstore/thunderstore-api";
 
+import {
+  UserFacingError,
+  formatUserFacingError,
+  userDelete,
+} from "../../../../../../packages/thunderstore-api/src";
 import "./Account.css";
 
 export default function Account() {
@@ -32,44 +41,70 @@ export default function Account() {
   }
 
   return (
-    <div className="settings-items user-account">
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Delete Account</p>
-          <p className="settings-items__description">
-            Delete your Thunderstore account permanently
-          </p>
-        </div>
-        <div className="settings-items__content">
-          <div className="user-account__delete-user-form">
-            <NewAlert csVariant="warning">
-              You are about to delete your account. Once deleted, it will be
-              gone forever. Please be certain.
-            </NewAlert>
-            <p className="user-account__instructions">
-              The mods that have been uploaded on this account will remain
-              public on the site even after deletion. If you need them to be
-              taken down as well, please contact an administrator on the
-              community Discord server.
-              <br />
-              <span>
-                As a precaution, to delete your account, please input{" "}
-                <span className="user-account__username">
-                  {outletContext.currentUser.username}
-                </span>{" "}
-                into the field below.
-              </span>
+    <NimbusErrorBoundary
+      fallback={AccountSettingsFallback}
+      onRetry={({ reset }) => reset()}
+    >
+      <div className="settings-items user-account">
+        <div className="settings-items__item">
+          <div className="settings-items__meta">
+            <p className="settings-items__title">Delete Account</p>
+            <p className="settings-items__description">
+              Delete your Thunderstore account permanently
             </p>
-            <div className="user-account__actions">
-              <DeleteAccountForm
-                currentUser={outletContext.currentUser}
-                requestConfig={outletContext.requestConfig}
-              />
+          </div>
+          <div className="settings-items__content">
+            <div className="user-account__delete-user-form">
+              <NewAlert csVariant="warning">
+                You are about to delete your account. Once deleted, it will be
+                gone forever. Please be certain.
+              </NewAlert>
+              <p className="user-account__instructions">
+                The mods that have been uploaded on this account will remain
+                public on the site even after deletion. If you need them to be
+                taken down as well, please contact an administrator on the
+                community Discord server.
+                <br />
+                <span>
+                  As a precaution, to delete your account, please input{" "}
+                  <span className="user-account__username">
+                    {outletContext.currentUser.username}
+                  </span>{" "}
+                  into the field below.
+                </span>
+              </p>
+              <div className="user-account__actions">
+                <DeleteAccountForm
+                  currentUser={outletContext.currentUser}
+                  requestConfig={outletContext.requestConfig}
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </NimbusErrorBoundary>
+  );
+}
+
+/**
+ * Displays fallback messaging when the account settings view fails to render.
+ */
+function AccountSettingsFallback(props: NimbusErrorBoundaryFallbackProps) {
+  const {
+    title = "Account settings failed to load",
+    description = "Reload the account tab or return to settings.",
+    retryLabel = "Reload",
+    ...rest
+  } = props;
+
+  return (
+    <NimbusErrorBoundaryFallback
+      {...rest}
+      title={title}
+      description={description}
+      retryLabel={retryLabel}
+    />
   );
 }
 
@@ -143,7 +178,7 @@ function DeleteAccountForm(props: {
     onSubmitError: (error) => {
       toast.addToast({
         csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
+        children: formatUserFacingError(error),
         duration: 8000,
       });
     },

apps/cyberstorm-remix/app/settings/user/Settings.tsx

@@ -5,6 +5,11 @@ import { NewLink, Tabs } from "@thunderstore/cyberstorm";
 
 import { type OutletContextShape } from "../../root";
 import "./Settings.css";
+import {
+  NimbusErrorBoundary,
+  NimbusErrorBoundaryFallback,
+} from "cyberstorm/utils/errors/NimbusErrorBoundary";
+import type { NimbusErrorBoundaryFallbackProps } from "cyberstorm/utils/errors/NimbusErrorBoundary";
 
 export default function UserSettings() {
   const context = useOutletContext<OutletContextShape>();
@@ -16,7 +21,10 @@ export default function UserSettings() {
   }
 
   return (
-    <>
+    <NimbusErrorBoundary
+      fallback={UserSettingsFallback}
+      onRetry={({ reset }) => reset()}
+    >
       <PageHeader headingLevel="1" headingSize="2">
         Settings
       </PageHeader>
@@ -47,6 +55,27 @@ export default function UserSettings() {
           <Outlet context={context} />
         </section>
       </div>
-    </>
+    </NimbusErrorBoundary>
+  );
+}
+
+/**
+ * Provides fallback messaging when the user settings shell fails to render.
+ */
+function UserSettingsFallback(props: NimbusErrorBoundaryFallbackProps) {
+  const {
+    title = "Settings failed to load",
+    description = "Reload the settings page or return to the dashboard.",
+    retryLabel = "Reload",
+    ...rest
+  } = props;
+
+  return (
+    <NimbusErrorBoundaryFallback
+      {...rest}
+      title={title}
+      description={description}
+      retryLabel={retryLabel}
+    />
   );
 }