Merge pull request meshtastic#458 from danditomaso/feat/add-error-boundary

feat: add error boundary

Author: Hunter275

bun.lock

@@ -37,6 +37,7 @@
         "maplibre-gl": "5.1.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-error-boundary": "^5.0.0",
         "react-hook-form": "^7.54.2",
         "react-map-gl": "8.0.1",
         "react-qrcode-logo": "^3.0.0",
@@ -1523,6 +1524,8 @@
 
     "react-dom": ["[email protected]", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
 
+    "react-error-boundary": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "react": ">=16.13.1" } }, "sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ=="],
+
     "react-hook-form": ["[email protected]", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg=="],
 
     "react-is": ["[email protected]", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
@@ -1543,6 +1546,8 @@
 
     "readable-stream": ["[email protected]", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
+    "regenerator-runtime": ["[email protected]", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
+
     "reflect.getprototypeof": ["[email protected]", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regenerate": ["[email protected]", "", {}, "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="],

package.json

@@ -70,6 +70,7 @@
     "maplibre-gl": "5.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.54.2",
     "react-map-gl": "8.0.1",
     "react-qrcode-logo": "^3.0.0",

public/images/chirpy.svg

@@ -12,8 +12,11 @@ import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Dashboard } from "@pages/Dashboard/index.tsx";
 import type { JSX } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorPage } from "./components/UI/ErrorPage";
 import { MapProvider } from "react-map-gl/maplibre";
 
+
 export const App = (): JSX.Element => {
   const { getDevice } = useDeviceStore();
   const { selectedDevice, setConnectDialogOpen, connectDialogOpen } =
@@ -22,38 +25,38 @@ export const App = (): JSX.Element => {
   const device = getDevice(selectedDevice);
 
   return (
-    <>
+    <ErrorBoundary FallbackComponent={ErrorPage}>
       <NewDeviceDialog
         open={connectDialogOpen}
         onOpenChange={(open) => {
           setConnectDialogOpen(open);
         }}
       />
       <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 w-full">
+                  <DialogManager />
+                  <KeyBackupReminder />
+                  <CommandPalette />
+                  <MapProvider>
                     <PageRouter />
-                  </div>
-                ) : (
-                  <>
-                    <Dashboard />
-                    <Footer />
-                  </>
-                )}
-              </div>
+                  </MapProvider>
+                </div>
+              ) : (
+                <>
+                  <Dashboard />
+                  <Footer />
+                </>
+              )}
             </div>
           </div>
-        </DeviceWrapper>
-      </MapProvider>
-    </>
+        </div>
+      </DeviceWrapper>
+    </ErrorBoundary>
   );
 };