Create error boundary for unauthenticated zone

Signed-off-by: Émile Ré <nemile.re@gmail.com>

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,7 +58,6 @@ const UpdatePolicyPage = lazy(() => import("./pages/UpdatePolicyPage"));
 function App() {
   return (
     <StrictMode>
-      <ErrorBoundary key={location.pathname}>
       <PostHogProvider client={posthog}>
         <RelayEnvironmentProvider environment={RelayEnvironment}>
           <HelmetProvider>
@@ -75,8 +75,7 @@ function App() {
                     }
                   />
 
-                    <Route path="*" element={<ConsoleLayout />}>
+                  <Route path="organizations" element={<ConsoleLayout />}>
-                      <Route path="organizations">
                     <Route
                       path="create"
                       element={
@@ -271,23 +270,16 @@ function App() {
                       />
                     </Route>
                   </Route>
-                    </Route>
 
                   {/* Authentication Routes - Accessible without login */}
-                    <Route
+                  <Route element={<AuthLayout />}>
-                      element={
-                        <ErrorBoundaryWithLocation>
-                          <AuthLayout />
-                        </ErrorBoundaryWithLocation>
-                      }
-                    >
                     <Route
                       path="login"
                       element={
                         <Suspense>
-                            <ErrorBoundaryWithLocation>
+                          <VisitorErrorBoundaryWithLocation>
                             <LoginPage />
-                            </ErrorBoundaryWithLocation>
+                          </VisitorErrorBoundaryWithLocation>
                         </Suspense>
                       }
                     />
@@ -295,9 +287,9 @@ function App() {
                       path="register"
                       element={
                         <Suspense>
-                            <ErrorBoundaryWithLocation>
+                          <VisitorErrorBoundaryWithLocation>
                             <RegisterPage />
-                            </ErrorBoundaryWithLocation>
+                          </VisitorErrorBoundaryWithLocation>
                         </Suspense>
                       }
                     />
@@ -305,15 +297,16 @@ function App() {
                       path="confirm-email"
                       element={
                         <Suspense>
-                            <ErrorBoundaryWithLocation>
+                          <VisitorErrorBoundaryWithLocation>
                             <ConfirmEmailPage />
-                            </ErrorBoundaryWithLocation>
+                          </VisitorErrorBoundaryWithLocation>
                         </Suspense>
                       }
                     />
                   </Route>
 
                   <Route
+                    path="*"
                     element={
                       <Suspense>
                         <NotFoundPage />
@@ -326,7 +319,6 @@ function App() {
           </HelmetProvider>
         </RelayEnvironmentProvider>
       </PostHogProvider>
-      </ErrorBoundary>
     </StrictMode>
   );
 }
@@ -340,6 +332,19 @@ function ErrorBoundaryWithLocation({
   return <ErrorBoundary key={location.pathname}>{children}</ErrorBoundary>;
 }
 
+function VisitorErrorBoundaryWithLocation({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const location = useLocation();
+  return (
+    <VisitorErrorBoundary key={location.pathname}>
+      {children}
+    </VisitorErrorBoundary>
+  );
+}
+
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(<App />);

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 <ErrorPage error={this.state.error} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default VisitorErrorBoundary;