Refactor loader functions to improve error handling and simplify response structure in package source tab

Author: Oksamies

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

@@ -15,132 +15,79 @@ import {
 } from "@thunderstore/cyberstorm";
 import { TooltipWrapper } from "@thunderstore/cyberstorm/src/primitiveComponents/utils/utils";
 import { type OutletContextShape } from "~/root";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
-import { DapperTs } from "@thunderstore/dapper-ts";
 import { Alert } from "@thunderstore/cyberstorm/src/newComponents/Alert/Alert";
-import { isApiError } from "@thunderstore/thunderstore-api";
-import { getPackageSource } from "@thunderstore/dapper-ts/src/methods/package";
 import { CodeBoxHTML } from "../../../commonComponents/CodeBoxHTML/CodeBoxHTML";
+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";
 
 type PackageListingOutletContext = OutletContextShape & {
   packageDownloadUrl?: string;
 };
 
-type ResultType = {
-  status: string | null;
-  message?: string;
-  source?:
-    | Awaited<ReturnType<typeof getPackageSource>>
-    | ReturnType<typeof getPackageSource>;
-};
-
 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,
-      };
-    });
-    let result: ResultType = {
-      status: null,
-      source: undefined,
-      message: undefined,
-    };
+    const { dapper } = getLoaderTools();
     try {
       const source = await dapper.getPackageSource(
         params.namespaceId,
         params.packageId
       );
-      result = {
-        status: null,
-        source: source,
-        message: undefined,
+
+      return {
+        source,
       };
     } catch (error) {
-      if (isApiError(error)) {
-        if (error.response.status > 400) {
-          result = {
-            status: "error",
-            source: undefined,
-            message: `Failed to load source: ${error.message}`,
-          };
-        } else {
-          throw error;
-        }
-      } else {
-        throw error;
-      }
+      handleLoaderError(error, {
+        mappings: [
+          createNotFoundMapping(
+            "Source not available.",
+            "We could not find the requested package source."
+          ),
+        ],
+      });
     }
-    return result;
   }
-  return {
-    status: "error",
-    message: "Failed to load source",
-    source: undefined,
-  };
+  throwUserFacingPayloadResponse({
+    headline: "Source not available.",
+    description: "We could not find the requested package source.",
+    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,
-      };
-    });
-    let result: ResultType = {
-      status: null,
-      source: undefined,
-      message: undefined,
+    const { dapper } = getLoaderTools();
+    const source = dapper.getPackageSource(
+      params.namespaceId,
+      params.packageId
+    );
+
+    return {
+      source,
     };
-    try {
-      const source = dapper.getPackageSource(
-        params.namespaceId,
-        params.packageId
-      );
-      result = {
-        status: null,
-        source: source,
-        message: undefined,
-      };
-    } catch (error) {
-      result = {
-        status: "error",
-        source: undefined,
-        message: "Failed to load source",
-      };
-      throw error;
-    }
-    return result;
   }
-  return {
-    status: "error",
-    message: "Failed to load source",
-    source: undefined,
-  };
+  throwUserFacingPayloadResponse({
+    headline: "Source not available.",
+    description: "We could not find the requested package source.",
+    category: "not_found",
+    status: 404,
+  });
 }
 
 export default function Source() {
-  const { status, message, source } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { source } = useLoaderData<typeof loader | typeof clientLoader>();
   const outletContext = useOutletContext() as PackageListingOutletContext;
 
-  if (status === "error") {
-    return <div>{message}</div>;
-  }
   return (
     <Suspense fallback={<SkeletonBox className="package-source__skeleton" />}>
-      <Await
-        resolve={source}
-        errorElement={<div>Error occurred while loading source</div>}
-      >
+      <Await resolve={source} errorElement={<NimbusAwaitErrorElement />}>
         {(resolvedValue) => {
           const decompilations = resolvedValue?.decompilations ?? [];
           const lastDecompilationDate = resolvedValue?.last_decompilation_date;
@@ -192,6 +139,10 @@ export default function Source() {
   );
 }
 
+export function ErrorBoundary() {
+  return <NimbusDefaultRouteErrorBoundary />;
+}
+
 const DecompilationDateDisplay = (props: {
   lastDecompilationDate: string | null | undefined;
 }) => {