Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: 11-19-_ts-api-react-actions_enhance_error_handling_in_api_actions_and_hooks_with_user-facing_error_mapping
Choose a base branch
from
Draft

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 60 additions & 102 deletions apps/cyberstorm-remix/app/p/tabs/Source/Source.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,151 +1,105 @@
import { faClock, faDownload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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 { Suspense } from "react";
import { Await, type LoaderFunctionArgs, useOutletContext } from "react-router";
import { useLoaderData } from "react-router";
import {
Await,
type LoaderFunctionArgs,
useLoaderData,
useOutletContext,
} from "react-router";
import ago from "s-ago";
import { type OutletContextShape } from "~/root";
import { CodeBoxHTML } from "~/commonComponents/CodeBoxHTML/CodeBoxHTML";
import type { OutletContextShape } from "~/root";

import {
NewAlert as Alert,
Heading,
NewAlert,
NewButton,
NewIcon,
SkeletonBox,
TooltipWrapper,
} from "@thunderstore/cyberstorm";
import { DapperTs, getPackageSource } from "@thunderstore/dapper-ts";
import { isApiError } from "@thunderstore/thunderstore-api";

import { CodeBoxHTML } from "../../../commonComponents/CodeBoxHTML/CodeBoxHTML";
import "./Source.css";

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({
Copy link
Contributor

@anttimaki anttimaki Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Nitpick: this could be defined as variable outside the loader and then used by both loaders.
  2. Offtopic: packageListing.tsx seems to always render link to this tab even if the source doesn't exists. Not ideal UX and not up to feature parity
  3. On the legacy site accessing source tab for a mod that doesn't have source available doesn't show 404. I personally think showing 404 here would be ok if we didn't link to the non-existent page ourselves. If Add ESLint #2 above isn't fixed, I think this page should show non-404 page that tells the user the source isn't available. I don't have a strong opinion on which one we do, but we should do one.

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;
if (decompilations.length === 0) {
return (
<Alert csVariant="info">Decompiled source not available.</Alert>
<NewAlert csVariant="info">
Decompiled source not available.
</NewAlert>
);
}
return decompilations.map((decompilation) => {
Expand All @@ -171,10 +125,10 @@ export default function Source() {
/>
</div>
{decompilation.is_truncated && (
<Alert csVariant="warning">
<NewAlert csVariant="warning">
The result has been truncated due to the large size,
download it to view the full contents!
</Alert>
</NewAlert>
)}
<div
className="package-source__decompilations-file"
Expand All @@ -191,6 +145,10 @@ export default function Source() {
);
}

export function ErrorBoundary() {
Copy link
Contributor

@anttimaki anttimaki Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I didn't get any response the last time I suggested using export { NimbusDefaultRouteErrorBoundary as ErrorBoundary } from "cyberstorm/utils/errors/NimbusErrorBoundary";. Does that not work or do you think it's a bad idea otherwise?

return <NimbusDefaultRouteErrorBoundary />;
}

const DecompilationDateDisplay = (props: {
lastDecompilationDate: string | null | undefined;
}) => {
Expand Down
Loading