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

Fix error boundary state never reset

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-12 09:31:39 -08:00
parent a3056fabd5
commit ab53c40b49
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { lazy, StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { HelmetProvider } from "react-helmet-async"; import { HelmetProvider } from "react-helmet-async";
import { RelayEnvironmentProvider } from "react-relay"; import { RelayEnvironmentProvider } from "react-relay";
import { BrowserRouter, Route, Routes } from "react-router"; import { BrowserRouter, Route, Routes, useLocation } from "react-router";
import "App.css"; import "App.css";
import ErrorBoundary from "./components/ErrorBoundary"; import ErrorBoundary from "./components/ErrorBoundary";
import { ErrorPage } from "./pages/ErrorPage"; import { ErrorPage } from "./pages/ErrorPage";
@@ -32,7 +32,7 @@ const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
function App() { function App() {
return ( return (
<StrictMode> <StrictMode>
<ErrorBoundary> <ErrorBoundary key={location.pathname}>
<PostHogProvider client={posthog}> <PostHogProvider client={posthog}>
<RelayEnvironmentProvider environment={RelayEnvironment}> <RelayEnvironmentProvider environment={RelayEnvironment}>
<HelmetProvider> <HelmetProvider>
@@ -41,18 +41,18 @@ function App() {
<Route <Route
path="/" path="/"
element={ element={
<ErrorBoundary> <ErrorBoundaryWithLocation>
<ConsoleLayout /> <ConsoleLayout />
</ErrorBoundary> </ErrorBoundaryWithLocation>
} }
> >
<Route <Route
index index
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<HomePage /> <HomePage />
</ErrorBoundary> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -60,9 +60,9 @@ function App() {
path="/peoples" path="/peoples"
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<PeopleListPage /> <PeopleListPage />
</ErrorBoundary> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -70,9 +70,9 @@ function App() {
path="/vendors" path="/vendors"
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<VendorListPage /> <VendorListPage />
</ErrorBoundary> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -80,10 +80,9 @@ function App() {
path="/frameworks" path="/frameworks"
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<FrameworksPage />
</ErrorBoundary>
<FrameworkListPage /> <FrameworkListPage />
</ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -91,9 +90,9 @@ function App() {
path="/frameworks/:frameworkId" path="/frameworks/:frameworkId"
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<FrameworkOverviewPage /> <FrameworkOverviewPage />
</ErrorBoundary> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -101,9 +100,9 @@ function App() {
path="/vendors/:vendorId" path="/vendors/:vendorId"
element={ element={
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundaryWithLocation>
<VendorOverviewPage /> <VendorOverviewPage />
</ErrorBoundary> </ErrorBoundaryWithLocation>
</Suspense> </Suspense>
} }
/> />
@@ -126,6 +125,11 @@ function App() {
); );
} }
function ErrorBoundaryWithLocation({ children }: { children: React.ReactNode }) {
const location = useLocation();
return <ErrorBoundary key={location.pathname}>{children}</ErrorBoundary>;
}
const container = document.getElementById("root"); const container = document.getElementById("root");
const root = createRoot(container!); const root = createRoot(container!);
root.render(<App />); root.render(<App />);