feat: add error boundary

src/PageRouter.tsx

@@ -4,16 +4,44 @@ import ChannelsPage from "@pages/Channels.tsx";
 import ConfigPage from "@pages/Config/index.tsx";
 import MessagesPage from "@pages/Messages.tsx";
 import NodesPage from "@pages/Nodes.tsx";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorPage } from "./components/UI/ErrorPage";
+
+export const ErrorBoundaryWrapper = ({
+  children,
+}: { children: React.ReactNode }) => (
+  <ErrorBoundary FallbackComponent={ErrorPage}>{children}</ErrorBoundary>
+);
 
 export const PageRouter = () => {
   const { activePage } = useDevice();
   return (
-    <>
-      {activePage === "messages" && <MessagesPage />}
-      {activePage === "map" && <MapPage />}
-      {activePage === "config" && <ConfigPage />}
-      {activePage === "channels" && <ChannelsPage />}
-      {activePage === "nodes" && <NodesPage />}
-    </>
+    <ErrorBoundary FallbackComponent={ErrorPage}>
+      {activePage === "messages" && (
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <MessagesPage />
+        </ErrorBoundary>
+      )}
+      {activePage === "map" && (
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <MapPage />
+        </ErrorBoundary>
+      )}
+      {activePage === "config" && (
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <ConfigPage />
+        </ErrorBoundary>
+      )}
+      {activePage === "channels" && (
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <ChannelsPage />
+        </ErrorBoundary>
+      )}
+      {activePage === "nodes" && (
+        <ErrorBoundary FallbackComponent={ErrorPage}>
+          <NodesPage />
+        </ErrorBoundary>
+      )}
+    </ErrorBoundary>
   );
 };