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:
@@ -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
2
frontend/dist/index.html
vendored
2
frontend/dist/index.html
vendored
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user