Fix error boundary state never reset

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

View File

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