Enhance error handling in all package version routes

Author: Oksamies

apps/cyberstorm-remix/app/p/packageVersion.tsx

@@ -6,10 +6,15 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
 import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
+  NimbusAwaitErrorElement,
+  NimbusDefaultRouteErrorBoundary,
+} from "cyberstorm/utils/errors/NimbusErrorBoundary";
+import { handleLoaderError } from "cyberstorm/utils/errors/handleLoaderError";
+import { createNotFoundMapping } from "cyberstorm/utils/errors/loaderMappings";
+import { throwUserFacingPayloadResponse } from "cyberstorm/utils/errors/userFacingErrorResponse";
+import { getLoaderTools } from "cyberstorm/utils/getLoaderTools";
 import { isPromise } from "cyberstorm/utils/typeChecks";
 import {
   type ReactElement,
@@ -51,13 +56,15 @@ import {
   formatInteger,
   formatToDisplayName,
 } from "@thunderstore/cyberstorm";
-import {
-  DapperTs,
-  getPackageVersionDetails,
-  getTeamDetails,
-} from "@thunderstore/dapper-ts";
+import { getPackageVersionDetails } from "@thunderstore/dapper-ts/src/methods/packageVersion";
+import { getTeamDetails } from "@thunderstore/dapper-ts/src/methods/team";
 
-import "./packageListing.css";
+const packageVersionNotFoundMappings = [
+  createNotFoundMapping(
+    "Package version not found.",
+    "We could not find the requested package version."
+  ),
+];
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (
@@ -66,55 +73,81 @@ export async function loader({ params }: LoaderFunctionArgs) {
     params.packageId &&
     params.packageVersion
   ) {
-    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-    const dapper = new DapperTs(() => {
+    const { dapper } = getLoaderTools();
+    try {
+      const [community, version, team] = await Promise.all([
+        dapper.getCommunity(params.communityId),
+        dapper.getPackageVersionDetails(
+          params.namespaceId,
+          params.packageId,
+          params.packageVersion
+        ),
+        dapper.getTeamDetails(params.namespaceId),
+      ]);
+
       return {
-        apiHost: publicEnvVariables.VITE_API_URL,
-        sessionId: undefined,
+        communityId: params.communityId,
+        community,
+        version,
+        team,
       };
-    });
-
-    return {
-      communityId: params.communityId,
-      community: await dapper.getCommunity(params.communityId),
-      version: await dapper.getPackageVersionDetails(
-        params.namespaceId,
-        params.packageId,
-        params.packageVersion
-      ),
-      team: await dapper.getTeamDetails(params.namespaceId),
-    };
+    } catch (error) {
+      handleLoaderError(error, { mappings: packageVersionNotFoundMappings });
+    }
   }
-  throw new Response("Package not found", { status: 404 });
+  throwUserFacingPayloadResponse({
+    headline: "Package not found.",
+    description: "We could not find the requested package.",
+    category: "not_found",
+    status: 404,
+  });
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export function clientLoader({ params }: LoaderFunctionArgs) {
   if (
     params.communityId &&
     params.namespaceId &&
     params.packageId &&
     params.packageVersion
   ) {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
-
-    return {
-      communityId: params.communityId,
-      community: dapper.getCommunity(params.communityId),
-      version: dapper.getPackageVersionDetails(
+    const { dapper } = getLoaderTools();
+    const community = dapper
+      .getCommunity(params.communityId)
+      .catch((error) =>
+        handleLoaderError(error, { mappings: packageVersionNotFoundMappings })
+      );
+    const version = dapper
+      .getPackageVersionDetails(
         params.namespaceId,
         params.packageId,
         params.packageVersion
-      ),
-      team: dapper.getTeamDetails(params.namespaceId),
+      )
+      .catch((error) =>
+        handleLoaderError(error, { mappings: packageVersionNotFoundMappings })
+      );
+    const team = dapper
+      .getTeamDetails(params.namespaceId)
+      .catch((error) =>
+        handleLoaderError(error, { mappings: packageVersionNotFoundMappings })
+      );
+
+    return {
+      communityId: params.communityId,
+      community,
+      version,
+      team,
     };
   }
-  throw new Response("Package not found", { status: 404 });
+  throwUserFacingPayloadResponse({
+    headline: "Package not found.",
+    description: "We could not find the requested package.",
+    category: "not_found",
+    status: 404,
+  });
+}
+
+export function ErrorBoundary() {
+  return <NimbusDefaultRouteErrorBoundary />;
 }
 
 export function shouldRevalidate(arg: ShouldRevalidateFunctionArgs) {
@@ -154,39 +187,65 @@ export default function PackageVersion() {
   // If strict mode is removed from the entry.client.tsx, this should only run once
   useEffect(() => {
     if (!startsHydrated.current && isHydrated) return;
-    if (isPromise(version)) {
-      version.then((versionData) => {
-        setFirstUploaded(
-          <RelativeTime
-            time={versionData.datetime_created}
-            suppressHydrationWarning
-          />
-        );
-      });
-    } else {
+    if (!isPromise(version)) {
       setFirstUploaded(
         <RelativeTime
           time={version.datetime_created}
           suppressHydrationWarning
         />
       );
+      return;
     }
-  }, []);
+
+    let isCancelled = false;
+
+    const resolveVersionTimes = async () => {
+      try {
+        const versionData = await version;
+        if (isCancelled) {
+          return;
+        }
+
+        setFirstUploaded(
+          <RelativeTime
+            time={versionData.datetime_created}
+            suppressHydrationWarning
+          />
+        );
+      } catch (error) {
+        if (!isCancelled) {
+          console.error("Failed to resolve version metadata", error);
+        }
+      }
+    };
+
+    resolveVersionTimes();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isHydrated, version]);
   // END: For sidebar meta dates
 
   const currentTab = location.pathname.split("/")[8] || "details";
 
   const versionAndCommunityPromise = useMemo(
     () => Promise.all([version, community]),
-    []
+    [version, community]
   );
 
-  const versionAndTeamPromise = useMemo(() => Promise.all([version, team]), []);
+  const versionAndTeamPromise = useMemo(
+    () => Promise.all([version, team]),
+    [version, team]
+  );
 
   return (
     <>
       <Suspense>
-        <Await resolve={versionAndCommunityPromise}>
+        <Await
+          resolve={versionAndCommunityPromise}
+          errorElement={<NimbusAwaitErrorElement />}
+        >
           {(resolvedValue) => (
             <>
               <meta
@@ -235,7 +294,10 @@ export default function PackageVersion() {
                   </NewAlert>
                 }
               >
-                <Await resolve={version}>
+                <Await
+                  resolve={version}
+                  errorElement={<NimbusAwaitErrorElement />}
+                >
                   {(resolvedValue) => (
                     <NewAlert csVariant="warning">
                       You are viewing a potentially older version of this
@@ -259,7 +321,10 @@ export default function PackageVersion() {
                   <SkeletonBox className="package-listing__page-header-skeleton" />
                 }
               >
-                <Await resolve={version}>
+                <Await
+                  resolve={version}
+                  errorElement={<NimbusAwaitErrorElement />}
+                >
                   {(resolvedValue) => (
                     <PageHeader
                       headingLevel="1"
@@ -325,15 +390,21 @@ export default function PackageVersion() {
                   rootClasses="package-listing__drawer"
                 >
                   <Suspense fallback={<p>Loading...</p>}>
-                    <Await resolve={version}>
+                    <Await
+                      resolve={version}
+                      errorElement={<NimbusAwaitErrorElement />}
+                    >
                       {(resolvedValue) => (
                         <>{packageMeta(firstUploaded, resolvedValue)}</>
                       )}
                     </Await>
                   </Suspense>
                 </Drawer>
                 <Suspense fallback={<p>Loading...</p>}>
-                  <Await resolve={versionAndTeamPromise}>
+                  <Await
+                    resolve={versionAndTeamPromise}
+                    errorElement={<NimbusAwaitErrorElement />}
+                  >
                     {(resolvedValue) => (
                       <Actions
                         team={resolvedValue[1]}
@@ -348,7 +419,10 @@ export default function PackageVersion() {
                   <SkeletonBox className="package-listing__nav-skeleton" />
                 }
               >
-                <Await resolve={version}>
+                <Await
+                  resolve={version}
+                  errorElement={<NimbusAwaitErrorElement />}
+                >
                   {(resolvedValue) => (
                     <>
                       <Tabs>
@@ -418,7 +492,10 @@ export default function PackageVersion() {
                   <SkeletonBox className="package-listing-sidebar__install-skeleton" />
                 }
               >
-                <Await resolve={version}>
+                <Await
+                  resolve={version}
+                  errorElement={<NimbusAwaitErrorElement />}
+                >
                   {(resolvedValue) => (
                     <NewButton
                       csVariant="accent"
@@ -442,7 +519,10 @@ export default function PackageVersion() {
                     <SkeletonBox className="package-listing-sidebar__actions-skeleton" />
                   }
                 >
-                  <Await resolve={versionAndTeamPromise}>
+                  <Await
+                    resolve={versionAndTeamPromise}
+                    errorElement={<NimbusAwaitErrorElement />}
+                  >
                     {(resolvedValue) => (
                       <Actions
                         team={resolvedValue[1]}
@@ -456,7 +536,10 @@ export default function PackageVersion() {
                     <SkeletonBox className="package-listing-sidebar__skeleton" />
                   }
                 >
-                  <Await resolve={version}>
+                  <Await
+                    resolve={version}
+                    errorElement={<NimbusAwaitErrorElement />}
+                  >
                     {(resolvedValue) => (
                       <>{packageMeta(firstUploaded, resolvedValue)}</>
                     )}