Enhance error handling in package changelog route

Author: Oksamies

apps/cyberstorm-remix/app/p/tabs/Changelog/Changelog.css

@@ -2,4 +2,17 @@
   .package-changelog__skeleton {
     height: 500px;
   }
+
+  .package-changelog__error {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+    padding: 3rem 0;
+  }
+
+  .package-changelog__error-description {
+    max-width: 40rem;
+    color: var(--Color-text-muted, rgb(180 189 255 / 0.8));
+  }
 }

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

@@ -1,74 +1,74 @@
 import { Await, useLoaderData } from "react-router";
 import { type LoaderFunctionArgs } from "react-router";
-import { DapperTs } from "@thunderstore/dapper-ts";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
 import { SkeletonBox } from "@thunderstore/cyberstorm";
 import { Suspense } from "react";
 import "./Changelog.css";
+import { handleLoaderError } from "cyberstorm/utils/errors/handleLoaderError";
+import { createNotFoundMapping } from "cyberstorm/utils/errors/loaderMappings";
+import { throwUserFacingPayloadResponse } from "cyberstorm/utils/errors/userFacingErrorResponse";
+import {
+  NimbusAwaitErrorElement,
+  NimbusDefaultRouteErrorBoundary,
+} from "cyberstorm/utils/errors/NimbusErrorBoundary";
+import { getLoaderTools } from "cyberstorm/utils/getLoaderTools";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
-    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: publicEnvVariables.VITE_API_URL,
-        sessionId: undefined,
-      };
-    });
-    return {
-      changelog: dapper.getPackageChangelog(
+    const { dapper } = getLoaderTools();
+    try {
+      const changelog = await dapper.getPackageChangelog(
         params.namespaceId,
         params.packageId
-      ),
-    };
+      );
+
+      return {
+        changelog,
+      };
+    } catch (error) {
+      handleLoaderError(error, {
+        mappings: [
+          createNotFoundMapping(
+            "Changelog not available.",
+            "We could not find a changelog for this package."
+          ),
+        ],
+      });
+    }
   }
-  return {
-    status: "error",
-    message: "Failed to load changelog",
-    changelog: { html: "" },
-  };
+  throwUserFacingPayloadResponse({
+    headline: "Changelog not available.",
+    description: "We could not find a changelog for this package.",
+    category: "not_found",
+    status: 404,
+  });
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export function clientLoader({ params }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId) {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
+    const { dapper } = getLoaderTools();
     return {
       changelog: dapper.getPackageChangelog(
         params.namespaceId,
         params.packageId
       ),
     };
   }
-  return {
-    status: "error",
-    message: "Failed to load changelog",
-    changelog: { html: "" },
-  };
+  throwUserFacingPayloadResponse({
+    headline: "Changelog not available.",
+    description: "We could not find a changelog for this package.",
+    category: "not_found",
+    status: 404,
+  });
 }
 
 export default function Changelog() {
-  const { status, message, changelog } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { changelog } = useLoaderData<typeof loader | typeof clientLoader>();
 
-  if (status === "error") return <div>{message}</div>;
   return (
     <Suspense
       fallback={<SkeletonBox className="package-changelog__skeleton" />}
     >
-      <Await
-        resolve={changelog}
-        errorElement={<div>Error occurred while loading changelog</div>}
-      >
+      <Await resolve={changelog} errorElement={<NimbusAwaitErrorElement />}>
         {(resolvedValue) => (
           <>
             <div className="markdown-wrapper">
@@ -83,3 +83,7 @@ export default function Changelog() {
     </Suspense>
   );
 }
+
+export function ErrorBoundary() {
+  return <NimbusDefaultRouteErrorBoundary />;
+}