feat: add ErrorBoundary and InitializationExceptions components, enhance Routing with dark mode and unconnected ports functionality

Author: ndorin

src/App.tsx

@@ -4,6 +4,8 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import ConfigFile from "./features/ConfigFile";
 import DebugConsole from "./features/DebugConsole/DebugConsole";
 import DeviceList from "./features/DeviceList";
+import ErrorBoundary from "./features/ErrorBoundary";
+import InitializationExceptions from "./features/InitializationExceptions";
 import MainLayout from "./features/MainLayout";
 import MobileControl from './features/MobileControl';
 import Routing from './features/Routing';
@@ -43,11 +45,13 @@ function App() {
   };
 
   return (
-    <Suspense fallback={null}>
-      <Routes>
+    <ErrorBoundary>
+      <Suspense fallback={null}>
+        <Routes>
         <Route path="/" element={<Navigate to="/app01/versions" replace />} />
         <Route path=":appId" element={<MainLayout isConnected={isConnected} />}>
           <Route path="versions" element={<Versions />} />
+          <Route path="initializationExceptions" element={<InitializationExceptions />} />
           <Route path="config" element={<ConfigFile />} />
           <Route path="devices" element={<DeviceList />} />
           <Route path="types" element={<Types />} />
@@ -65,8 +69,9 @@ function App() {
             }
           />
         </Route>
-      </Routes>
-    </Suspense>
+        </Routes>
+      </Suspense>
+    </ErrorBoundary>
   );
 }
 

src/features/ErrorBoundary.tsx

@@ -0,0 +1,31 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import ErrorBox from "./ErrorBox";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorBox />;
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/features/InitializationExceptions.tsx

@@ -0,0 +1,94 @@
+import { skipToken } from "@reduxjs/toolkit/query";
+import { useState } from "react";
+import useAppParams from "../shared/hooks/useAppParams";
+import {
+  EssentialsException,
+  useGetInitializationExceptionsQuery,
+} from "../store/apiSlice";
+
+const InitializationExceptions = () => {
+  const { appId } = useAppParams();
+  const { data, isLoading, isError } = useGetInitializationExceptionsQuery(
+    appId ? { appId } : skipToken,
+  );
+
+  console.log("Initialization exceptions:", data?.Exceptions);
+
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  if (isLoading) return <div className="p-3">Loading…</div>;
+  if (isError)
+    return (
+      <div className="p-3 text-danger">
+        Failed to load initialization exceptions.
+      </div>
+    );
+
+  if (!data || data.Exceptions.length === 0) {
+    return (
+      <div className="p-3 text-success">
+        No initialization exceptions reported.
+      </div>
+    );
+  }
+
+  return (
+    <div className="d-flex flex-column overflow-hidden h-100">
+      <h2 className="mb-2">Initialization Exceptions</h2>
+      <div className="overflow-auto flex-grow-1">
+        <table className="table table-striped table-hover align-middle mb-0">
+          <thead className="table-light sticky-top">
+            <tr>
+              <th style={{ width: "2rem" }}>#</th>
+              <th>Message</th>
+              <th style={{ width: "8rem" }}>Stack trace</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.Exceptions.map((ex: EssentialsException, idx: number) => {
+              const isExpanded = expandedIndex === idx;
+              return (
+                <>
+                  <tr key={`ex-${idx}`}>
+                    <td className="text-muted">{idx + 1}</td>
+                    <td>
+                      <span className="text-danger fw-semibold">
+                        {ex.Message}
+                      </span>
+                    </td>
+                    <td>
+                      {ex.StackTrace && (
+                        <button
+                          className="btn btn-sm btn-outline-secondary"
+                          onClick={() =>
+                            setExpandedIndex(isExpanded ? null : idx)
+                          }
+                        >
+                          {isExpanded ? "Hide" : "Show"}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                  {isExpanded && ex.StackTrace && (
+                    <tr key={`ex-${idx}-trace`}>
+                      <td colSpan={3} className="p-0">
+                        <pre
+                          className="m-0 p-3 bg-light text-muted"
+                          style={{ fontSize: "0.75rem", whiteSpace: "pre-wrap" }}
+                        >
+                          {ex.StackTrace}
+                        </pre>
+                      </td>
+                    </tr>
+                  )}
+                </>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default InitializationExceptions;