feat: add error boundary

This commit is contained in:
Dan Ditomaso
2025-03-03 20:32:47 -05:00
parent f9066eced0
commit d28b4ce6d9
18 changed files with 342 additions and 194 deletions
+27 -26
View File
@@ -10,7 +10,8 @@ import Footer from "@components/UI/Footer.tsx";
import { useAppStore } from "@core/stores/appStore.ts";
import { useDeviceStore } from "@core/stores/deviceStore.ts";
import { Dashboard } from "@pages/Dashboard/index.tsx";
import { ErrorBoundary } from "react-error-boundary";
import { ErrorPage } from "./components/UI/ErrorPage.tsx";
import { MapProvider } from "react-map-gl/maplibre";
export const App = () => {
@@ -21,7 +22,7 @@ export const App = () => {
const device = getDevice(selectedDevice);
return (
<>
<ErrorBoundary FallbackComponent={ErrorPage}>
<NewDeviceDialog
open={connectDialogOpen}
onOpenChange={(open) => {
@@ -29,32 +30,32 @@ export const App = () => {
}}
/>
<Toaster />
<MapProvider>
<DeviceWrapper device={device}>
<div className="flex h-screen flex-col overflow-hidden bg-background-primary text-text-primary">
<div className="flex grow">
<DeviceSelector />
<div className="flex grow flex-col">
{device
? (
<div className="flex h-screen">
<DialogManager />
<KeyBackupReminder />
<CommandPalette />
<DeviceWrapper device={device}>
<div className="flex h-screen flex-col overflow-hidden bg-background-primary text-text-primary">
<div className="flex grow">
<DeviceSelector />
<div className="flex grow flex-col">
{device
? (
<div className="flex h-screen">
<DialogManager />
<KeyBackupReminder />
<CommandPalette />
<MapProvider>
<PageRouter />
</div>
)
: (
<>
<Dashboard />
<Footer />
</>
)}
</div>
</MapProvider>
</div>
)
: (
<>
<Dashboard />
<Footer />
</>
)}
</div>
</div>
</DeviceWrapper>
</MapProvider>
</>
</div>
</DeviceWrapper>
</ErrorBoundary>
);
};