add ErrorBoundary around layout outlet

packages/app/src/Element/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  errorMessage?: string;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, errorMessage: error.message };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Caught an error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render any custom fallback UI with the error message
+      return (
+        <div className="p-2">
+          <h1>Something went wrong.</h1>
+          <p>Error: {this.state.errorMessage}</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/app/src/Pages/DeckLayout.tsx

@@ -22,6 +22,7 @@ import Toaster from "@/Toaster";
 import useLogin from "@/Hooks/useLogin";
 import { LongFormText } from "@/Element/Event/LongFormText";
 import NavSidebar from "@/Pages/Layout/NavSidebar";
+import ErrorBoundary from "@/Element/ErrorBoundary";
 
 type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
 
@@ -68,6 +69,7 @@ export function SnortDeckLayout() {
           reset: () => setDeckState({}),
         }}>
         <NavSidebar narrow={true} />
+        <ErrorBoundary>
           <div className="deck-cols">
             {cols.map(c => {
               switch (c) {
@@ -108,6 +110,7 @@ export function SnortDeckLayout() {
             </>
           )}
           <Toaster />
+        </ErrorBoundary>
       </DeckContext.Provider>
     </div>
   );

packages/app/src/Pages/Layout/index.tsx

@@ -17,6 +17,7 @@ import AccountHeader from "./AccountHeader";
 import RightColumn from "./RightColumn";
 import { LogoHeader } from "./LogoHeader";
 import useLoginFeed from "@/Feed/LoginFeed";
+import ErrorBoundary from "@/Element/ErrorBoundary";
 
 export default function Index() {
   const location = useLocation();
@@ -62,7 +63,9 @@ export default function Index() {
         <div className="flex flex-row w-full">
           <NavSidebar />
           <div className="flex flex-1 flex-col overflow-x-hidden">
+            <ErrorBoundary>
               <Outlet />
+            </ErrorBoundary>
           </div>
           <RightColumn />
         </div>