reconnect

Pexip reconnect coordination

When a Pexip call's signaling (event source) or media (peer connection) hiccups, you get a flood of events. Without coordination, the user sees:

• A "Failed to send" toast for every queued operation that bounced
• A "Failed to send" toast again, three more times, as the SDK retries
• A "Reconnecting…" banner appearing and disappearing
• Occasionally, a real "Disconnected" error buried under the noise

Webapp3 has a tight, three-piece coordination that makes this usable: a state hook that aggregates SDK reconnect events, a toast hook that suppresses spam while reconnecting, and a banner component that surfaces the state to the user. This skill captures the wiring.

The three pieces

1. useNetworkState — the state machine

From @pexip/media-components. Subscribes to callSignals.onReconnecting and callSignals.onReconnected and produces a NetworkState value.

import {useNetworkState} from '@pexip/media-components';
import {callSignals} from '../signals/Call.signals';

const networkState = useNetworkState(
    callSignals.onReconnecting,
    callSignals.onReconnected,
);

NetworkState is an enum with at minimum:

• Connected — happy path
• Reconnecting — peer connection / event stream is recovering
• (other states the SDK may add — treat unknown values as "connected" with logging)

This hook is the source of truth. Every reconnect-related UI element should derive from it.

2. useOnFailedInfinityRequest — the toast suppressor

A 20-line hook that only subscribes to onFailedRequest when not reconnecting. The full implementation (worth reading in full):

import {useEffect} from 'react';
import {notificationToastSignal} from '@pexip/components';
import {NetworkState} from '@pexip/media-components';
import {infinityClientSignals} from '../signals/InfinityClient.signals';

export const useOnFailedInfinityRequest = (networkState: NetworkState) => {
    useEffect(() => {
        if (networkState !== NetworkState.Reconnecting) {
            return infinityClientSignals.onFailedRequest.add(request => {
                notificationToastSignal.emit([
                    {
                        message: `Failed to send '${request}'. Please check your network.`,
                        timeout: 5000,
                        isDanger: true,
                        isInterrupt: true,
                    },
                ]);
            });
        }
    }, [networkState]);
};