Exponential Backoff With Jitter Is Required for WebSocket Reconnection

After a server restart or network outage, all connected WebSocket clients attempt to reconnect simultaneously, creating a thundering herd that overloads the server before it can accept connections.

Implement exponential backoff with random jitter for reconnection attempts. Cap the maximum backoff to avoid clients giving up too soon but not hammering a still-recovering server.

function reconnectWithBackoff(url: string, onMessage: (data: unknown) => void) {
  let attempt = 0;
  const MAX_DELAY = 30_000;
  const BASE_DELAY = 500;

  function connect() {
    const ws = new WebSocket(url);

    ws.onopen = () => { attempt = 0; };
    ws.onmessage = (e) => onMessage(JSON.parse(e.data));
    ws.onclose = (event) => {
      if (event.code === 1000) return; // normal close
      const delay = Math.min(BASE_DELAY * 2 ** attempt, MAX_DELAY);
      const jitter = Math.random() * delay * 0.5;
      attempt++;
      setTimeout(connect, delay + jitter);
    };
  }

  connect();
}

Without jitter, all clients compute the same backoff delay and reconnect in synchronized waves. Random jitter spreads reconnection attempts over the delay window, reducing peak load by an order of magnitude.