Frontend Fix Summary
Issue
The frontend was crashing with "Something went wrong: l.map is not a function".
This error typically occurs when .map() is called on a variable that is not an array (e.g., undefined, null, or an object).
Diagnosis
The error likely originated from one of the dashboard components receiving data that was expected to be an array but was not. Potential candidates were:
1. HeroMetrics -> Sparkline (processing sparklineData)
2. SRPVDALStatusBar -> StageCard (processing stage.cells)
3. NotificationFeed (processing notifications)
Fixes Applied
Added defensive checks (Array.isArray()) to the following components to ensure they handle non-array data gracefully:
-
miz-oki-command-center-ui/components/modern/HeroMetrics.tsx- Updated
Sparklinecomponent to check!Array.isArray(data). - Updated
HeroMetricscomponent to check!Array.isArray(metrics).
- Updated
-
miz-oki-command-center-ui/components/modern/SRPVDALStatusBar.tsx- Updated
SRPVDALStatusBarcomponent to check!Array.isArray(stages). - Updated
StageCardcomponent to check!Array.isArray(stage.cells).
- Updated
-
miz-oki-command-center-ui/components/modern/NotificationFeed.tsx- Updated
NotificationFeedcomponent to check!Array.isArray(notifications).
- Updated
Verification
These changes ensure that if the backend returns unexpected data structures (e.g., an error object instead of an array), the frontend will not crash but instead render a fallback state (empty list or default mock data).