Realtime Connection Resilience

Prevents silent WebSocket disconnections via Web Worker heartbeats and reconnection strategies.

Overview

Browser tabs that go into the background throttle JavaScript timers, causing the Supabase Realtime WebSocket to miss heartbeats and silently disconnect. The application continues rendering stale data with no error indication. This tile enforces three defenses: Web Worker-based connections that bypass timer throttling, active heartbeat monitoring with automatic reconnection, and channel count limits to prevent proliferation.

Reference

Worker Mode Configuration

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  realtime: { worker: true },
});

The worker: true flag moves the WebSocket connection into a Web Worker, bypassing the browser's background tab timer throttling.

Heartbeat Monitor Pattern

let lastHeartbeat = Date.now();
const HEARTBEAT_INTERVAL = 30_000;

setInterval(() => {
  if (Date.now() - lastHeartbeat > HEARTBEAT_INTERVAL * 2) {
    supabase.realtime.disconnect();
    supabase.realtime.connect();
  }
}, HEARTBEAT_INTERVAL);

Exponential Backoff Sequence

1s -> 2s -> 4s -> 8s -> 16s -> 30s (cap)

Channel Count Limits

• Warning threshold: 10 active channels.
• Hard limit: 100 active channels (HALT new subscriptions).

Dependencies

• supabase-mcp-verification — validates project configuration.
• realtime-channel-authorization — provides the secured channels that this tile makes resilient.

Composition Position

Runs after realtime-channel-authorization secures the channels. This is the final tile in the Realtime stack — it adds client-side stability to already-secured channels. No downstream tiles depend on this tile.