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

Create error boundary for unauthenticated zone

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-14 12:14:34 +04:00
parent ac7fa6edb3
commit b3751636b2
2 changed files with 282 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

463
apps/console/src/App.tsx
View File

@@ -11,6 +11,7 @@ import ErrorBoundary from "./components/ErrorBoundary";
import ConsoleLayout from "./layouts/ConsoleLayout"; import ConsoleLayout from "./layouts/ConsoleLayout";
import AuthLayout from "./layouts/AuthLayout"; import AuthLayout from "./layouts/AuthLayout";
import { RelayEnvironment } from "./RelayEnvironment"; import { RelayEnvironment } from "./RelayEnvironment";
import VisitorErrorBoundary from "./components/VisitorErrorBoundary";
posthog.init(process.env.POSTHOG_KEY!, { posthog.init(process.env.POSTHOG_KEY!, {
api_host: process.env.POSTHOG_HOST, api_host: process.env.POSTHOG_HOST,
@@ -57,276 +58,267 @@ const UpdatePolicyPage = lazy(() => import("./pages/UpdatePolicyPage"));
function App() { function App() {
return ( return (
<StrictMode> <StrictMode>
<ErrorBoundary key={location.pathname}> <PostHogProvider client={posthog}>
<PostHogProvider client={posthog}> <RelayEnvironmentProvider environment={RelayEnvironment}>
<RelayEnvironmentProvider environment={RelayEnvironment}> <HelmetProvider>
<HelmetProvider> <BrowserRouter>
<BrowserRouter> <Routes>
<Routes> <Route path="/*">
<Route path="/*"> <Route
index
element={
<Suspense>
<ErrorBoundaryWithLocation>
<OrganizationSelectionPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route path="organizations" element={<ConsoleLayout />}>
<Route <Route
index path="create"
element={ element={
<Suspense> <Suspense>
<ErrorBoundaryWithLocation> <ErrorBoundaryWithLocation>
<OrganizationSelectionPage /> <CreateOrganizationPage />
</ErrorBoundaryWithLocation> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
<Route path=":organizationId">
<Route path="*" element={<ConsoleLayout />}>
<Route path="organizations">
<Route
path="create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateOrganizationPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route path=":organizationId">
<Route
index
element={
<Suspense>
<ErrorBoundaryWithLocation>
<HomePage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="peoples"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PeopleListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="peoples/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreatePeoplePage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="peoples/:peopleId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PeopleOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="vendors"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<VendorListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<FrameworkListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<FrameworkOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateControlPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/:controlId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<ControlOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/:controlId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdateControlPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="vendors/:vendorId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<VendorOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
{/* Policy Routes */}
<Route
path="policies"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PolicyListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreatePolicyPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/:policyId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PolicyOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/:policyId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdatePolicyPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="settings"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<SettingsPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
</Route>
</Route>
</Route>
{/* Authentication Routes - Accessible without login */}
<Route
element={
<ErrorBoundaryWithLocation>
<AuthLayout />
</ErrorBoundaryWithLocation>
}
>
<Route <Route
path="login" index
element={ element={
<Suspense> <Suspense>
<ErrorBoundaryWithLocation> <ErrorBoundaryWithLocation>
<LoginPage /> <HomePage />
</ErrorBoundaryWithLocation> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="register" path="peoples"
element={ element={
<Suspense> <Suspense>
<ErrorBoundaryWithLocation> <ErrorBoundaryWithLocation>
<RegisterPage /> <PeopleListPage />
</ErrorBoundaryWithLocation> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
<Route <Route
path="confirm-email" path="peoples/create"
element={ element={
<Suspense> <Suspense>
<ErrorBoundaryWithLocation> <ErrorBoundaryWithLocation>
<ConfirmEmailPage /> <CreatePeoplePage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="peoples/:peopleId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PeopleOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="vendors"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<VendorListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<FrameworkListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<FrameworkOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdateFrameworkPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreateControlPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/:controlId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<ControlOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="frameworks/:frameworkId/controls/:controlId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdateControlPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="vendors/:vendorId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<VendorOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
{/* Policy Routes */}
<Route
path="policies"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PolicyListPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/create"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<CreatePolicyPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/:policyId"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<PolicyOverviewPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="policies/:policyId/update"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<UpdatePolicyPage />
</ErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="settings"
element={
<Suspense>
<ErrorBoundaryWithLocation>
<SettingsPage />
</ErrorBoundaryWithLocation> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
</Route> </Route>
</Route>
{/* Authentication Routes - Accessible without login */}
<Route element={<AuthLayout />}>
<Route <Route
path="login"
element={ element={
<Suspense> <Suspense>
<NotFoundPage /> <VisitorErrorBoundaryWithLocation>
<LoginPage />
</VisitorErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="register"
element={
<Suspense>
<VisitorErrorBoundaryWithLocation>
<RegisterPage />
</VisitorErrorBoundaryWithLocation>
</Suspense>
}
/>
<Route
path="confirm-email"
element={
<Suspense>
<VisitorErrorBoundaryWithLocation>
<ConfirmEmailPage />
</VisitorErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
</Route> </Route>
</Routes>
</BrowserRouter> <Route
</HelmetProvider> path="*"
</RelayEnvironmentProvider> element={
</PostHogProvider> <Suspense>
</ErrorBoundary> <NotFoundPage />
</Suspense>
}
/>
</Route>
</Routes>
</BrowserRouter>
</HelmetProvider>
</RelayEnvironmentProvider>
</PostHogProvider>
</StrictMode> </StrictMode>
); );
} }
@@ -340,6 +332,19 @@ function ErrorBoundaryWithLocation({
return <ErrorBoundary key={location.pathname}>{children}</ErrorBoundary>; 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 container = document.getElementById("root");
const root = createRoot(container!); const root = createRoot(container!);
root.render(<App />); root.render(<App />);

48
apps/console/src/components/VisitorErrorBoundary.tsx Normal file
View File

@@ -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;