Thomas
19f9769d9e
* fix(manage/about): bypass self-fetch to prevent ECONNREFUSED crash The /manage/about page fetched its own API routes over HTTP (http://$HOSTNAME:3000/api/about/...). When the server could not reach itself (misconfigured HOSTNAME, restricted container networking, reverse-proxy setups), fetch threw ECONNREFUSED and the whole page crashed with a full-page Next.js error (issue #6008). All four routes were force-static serving static JSON / a direct fs read, so the HTTP round-trip was unnecessary. Replace the fetches with direct JSON imports and a direct getDependenciesAsync() call, eliminating the self-network dependency entirely. Also add a manage-level error.tsx boundary (Next.js 16 convention) so that any future runtime error in a manage page renders a friendly, localised fallback inside the existing layout (sidebar stays usable) instead of the ugly default full-page error. Exploration draft by an LLM. Refs #6008 * style: auto-fix lint and format * refactor: use @static-data path alias, simplify error ternary - Add @static-data/* tsconfig path alias to replace 7-level relative imports (../../../../../../../static-data/...) with clean alias imports across the about page and all 3 API route handlers. - Simplify error.tsx: replace ternary with && short-circuit. - Preserve CI lint bot's .sort() -> .toSorted() fix. Refs #6008
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { Button, Center, Stack, Text, Title } from "@mantine/core";
|
|
import { IconAlertTriangle } from "@tabler/icons-react";
|
|
|
|
import { useI18n, useScopedI18n } from "@homarr/translation/client";
|
|
|
|
export default function ManageErrorPage({
|
|
error,
|
|
unstable_retry,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
unstable_retry: () => void;
|
|
}) {
|
|
const tError = useScopedI18n("management.error");
|
|
const t = useI18n();
|
|
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<Center h="100%">
|
|
<Stack align="center" gap="xs">
|
|
<IconAlertTriangle size={48} stroke={1.5} />
|
|
<Title order={3}>{tError("title")}</Title>
|
|
<Text size="sm" c="dimmed" maw={480} ta="center">
|
|
{tError("text")}
|
|
</Text>
|
|
{error.digest && (
|
|
<Text size="xs" c="dimmed">
|
|
{tError("digest", { digest: error.digest })}
|
|
</Text>
|
|
)}
|
|
<Button variant="light" onClick={unstable_retry}>
|
|
{t("common.action.tryAgain")}
|
|
</Button>
|
|
</Stack>
|
|
</Center>
|
|
);
|
|
}
|