Real-time Operations Monitoring Dashboard
A real-time React monitoring application demonstrating advanced server-state management, WebSocket synchronization, virtualization, optimistic updates and browser-level testing.
PulseOps explores how a React application can process a continuous stream of operational data while keeping the UI responsive and the data model predictable. The main challenge is combining an initial REST snapshot with high-frequency WebSocket events without creating two competing sources of frontend state.
Loads the initial monitoring snapshot.
Incoming realtime events update the existing snapshot with queryClient.setQueryData().
Components subscribe only to the data slices they need.
KPIs, charts, services and request streams render from the same server-state source.
REST and WebSocket data are deliberately unified inside the TanStack Query cache. WebSocket events do not create a second client-side state store. Instead, each validated event immutably updates the existing monitoring snapshot, keeping the React UI synchronized around one source of server state.
The initial snapshot arrives through REST, while WebSocket messages call queryClient.setQueryData() against the same query key. This avoids maintaining parallel realtime state and reduces synchronization problems.
Overview components subscribe to focused slices such as KPIs, services or requests. A new request event therefore does not need to re-render every dashboard panel.
The realtime reducer keeps request history bounded to 5,000 events and chart history bounded separately. This prevents an endlessly growing in-memory stream.
Dashboard environment, time range and request explorer filters are synchronized with URL search parameters. Views can be refreshed, shared and navigated with normal browser history.
Incident updates optimistically modify only the selected incident. If the request fails, only that incident is restored instead of replacing the entire monitoring snapshot and potentially discarding newer WebSocket events.
TanStack Virtual renders only the visible portion of the request explorer while the application can retain up to 5,000 request events.
Stable selectors and focused query subscriptions prevent unrelated realtime events from propagating through the whole overview component tree.
Realtime arrays have explicit maximum sizes so a long-running dashboard does not continuously accumulate request or chart data.
Unit coverage for realtime reducer behavior, query updates, filters and optimistic rollback logic.
Component-level tests for monitoring behavior and render isolation.
Browser-level coverage for navigation, URL filters, virtualization, mobile behavior and optimistic incident updates.
CI runs linting, TypeScript checks, unit tests, production builds and Playwright E2E validation.
