Browser Tab Leader Pattern: Stop Wasting API Calls Across Browser Tabs

// pollingLeaderManager.ts
type Listener = (isLeader: boolean, lastPollTime: number) => void;

const CHANNEL_NAME = 'polling-leader';
const LEADER_TTL = 5000;

let isLeader = false;
const tabId = `${Date.now()}-${Math.random()}`;
let channel: BroadcastChannel | null = null;
let pingInterval: NodeJS.Timeout | null = null;
let leaderTimeout: NodeJS.Timeout | null = null;
let listeners: Listener[] = [];
let initialized = false;

export let lastLeaderPollTime = 0;

function notifyListeners() {
  listeners.forEach(listener => listener(isLeader, lastLeaderPollTime));
}

export function subscribeToLeadership(listener: Listener) {
  listeners.push(listener);
  listener(isLeader, lastLeaderPollTime);

  return () => {
    listeners = listeners.filter(l => l !== listener);
  };
}

export function initPollingLeader() {
  if (initialized) return;
  initialized = true;

  channel = new BroadcastChannel(CHANNEL_NAME);

  const sendPing = () => {
    channel?.postMessage({ type: 'ping', tabId, timestamp: Date.now() });
  };

  const becomeLeader = () => {
    if (!isLeader) {
      isLeader = true;
      lastLeaderPollTime = Date.now();
      notifyListeners();
    }
    sendPing();
  };

  const loseLeadership = () => {
    if (isLeader) {
      isLeader = false;
      notifyListeners();
    }
  };

  const handleMessage = (event: MessageEvent) => {
    if (event.data?.type === 'ping' && event.data.tabId !== tabId) {
      loseLeadership();
      resetLeaderTimeout();
    }
  };

  const resetLeaderTimeout = () => {
    if (leaderTimeout) clearTimeout(leaderTimeout);
    leaderTimeout = setTimeout(() => {
      becomeLeader();
    }, LEADER_TTL + 500);
  };

  channel.addEventListener('message', handleMessage);
  resetLeaderTimeout();

  pingInterval = setInterval(() => {
    if (isLeader) sendPing();
  }, LEADER_TTL - 1000);

  window.addEventListener('beforeunload', () => {
    channel?.close();
    if (pingInterval) clearInterval(pingInterval);
    if (leaderTimeout) clearTimeout(leaderTimeout);
  });
}

// useLeaderPollingEffect.ts
import { useEffect, useRef } from 'react';

const POLLING_INTERVAL = 180000; // 3 minutes
const POLLING_DEBOUNCE = 5000;
const LAST_POLL_TIME_KEY = 'last_poll_time';

function getLastPollTimeFromStorage(): number {
  const stored = localStorage.getItem(LAST_POLL_TIME_KEY);
  return stored ? parseInt(stored, 10) : 0;
}

function setLastPollTimeInStorage(time: number): void {
  localStorage.setItem(LAST_POLL_TIME_KEY, time.toString());
}

export function useLeaderPollingEffect(
  isLeader: boolean, 
  lastLeaderPollTime: number, 
  pollingFns: (() => void)[] = []
) {
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (!isLeader) {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
      return;
    }

    const lastStoredPollTime = getLastPollTimeFromStorage();
    const currentTime = Date.now();
    const timeSinceLastPoll = currentTime - lastStoredPollTime;

    const delay = Math.max(0, POLLING_INTERVAL - timeSinceLastPoll);

    const runPolling = () => {
      pollingFns.forEach(fn => fn());
      setLastPollTimeInStorage(Date.now());
    };

    const timeout = setTimeout(
      () => {
        runPolling();
        intervalRef.current = setInterval(runPolling, POLLING_INTERVAL);
      },
      timeSinceLastPoll >= POLLING_INTERVAL ? POLLING_DEBOUNCE : delay
    );

    return () => {
      clearTimeout(timeout);
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isLeader, lastLeaderPollTime, pollingFns]);
}

// usePollingLeader.ts
import { useEffect, useState } from 'react';
import { initPollingLeader, subscribeToLeadership } from './pollingLeaderManager';

export function usePollingLeader() {
  const [isLeader, setIsLeader] = useState(false);
  const [lastPollTime, setLastPollTime] = useState(0);

  useEffect(() => {
    initPollingLeader();
    const unsubscribe = subscribeToLeadership((isLeader, lastPollTime) => {
      setIsLeader(isLeader);
      setLastPollTime(lastPollTime);
    });

    return unsubscribe;
  }, []);

  return { isLeader, lastPollTime };
}

// AuthorizedLayout.tsx
import { useMemo } from 'react';
import { usePollingLeader } from './usePollingLeader';
import { useLeaderPollingEffect } from './useLeaderPollingEffect';

export default function AuthorizedLayout({ children }) {
  const { isLeader, lastPollTime } = usePollingLeader();

  // Define your API calls
  const pollingFns = useMemo(() => [
    () => triggerGetAllAttributes(),
    () => triggerGetAllCustomEventsWithProperties(),
    () => triggerGetAllAttributesWithProperties(),
    () => triggerGetAllSegments(),
    () => triggerGetChannelConfig(),
  ], [/* your dependencies */]);

  // Only the leader tab will execute these
  useLeaderPollingEffect(isLeader, lastPollTime, pollingFns);

  return <div>{children}</div>;
}

const runPolling = async () => {
  try {
    await Promise.all(pollingFns.map(fn => fn()));
    setLastPollTimeInStorage(Date.now());
  } catch (error) {
    console.error('Polling failed:', error);
    // Implement exponential backoff
  }
};

// test-utils.ts
class MockBroadcastChannel {
  addEventListener = jest.fn();
  postMessage = jest.fn();
  close = jest.fn();
}

global.BroadcastChannel = MockBroadcastChannel;

const hasSupport = typeof BroadcastChannel !== 'undefined';
if (!hasSupport) {
  // Fallback to polling in each tab
  // Or use a different communication method
}