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:

  1. miz-oki-command-center-ui/components/modern/HeroMetrics.tsx

    • Updated Sparkline component to check !Array.isArray(data).
    • Updated HeroMetrics component to check !Array.isArray(metrics).
  2. miz-oki-command-center-ui/components/modern/SRPVDALStatusBar.tsx

    • Updated SRPVDALStatusBar component to check !Array.isArray(stages).
    • Updated StageCard component to check !Array.isArray(stage.cells).
  3. miz-oki-command-center-ui/components/modern/NotificationFeed.tsx

    • Updated NotificationFeed component to check !Array.isArray(notifications).

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).

← All docsView source on GitHub →