diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx index 5c118361f..af6f060a4 100644 --- a/apps/console/src/App.tsx +++ b/apps/console/src/App.tsx @@ -11,6 +11,7 @@ import ErrorBoundary from "./components/ErrorBoundary"; import ConsoleLayout from "./layouts/ConsoleLayout"; import AuthLayout from "./layouts/AuthLayout"; import { RelayEnvironment } from "./RelayEnvironment"; +import VisitorErrorBoundary from "./components/VisitorErrorBoundary"; posthog.init(process.env.POSTHOG_KEY!, { api_host: process.env.POSTHOG_HOST, @@ -57,276 +58,267 @@ const UpdatePolicyPage = lazy(() => import("./pages/UpdatePolicyPage")); function App() { return ( - - - - - - - + + + + + + + + + + + + } + /> + + }> - + } /> - - }> - - - - - - - } - /> - - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - {/* Policy Routes */} - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - - } - /> - - - - - {/* Authentication Routes - Accessible without login */} - - - - } - > + - + } /> - + } /> - + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + {/* Policy Routes */} + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + } /> + + {/* Authentication Routes - Accessible without login */} + }> - + + + + + } + /> + + + + + + } + /> + + + + } /> - - - - - - + + + + + } + /> + + + + + + ); } @@ -340,6 +332,19 @@ function ErrorBoundaryWithLocation({ return {children}; } +function VisitorErrorBoundaryWithLocation({ + children, +}: { + children: React.ReactNode; +}) { + const location = useLocation(); + return ( + + {children} + + ); +} + const container = document.getElementById("root"); const root = createRoot(container!); root.render(); diff --git a/apps/console/src/components/VisitorErrorBoundary.tsx b/apps/console/src/components/VisitorErrorBoundary.tsx new file mode 100644 index 000000000..f5ee8ea6d --- /dev/null +++ b/apps/console/src/components/VisitorErrorBoundary.tsx @@ -0,0 +1,48 @@ +import { Component, ErrorInfo, ReactNode } from "react"; +import { ErrorPage } from "@/pages/ErrorPage"; +import { UnAuthenticatedError } from "@/RelayEnvironment"; + +interface ErrorBoundaryProps { + children: ReactNode; + fallback?: ReactNode; +} + +interface ErrorBoundaryState { + hasError: boolean; + error?: Error; +} + +class VisitorErrorBoundary extends Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + if (error instanceof UnAuthenticatedError) { + return { hasError: false, error: undefined }; + } + return { hasError: true, error }; + } + + componentDidCatch(error: Error, info: ErrorInfo): void { + console.error("ErrorBoundary caught an error:", error); + console.error("Error info:", info.componentStack); + } + + render(): ReactNode { + if (this.state.hasError) { + if (this.props.fallback) { + return this.props.fallback; + } + return ; + } + + return this.props.children; + } +} + +export default VisitorErrorBoundary;