Skip to content

Commit fa2ba52

Browse files
OksamiesOksamies
committed
Enhance error handling in all package readme routes
1 parent 5ac0d36 commit fa2ba52

File tree

4 files changed

+181
-143
lines changed

4 files changed

+181
-143
lines changed

‎apps/cyberstorm-remix/app/p/tabs/Readme/PackageVersionReadme.tsx‎

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,78 +10,87 @@ import { SkeletonBox } from "@thunderstore/cyberstorm";
1010
import { DapperTs } from "@thunderstore/dapper-ts";
1111

1212
import "./Readme.css";
13+
import { handleLoaderError } from "cyberstorm/utils/errors/handleLoaderError";
14+
import { createNotFoundMapping } from "cyberstorm/utils/errors/loaderMappings";
15+
import { throwUserFacingPayloadResponse } from "cyberstorm/utils/errors/userFacingErrorResponse";
16+
import {
17+
NimbusAwaitErrorElement,
18+
NimbusDefaultRouteErrorBoundary,
19+
} from "cyberstorm/utils/errors/NimbusErrorBoundary";
20+
import { getLoaderTools } from "cyberstorm/utils/getLoaderTools";
1321

1422
export async function loader({ params }: LoaderFunctionArgs) {
1523
if (params.namespaceId && params.packageId && params.packageVersion) {
16-
const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
17-
const dapper = new DapperTs(() => {
18-
return {
19-
apiHost: publicEnvVariables.VITE_API_URL,
20-
sessionId: undefined,
21-
};
22-
});
23-
return {
24-
readme: await dapper.getPackageReadme(
24+
const { dapper } = getLoaderTools();
25+
try {
26+
const readme = await dapper.getPackageReadme(
2527
params.namespaceId,
2628
params.packageId,
2729
params.packageVersion
28-
),
29-
};
30+
);
31+
32+
return {
33+
readme,
34+
};
35+
} catch (error) {
36+
handleLoaderError(error, {
37+
mappings: [
38+
createNotFoundMapping(
39+
"Readme not available.",
40+
"We could not find a readme for this package version."
41+
),
42+
],
43+
});
44+
}
3045
}
31-
return {
32-
status: "error",
33-
message: "Failed to load readme",
34-
readme: { html: "" },
35-
};
46+
throwUserFacingPayloadResponse({
47+
headline: "Readme not available.",
48+
description: "We could not find a readme for this package version.",
49+
category: "not_found",
50+
status: 404,
51+
});
3652
}
3753

