diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index 018287649..2fe881c38 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -1,9 +1,11 @@ -import React, { ErrorInfo, ReactNode } from "react"; +import React, { ErrorInfo, ReactNode, useEffect } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; -import { faBugs } from "@fortawesome/free-solid-svg-icons"; +import { faBugs, faHome } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Button } from "@app/components/v2"; + interface ErrorBoundaryProps { children: ReactNode; } @@ -14,12 +16,22 @@ interface ErrorBoundaryState { } const ErrorPage = ({ error }: { error: Error | null }) => { + const [orgId, setOrgId] = React.useState(null); const router = useRouter(); const currentUrl = router?.asPath?.split("?")?.[0]; + // Workaround: Fixes localStorage not being available in the error boundary until the next render. + useEffect(() => { + const savedOrgId = localStorage.getItem("orgData.id"); + + if (savedOrgId) { + setOrgId(savedOrgId); + } + }, []); + return (
-
+

Something went wrong. Please contact{" "} @@ -44,23 +56,22 @@ const ErrorPage = ({ error }: { error: Error | null }) => { if the issue persists.

-
+ {orgId && ( + + )} {error?.message && ( -
-
-

Error details:

-

- Please provide this error message when contacting support, as it will help us - diagnose the issue at hand. -

-
-

- + <> +

+

+ {currentUrl}, {error.message}

-
+ )}