| # Frontend Architecture Audit |
|
|
| ## Issues Identified |
|
|
| ### 1. Excessive Polling & "Thundering Herd" Problems |
| The frontend makes aggressive use of `setInterval` across multiple components to fetch data (e.g., `EmergencyPage`, `GossipGraph`). In some areas, these intervals interact poorly with retry logic. |
| - **`useCommandApiStatus.js`**: Contained a critical bug where `setInterval` continued running even after the backend was marked offline, while `setTimeout` retry logic concurrently fired. This created exponential background polling, degrading browser performance and network availability. |
|
|
| ### 2. State Leaks on Unmounted Components |
| - **`AlertFeed.jsx`**: Inside a `setInterval` loop, a `setTimeout` was used to delay a state update. The interval was cleared on unmount, but the timeout was not, leading to React state updates on an unmounted component. |
|
|
| ### 3. Missing Event Listener Cleanup |
| - **`continuousPlatformService.js`**: Functions like `bindWsPollListeners` attach global `window` and `document` event listeners (e.g., `visibilitychange`, `cepheus:vision-ws-open`). Although structured as singletons, lack of explicit `removeEventListener` can cause issues during HMR or if the app's initialization cycle runs multiple times. |
|
|
| ### 4. Direct Mutation of Global State |
| - **`GossipGraph.jsx`**: Manual mutations of the `zustand` store variables (e.g., `faceRes[camId] = ...`) were spotted instead of using immutable updates. This can cause components relying on those specific slices of state to bypass re-renders or suffer from tearing. |
|
|
| ## Recommendations |
| - Consolidate polling loops into the central WebSocket (`wsVisionSingleton.js`). |
| - Always return a cleanup function in `useEffect` that clears *all* asynchronous boundaries (`setTimeout` and `setInterval`). |
| - Switch to structured state updaters via `zustand` actions rather than shallow copying and mutating nested store objects. |
