rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add error detail on PageError

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-06-11 18:26:35 +02:00
committed by Sacha Al Himdani
parent f22eb86196
commit 1ba61f691e
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/console2/src/components/PageError.tsx
View File

@@ -7,21 +7,27 @@ const classNames = {
wrapper: "py-10 text-center space-y-2 ", wrapper: "py-10 text-center space-y-2 ",
title: "text-2xl flex gap-2 font-semibold items-center justify-center", title: "text-2xl flex gap-2 font-semibold items-center justify-center",
description: "text-base text-txt-tertiary", description: "text-base text-txt-tertiary",
detail:
"text-sm text-txt-tertiary font-mono text-start border border-border-low p-2 rounded bg-level-1 mt-2",
}; };
type Props = { type Props = {
resetErrorBoundary: () => void; resetErrorBoundary?: () => void;
error?: string;
}; };
export function PageError({ resetErrorBoundary }: Props) { export function PageError({ resetErrorBoundary, error: propsError }: Props) {
const error = useRouteError(); const error = useRouteError() ?? propsError;
const { __ } = useTranslate(); const { __ } = useTranslate();
const location = useLocation(); const location = useLocation();
const baseLocation = useRef(location); const baseLocation = useRef(location);
// Reset error boundary on page change // Reset error boundary on page change
useEffect(() => { useEffect(() => {
if (location.pathname !== baseLocation.current.pathname) { if (
location.pathname !== baseLocation.current.pathname &&
resetErrorBoundary
) {
resetErrorBoundary(); resetErrorBoundary();
} }
}, [location, resetErrorBoundary]); }, [location, resetErrorBoundary]);
@@ -43,7 +49,12 @@ export function PageError({ resetErrorBoundary }: Props) {
return ( return (
<div className={classNames.wrapper}> <div className={classNames.wrapper}>
<h1 className={classNames.title}>{__("Unexpected error :(")}</h1> <h1 className={classNames.title}>{__("Unexpected error :(")}</h1>
<p className={classNames.description}>{error.toString()}</p> <details>
<summary className={classNames.description}>
{__("Something went wrong")}
</summary>
<p className={classNames.detail}>{error.toString()}</p>
</details>
</div> </div>
); );
} }