Add error detail on PageError

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console2/src/components/PageError.tsx

@@ -7,21 +7,27 @@ const classNames = {
   wrapper: "py-10 text-center space-y-2 ",
   title: "text-2xl flex gap-2 font-semibold items-center justify-center",
   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 = {
-  resetErrorBoundary: () => void;
+  resetErrorBoundary?: () => void;
+  error?: string;
 };
 
-export function PageError({ resetErrorBoundary }: Props) {
-  const error = useRouteError();
+export function PageError({ resetErrorBoundary, error: propsError }: Props) {
+  const error = useRouteError() ?? propsError;
   const { __ } = useTranslate();
   const location = useLocation();
   const baseLocation = useRef(location);
 
   // Reset error boundary on page change
   useEffect(() => {
-    if (location.pathname !== baseLocation.current.pathname) {
+    if (
+      location.pathname !== baseLocation.current.pathname &&
+      resetErrorBoundary
+    ) {
       resetErrorBoundary();
     }
   }, [location, resetErrorBoundary]);
@@ -43,7 +49,12 @@ export function PageError({ resetErrorBoundary }: Props) {
   return (
     <div className={classNames.wrapper}>
       <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>
   );
 }