WebSocket Frames
A frame log with the delta between frames. Protocol bugs are about the gap — a heartbeat that stopped arriving is obvious as a 30-second delta and invisible as a list of clock times.
src/components/ui/websocket-frames.tsxAbout
From the component's own source, where it was written.
A WebSocket frame log, by direction.
Direction is carried by an arrow, not by colour alone. A frame log is scanned for "what did we send just before it broke", and that scan fails the moment someone screenshots it into a monochrome ticket. Rows stay flush: indenting one direction ragged the left edge of the payload column, which is the column being read.
Timestamps show the delta from the previous frame as well as the absolute time. Protocol bugs are about the gap between frames — a heartbeat that stopped arriving is visible as a 30-second delta and invisible as a list of clock times.
Control frames (ping, pong, close) are filterable and off by default in the data view. A ping every 15 seconds buries the four frames that matter.
Install
npx astralyx-ui add websocket-frames
Usage
import { WebSocketFrames } from '@/components/ui/websocket-frames'
<WebSocketFrames frames={frames} />Composer
Change the props and the source below follows.
<WebSocketFrames frames={frames} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
WebSocketFrames
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| frames | WsFrame[] | required | { id, direction, opcode?, data, at, bytes? }. |
| showControl | boolean | false | Ping every 15 seconds buries the four frames that matter. Turn it on in the composer to see the difference. |
| locale | string | 'en-GB' | — |
| emptyLabel | ReactNode | 'No frames' | — |
| filterLabel | string | 'Frames shown' | Accessible name for the filter. |
| allLabel | string | 'All frames' | — |
| dataLabel | string | 'Data only' | — |
| sentLabel | string | 'sent' | — |
| receivedLabel | string | 'received' | — |
Types
WsFrame
A WebSocket frame log, by direction.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| direction | 'sent' | 'received' | Never colour alone — a frame log gets screenshotted into monochrome tickets, and "what did we send just before it broke" is the whole point. Rows stay flush so the payload column keeps a straight left edge. |
| opcode? | 'text' | 'binary' | 'ping' | 'pong' | 'close' | text and binary are data; the rest are control frames. |
| data | string | — |
| at | Date | — |
| bytes? | number | Payload size. Falls back to the data length. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| delta | computed | Gap from the previous visible frame; over 30s is tinted. |