A real-time dashboard updates for a while and then silently stops because the underlying WebSocket connection dropped without triggering an automatic reconnect handler, or because high-frequency telemetry flooded the client memory buffer. Implementing ping/pong heartbeats and debounced state batching keeps live streams stable indefinitely.
Network routers and load balancers drop idle TCP connections after 60 to 120 seconds. If neither server nor client sends regular ping frames, the socket closes without the browser firing an 'onclose' event immediately.
Appending every incoming telemetry data point to a React state array without a maximum window limit (e.g. keeping only the last 100 points) eventually exhausts browser memory and crashes the tab.
Receiving 50 WebSocket messages per second and triggering a React setState on every single packet blocks the JavaScript event loop, freezing all user interaction.
import { useEffect, useRef, useState, useCallback } from 'react';
export function useResilientWebSocket(url: string) {
const [data, setData] = useState<any[]>([]);
const wsRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const bufferRef = useRef<any[]>([]);
const connect = useCallback(() => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.onmessage = (event) => {
const point = JSON.parse(event.data);
bufferRef.current.push(point);
};
ws.onclose = () => {
// Reconnect with backoff
reconnectTimeoutRef.current = setTimeout(() => {
connect();
}, 3000);
};
ws.onerror = () => ws.close();
}, [url]);
useEffect(() => {
connect();
// Flush incoming buffer to React state only once every 250ms (batching)
const interval = setInterval(() => {
if (bufferRef.current.length > 0) {
setData((prev) => [...prev, ...bufferRef.current].slice(-100)); // Keep last 100 points
bufferRef.current = [];
}
}, 250);
return () => {
clearInterval(interval);
if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
if (wsRef.current) wsRef.current.close();
};
}, [connect]);
return data;
}| Observed Issue | Root Cause | Engineering Solution |
|---|---|---|
| Stream dies after 60s of inactivity | Proxy drops idle TCP connection | Implement 30s ping/pong heartbeat |
| Page freezes after high volume spikes | Too many setState renders per second | Batch incoming packets with a 250ms buffer |
| Browser tab runs out of memory | Array grows infinitely without bound | Window array to fixed length with .slice(-N) |
| Mobile drops connection in background | OS suspends background sockets | Detect visibilitychange and reconnect on app focus |
Implement auto-reconnection logic and batch incoming telemetry into 250ms ticks.
Configure Nginx or reverse proxy with 'proxy_read_timeout 3600s' and WebSocket upgrade headers.
Window live chart datasets to prevent memory saturation.
Production Verification
An operational dashboard managing high-frequency live status telemetry from thousands of hardware routers without socket dropouts.
Use Server-Sent Events (SSE) for one-way streams (server pushing to client, like notification feeds or live stock tickers) because SSE includes native automatic reconnection. Use WebSockets when bidirectional communication is required.
Listen to the NetInfo event listener. When network connectivity changes or the app state returns to 'active', close the stale socket and reinitialize the connection.
Cloudflare closes idle WebSocket connections after 100 seconds. Sending a tiny ping packet every 30 seconds keeps the channel alive indefinitely.
If this error is blocking your release build or production pipeline, Syed Alijah Muhammad can diagnose and deploy a clean fix. Send the repository access, error trace, and platform details.