react-websocket

WebSocketDevtools

A panel in a corner of the page that shows what each WebSocket client is doing: its status and reconnect attempts, what's queued and buffered, how many messages it received, and the round-trip time, topics, feeds, outbox, presence and runs of the helpers that use it.

function WebSocketDevtools(props: {
  sources?: readonly unknown[];
  open?: boolean;
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}): ReactElement | null;

Available only from react-websocket/devtools, about 1.8 kB min+gzip, separate from the main entry's size.

Usage

Render it in development only, so it stays out of your production bundle:

import { lazy, Suspense } from 'react';
import { live, topics, latency } from './live';

const WebSocketDevtools = lazy(() =>
  import('react-websocket/devtools').then(module => ({ default: module.WebSocketDevtools }))
);

export function App() {
  return (
    <>
      <Main />
      {import.meta.env.DEV && (
        <Suspense>
          <WebSocketDevtools sources={[live, topics, latency]} />
        </Suspense>
      )}
    </>
  );
}

A button in the corner shows how many clients there are, with a dot for the worst status among them. Click it to see each client:

Row
statusidle, connecting, open, reconnecting (attempt n) or closed
queuedMessages waiting in the send queue for the socket to open
bufferedBytes waiting in the browser's send buffer (bufferedAmount)
receivedMessages received since the panel mounted
rttFrom a latency tracker in sources
topics, feedsThe topics held by topics and feeds in sources, with each feed's last number
outbox, presence, runsWaiting messages, peers, and streaming runs from those helpers in sources

Props

PropType
sourcesunknown[]Clients from createWebSocket, and topics, feeds, latency trackers, outboxes, presence and runs created on them, which are shown with their client. Optional: the clients that useWebSocket(url) shares are listed by themselves, in development
openbooleanStart with the panel open. Default false
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'Which corner. Default 'bottom-right'

Behavior

  • Refresh. It re-renders twice a second, and counts messages from the moment it mounts.
  • Server rendering. It renders nothing on the server and during hydration.
  • In production builds, the clients useWebSocket(url) shares aren't listed by themselves; pass their client in sources.