Enhance error handling across package Wiki routes with user-facing error mapping and improved loader functions

Author: Oksamies

apps/cyberstorm-remix/app/p/tabs/Wiki/Wiki.tsx

@@ -4,91 +4,96 @@ import {
   Await,
   type LoaderFunctionArgs,
   Outlet,
+  useLoaderData,
   useOutletContext,
 } from "react-router";
-import { useLoaderData } from "react-router";
-import { DapperTs } from "@thunderstore/dapper-ts";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
 import { NewButton, NewIcon, SkeletonBox } from "@thunderstore/cyberstorm";
 import { faPlus } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { type OutletContextShape } from "~/root";
 import { Suspense } from "react";
-import { ApiError } from "../../../../../../packages/thunderstore-api/src";
-import { getPackageWiki } from "@thunderstore/dapper-ts/src/methods/package";
+import { handleLoaderError } from "cyberstorm/utils/errors/handleLoaderError";
+import { createNotFoundMapping } from "cyberstorm/utils/errors/loaderMappings";
+import {
+  NimbusAwaitErrorElement,
+  NimbusDefaultRouteErrorBoundary,
+} from "cyberstorm/utils/errors/NimbusErrorBoundary";
+import { throwUserFacingPayloadResponse } from "cyberstorm/utils/errors/userFacingErrorResponse";
+import { getLoaderTools } from "cyberstorm/utils/getLoaderTools";
+
+export const wikiErrorMappings = [
+  createNotFoundMapping(
+    "Wiki not available.",
+    "We could not find the requested wiki."
+  ),
+];
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
-    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-    const dapper = new DapperTs(() => {
+    const { dapper } = getLoaderTools();
+    try {
+      const wiki = await dapper.getPackageWiki(
+        params.namespaceId,
+        params.packageId
+      );
+
       return {
-        apiHost: publicEnvVariables.VITE_API_URL,
-        sessionId: undefined,
+        wiki,
+        communityId: params.communityId,
+        namespaceId: params.namespaceId,
+        packageId: params.packageId,
+        slug: params.slug,
+        permissions: undefined,
       };
-    });
-
-    let wiki: Awaited<ReturnType<typeof getPackageWiki>> | undefined;
-
-    try {
-      wiki = await dapper.getPackageWiki(params.namespaceId, params.packageId);
     } catch (error) {
-      if (error instanceof ApiError) {
-        if (error.response.status === 404) {
-          wiki = undefined;
-        } else {
-          wiki = undefined;
-          console.error("Error fetching package wiki:", error);
-        }
-      }
+      handleLoaderError(error, { mappings: wikiErrorMappings });
     }
-
-    return {
-      wiki: wiki,
-      communityId: params.communityId,
-      namespaceId: params.namespaceId,
-      packageId: params.packageId,
-      slug: params.slug,
-      permissions: undefined,
-    };
   } else {
-    throw new Error("Namespace ID or Package ID is missing");
+    throwUserFacingPayloadResponse({
+      headline: "Wiki not available.",
+      description: "We could not find the requested wiki.",
+      category: "not_found",
+      status: 404,
+    });
   }
 }
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
+    const { dapper } = getLoaderTools();
 
-    const wiki = dapper.getPackageWiki(params.namespaceId, params.packageId);
+    const wikiPromise = dapper.getPackageWiki(
+      params.namespaceId,
+      params.packageId
+    );
 
-    const permissions = dapper.getPackagePermissions(
+    const permissionsPromise = dapper.getPackagePermissions(
       params.communityId,
       params.namespaceId,
       params.packageId
     );
 
     return {
-      wiki: wiki,
+      wiki: wikiPromise,
       communityId: params.communityId,
       namespaceId: params.namespaceId,
       packageId: params.packageId,
       slug: params.slug,
-      permissions: permissions,
+      permissions: permissionsPromise,
     };
   } else {
-    throw new Error("Namespace ID or Package ID is missing");
+    throwUserFacingPayloadResponse({
+      headline: "Wiki not available.",
+      description: "We could not find the requested wiki.",
+      category: "not_found",
+      status: 404,
+    });
   }
 }
 
+/**
+ * Displays the package wiki navigation and nested routes, relying on Suspense for data.
+ */
 export default function Wiki() {
   const { wiki, communityId, namespaceId, packageId, slug, permissions } =
     useLoaderData<typeof loader | typeof clientLoader>();
@@ -99,7 +104,10 @@ export default function Wiki() {
     <div className="package-wiki">
       <div className="package-wiki-nav">
         <Suspense>
-          <Await resolve={permissions}>
+          <Await
+            resolve={permissions}
+            errorElement={<NimbusAwaitErrorElement />}
+          >
             {(resolvedValue) =>
               resolvedValue?.permissions.can_manage ? (
                 <div className="package-wiki-nav__header">
@@ -125,7 +133,7 @@ export default function Wiki() {
             <Suspense
               fallback={<SkeletonBox className="package-wiki-nav__skeleton" />}
             >
-              <Await resolve={wiki} errorElement={<></>}>
+              <Await resolve={wiki} errorElement={<NimbusAwaitErrorElement />}>
                 {(resolvedValue) =>
                   resolvedValue &&
                   resolvedValue.pages.map((page, index) => {
@@ -193,3 +201,7 @@ export default function Wiki() {
     </div>
   );
 }
+
+export function ErrorBoundary() {
+  return <NimbusDefaultRouteErrorBoundary />;
+}

apps/cyberstorm-remix/app/p/tabs/Wiki/WikiContent.tsx

@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { memo, Suspense } from "react";
 import { Markdown } from "~/commonComponents/Markdown/Markdown";
 import { Await } from "react-router";
+import { NimbusAwaitErrorElement } from "cyberstorm/utils/errors/NimbusErrorBoundary";
 
 interface WikiContentProps {
   page: PackageWikiPageResponseData;
@@ -50,7 +51,7 @@ export const WikiContent = memo(function WikiContent({
           </div>
         </div>
         <Suspense>
-          <Await resolve={canManage}>
+          <Await resolve={canManage} errorElement={<NimbusAwaitErrorElement />}>
             {(resolvedValue) =>
               resolvedValue ? (
                 <div className="package-wiki-content__actions">