Fix jwt-token

client/src/components/AlertModals.jsx

@@ -43,6 +43,15 @@ export const EditAlertModal = ({ rule, onClose, onSuccess }) => {
     if (rule) {
       // Normalize alert_channels - ensure it's always an array
       let alertChannels = rule.alert_channels || ['sms'];
+      
+      // DEBUG: Check for problematic alert_channels objects
+      if (typeof alertChannels === 'object' && alertChannels !== null) {
+        const hasKeys = Object.keys(alertChannels).some(key => ['sms', 'webhook', 'email'].includes(key));
+        if (hasKeys) {
+          console.log('DEBUG AlertModals: Found problematic alert_channels object:', alertChannels, 'for rule:', rule.id);
+        }
+      }
+      
       if (typeof alertChannels === 'object' && !Array.isArray(alertChannels)) {
         // Convert object like {sms: true, webhook: false, email: true} to array
         alertChannels = Object.keys(alertChannels).filter(key => alertChannels[key]);

client/src/components/ErrorBoundary.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ERROR BOUNDARY CAUGHT:', error);
+    console.error('ERROR BOUNDARY STACK:', errorInfo);
+    
+    // Check if this is the specific object rendering error
+    if (error.message && error.message.includes('Objects are not valid as a React child')) {
+      console.error('🚨 FOUND THE OBJECT RENDERING ERROR!');
+      console.error('Error message:', error.message);
+      console.error('Stack trace:', error.stack);
+      console.error('Component stack:', errorInfo.componentStack);
+    }
+    
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '20px', border: '2px solid red', margin: '10px' }}>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;