Fix jwt-token

client/src/App.jsx

@@ -15,6 +15,7 @@ import Settings from './pages/Settings';
 import Login from './pages/Login';
 import Register from './pages/Register';
 import ProtectedRoute from './components/ProtectedRoute';
+import ErrorBoundary from './components/ErrorBoundary';
 
 function App() {
   return (
@@ -72,7 +73,11 @@ function App() {
                 <Route path="map" element={<MapView />} />
                 <Route path="devices" element={<Devices />} />
                 <Route path="detections" element={<Detections />} />
-                <Route path="alerts" element={<Alerts />} />
+                <Route path="alerts" element={
+                  <ErrorBoundary>
+                    <Alerts />
+                  </ErrorBoundary>
+                } />
                 <Route path="settings" element={<Settings />} />
                 <Route path="debug" element={<Debug />} />
               </Route>

client/src/pages/Alerts.jsx

@@ -63,6 +63,16 @@ const Alerts = () => {
   // Show loading if either alerts or drone types are loading
   const isLoading = loading || droneTypesLoading;
 
+  // DEBUG: Validate state integrity
+  useEffect(() => {
+    console.log('DEBUG: Alerts state check', {
+      alertRules: alertRules?.length,
+      alertLogs: alertLogs?.length, 
+      alertStats: alertStats ? 'present' : 'null',
+      invalidRules: alertRules?.filter(rule => typeof rule.alert_channels === 'object' && !Array.isArray(rule.alert_channels))
+    });
+  }, [alertRules, alertLogs, alertStats]);
+
   // Group alerts by alert_event_id to show related alerts together
   const groupAlertsByEvent = (logs) => {
     const grouped = {};