Fix frontend console errors: disable WebSocket and add defensive array checks

- Disable Socket.IO connections in production to prevent connection errors
- Add Array.isArray() checks before calling filter() methods
- Fix TypeError: r.filter is not a function errors in Dashboard, Analytics, and Agents pages
- Ensure API responses are treated as arrays with fallback to empty arrays

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-07-14 22:21:26 +10:00
parent 3f3eec7f5d
commit 8a2e6b42dc
6 changed files with 86 additions and 80 deletions

View File

@@ -1,7 +1,7 @@
# Production Environment Configuration
VITE_API_BASE_URL=https://hive.home.deepblack.cloud
VITE_WS_BASE_URL=https://hive.home.deepblack.cloud
VITE_DISABLE_SOCKETIO=false
VITE_DISABLE_SOCKETIO=true
VITE_ENABLE_DEBUG_MODE=false
VITE_LOG_LEVEL=warn
VITE_ENABLE_ANALYTICS=true

File diff suppressed because one or more lines are too long

View File

@@ -61,7 +61,7 @@
}
}
</style>
<script type="module" crossorigin src="/assets/index-BlnS7Et-.js"></script>
<script type="module" crossorigin src="/assets/index-S7T45P97.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CYSOVan7.css">
</head>
<body>

View File

@@ -301,11 +301,13 @@ export default function Agents() {
);
}
const onlineAgents = agents.filter((agent: Agent) => agent.status === 'online' || agent.status === 'available').length;
const busyAgents = agents.filter((agent: Agent) => agent.status === 'busy').length;
const ollamaAgents = agents.filter((agent: Agent) => !agent.agent_type || agent.agent_type === 'ollama').length;
const cliAgents = agents.filter((agent: Agent) => agent.agent_type === 'cli').length;
const totalTasks = agents.reduce((sum: number, agent: Agent) => sum + (agent.metrics?.tasks_completed || 0), 0);
// Ensure agents is an array before using filter/reduce
const agentsArray = Array.isArray(agents) ? agents : [];
const onlineAgents = agentsArray.filter((agent: Agent) => agent.status === 'online' || agent.status === 'available').length;
const busyAgents = agentsArray.filter((agent: Agent) => agent.status === 'busy').length;
const ollamaAgents = agentsArray.filter((agent: Agent) => !agent.agent_type || agent.agent_type === 'ollama').length;
const cliAgents = agentsArray.filter((agent: Agent) => agent.agent_type === 'cli').length;
const totalTasks = agentsArray.reduce((sum: number, agent: Agent) => sum + (agent.metrics?.tasks_completed || 0), 0);
return (
<div className="p-6">

View File

@@ -94,14 +94,15 @@ export default function Analytics() {
const [timeSeriesData] = useState(() => generateTimeSeriesData());
// Calculate execution analytics
// Calculate execution analytics - ensure executions is an array
const executionsArray = Array.isArray(executions) ? executions : [];
const executionStats = {
total: executions.length,
completed: executions.filter(e => e.status === 'completed').length,
failed: executions.filter(e => e.status === 'failed').length,
running: executions.filter(e => e.status === 'running').length,
success_rate: executions.length > 0 ?
Math.round((executions.filter(e => e.status === 'completed').length / executions.length) * 100) : 0
total: executionsArray.length,
completed: executionsArray.filter(e => e.status === 'completed').length,
failed: executionsArray.filter(e => e.status === 'failed').length,
running: executionsArray.filter(e => e.status === 'running').length,
success_rate: executionsArray.length > 0 ?
Math.round((executionsArray.filter(e => e.status === 'completed').length / executionsArray.length) * 100) : 0
};
// Execution status distribution for pie chart
@@ -109,7 +110,7 @@ export default function Analytics() {
{ name: 'Completed', value: executionStats.completed, color: '#10B981' },
{ name: 'Failed', value: executionStats.failed, color: '#EF4444' },
{ name: 'Running', value: executionStats.running, color: '#3B82F6' },
{ name: 'Pending', value: executions.filter(e => e.status === 'pending').length, color: '#F59E0B' }
{ name: 'Pending', value: executionsArray.filter(e => e.status === 'pending').length, color: '#F59E0B' }
].filter(item => item.value > 0);
// Performance trends data

View File

@@ -45,15 +45,18 @@ export default function Dashboard() {
queryFn: () => clusterApi.getWorkflows()
});
// Calculate stats from real data
// Calculate stats from real data - ensure arrays exist
const projectsArray = Array.isArray(projects) ? projects : [];
const workflowsArray = Array.isArray(workflows) ? workflows : [];
const stats = {
projects: {
total: projects.length,
active: projects.filter(p => p.status === 'active').length
total: projectsArray.length,
active: projectsArray.filter(p => p.status === 'active').length
},
workflows: {
total: workflows.length,
active: workflows.filter((w: any) => w.active).length
total: workflowsArray.length,
active: workflowsArray.filter((w: any) => w.active).length
},
cluster: {
total_nodes: clusterOverview?.total_nodes || 0,