38-
export async function clientLoader({ params }: LoaderFunctionArgs) {
54+
export function clientLoader({ params }: LoaderFunctionArgs) {
3955
if (params.namespaceId && params.packageId && params.packageVersion) {
40-
const tools = getSessionTools();
41-
const dapper = new DapperTs(() => {
42-
return {
43-
apiHost: tools?.getConfig().apiHost,
44-
sessionId: tools?.getConfig().sessionId,
45-
};
46-
});
56+
const { dapper } = getLoaderTools();
57+
const readme = dapper.getPackageReadme(
58+
params.namespaceId,
59+
params.packageId,
60+
params.packageVersion
61+
);
62+
4763
return {
48-
readme: dapper.getPackageReadme(
49-
params.namespaceId,
50-
params.packageId,
51-
params.packageVersion
52-
),
64+
readme,
5365
};
5466
}
55-
return {
56-
status: "error",
57-
message: "Failed to load readme",
58-
readme: { html: "" },
59-
};
67+
throwUserFacingPayloadResponse({
68+
headline: "Readme not available.",
69+
description: "We could not find a readme for this package version.",
70+
category: "not_found",
71+
status: 404,
72+
});
6073
}
6174

6275
export default function PackageVersionReadme() {
63-
const { status, message, readme } = useLoaderData<
64-
typeof loader | typeof clientLoader
65-
>();
76+
const { readme } = useLoaderData<typeof loader | typeof clientLoader>();
6677

67-
if (status === "error") return <div>{message}</div>;
6878
return (
6979
<Suspense fallback={<SkeletonBox className="package-readme__skeleton" />}>
70-
<Await
71-
resolve={readme}
72-
errorElement={<div>Error occurred while loading description</div>}
73-
>
80+
<Await resolve={readme} errorElement={<NimbusAwaitErrorElement />}>
7481
{(resolvedValue) => (
75-
<>
76-
<div className="markdown-wrapper">
77-
<div
78-
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
79-
className="markdown"
80-
/>
81-
</div>
82-
</>
82+
<div className="markdown-wrapper">
83+
<div
84+
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
85+
className="markdown"
86+
/>
87+
</div>
8388
)}
8489
</Await>
8590
</Suspense>
8691
);
8792
}
93+
94+
export function ErrorBoundary() {
95+
return <NimbusDefaultRouteErrorBoundary />;
96+
}

‎apps/cyberstorm-remix/app/p/tabs/Readme/PackageVersionWithoutCommunityReadme.tsx‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,78 +10,79 @@ import { SkeletonBox } from "@thunderstore/cyberstorm";
1010
import { DapperTs } from "@thunderstore/dapper-ts";
1111

1212
import "./Readme.css";
13+
import { handleLoaderError } from "cyberstorm/utils/errors/handleLoaderError";
14+
import { throwUserFacingPayloadResponse } from "cyberstorm/utils/errors/userFacingErrorResponse";
15+
import {
16+
NimbusAwaitErrorElement,
17+
NimbusDefaultRouteErrorBoundary,
18+
} from "cyberstorm/utils/errors/NimbusErrorBoundary";
19+
import { getLoaderTools } from "cyberstorm/utils/getLoaderTools";
1320

1421
export async function loader({ params }: LoaderFunctionArgs) {
1522
if (params.namespaceId && params.packageId && params.packageVersion) {
16-
const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
17-
const dapper = new DapperTs(() => {
18-
return {
19-
apiHost: publicEnvVariables.VITE_API_URL,
20-
sessionId: undefined,
21-
};
22-
});
23-
return {
24-
readme: await dapper.getPackageReadme(
23+
const { dapper } = getLoaderTools();
24+
try {
25+
const readme = await dapper.getPackageReadme(
2526
params.namespaceId,
2627
params.packageId,
2728
params.packageVersion
28-
),
29-
};
29+
);
30+
31+
return {
32+
readme,
33+
};
34+
} catch (error) {
35+
handleLoaderError(error);
36+
}
3037
}
31-
return {
32-
status: "error",
33-
message: "Failed to load readme",
34-
readme: { html: "" },
35-
};
38+
throwUserFacingPayloadResponse({
39+
headline: "Readme not available.",
40+
description: "We could not find a readme for this package version.",
41+
category: "not_found",
42+
status: 404,
43+
});
3644
}
3745

38-
export async function clientLoader({ params }: LoaderFunctionArgs) {
46+
export function clientLoader({ params }: LoaderFunctionArgs) {
3947
if (params.namespaceId && params.packageId && params.packageVersion) {
40-
const tools = getSessionTools();
41-
const dapper = new DapperTs(() => {
42-
return {
43-
apiHost: tools?.getConfig().apiHost,
44-
sessionId: tools?.getConfig().sessionId,
45-
};
46-
});
48+
const { dapper } = getLoaderTools();
49+
const readme = dapper.getPackageReadme(
50+
params.namespaceId,
51+
params.packageId,
52+
params.packageVersion
53+
);
54+
4755
return {
48-
readme: dapper.getPackageReadme(
49-
params.namespaceId,
50-
params.packageId,
51-
params.packageVersion
52-
),
56+
readme,
5357
};
5458
}
55-
return {
56-
status: "error",
57-
message: "Failed to load readme",
58-
readme: { html: "" },
59-
};
59+
throwUserFacingPayloadResponse({
60+
headline: "Readme not available.",
61+
description: "We could not find a readme for this package version.",
62+
category: "not_found",
63+
status: 404,
64+
});
6065
}
6166

6267
export default function PackageVersionReadme() {
63-
const { status, message, readme } = useLoaderData<
64-
typeof loader | typeof clientLoader
65-
>();
68+
const { readme } = useLoaderData<typeof loader | typeof clientLoader>();
6669

67-
if (status === "error") return <div>{message}</div>;
6870
return (
6971
<Suspense fallback={<SkeletonBox className="package-readme__skeleton" />}>
70-
<Await
71-
resolve={readme}
72-
errorElement={<div>Error occurred while loading description</div>}
73-
>
72+
<Await resolve={readme} errorElement={<NimbusAwaitErrorElement />}>
7473
{(resolvedValue) => (
75-
<>
76-
<div className="markdown-wrapper">
77-
<div
78-
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
79-
className="markdown"
80-
/>
81-
</div>
82-
</>
74+
<div className="markdown-wrapper">
75+
<div
76+
dangerouslySetInnerHTML={{ __html: resolvedValue.html }}
77+
className="markdown"
78+
/>
79+
</div>
8380
)}
8481
</Await>
8582
</Suspense>
8683
);
8784
}
85+
86+
export function ErrorBoundary() {
87+
return <NimbusDefaultRouteErrorBoundary />;
88+
}

‎apps/cyberstorm-remix/app/p/tabs/Readme/Readme.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,17 @@
22
.package-readme__skeleton {
33
height: 500px;
44
}
5+
6+
.package-readme__error {
7+
display: flex;
8+
flex-direction: column;
9+
gap: 1rem;
10+
align-items: flex-start;
11+
padding: 3rem 0;
12+
}
13+
14+
.package-readme__error-description {
15+
max-width: 40rem;
16+
color: var(--Color-text-muted, rgb(180 189 255 / 0.8));
17+
}
518
}

0 commit comments

Comments
 (0)