shadcn.io is not affiliated with official shadcn/ui
WebSocket Connection Close Codes Block for React Aria
Why realtime connections end: five close codes ranked with plain-language meanings, counts, shares and sparklines, and a 60-minute reconnect strip with a bracket over the post-deploy surge and a cursor.
Installation
Overview
Find out why realtime connections close with this panel for React with React Aria. It is Tetherline, a realtime-socket monitor, and its header is worked out from the counts: the share that ended normally and how much faster 1006 closes are coming since the deploy. Two Tabs share one hairline frame. Close codes ranks 1000, 1001, 1006, 1011 and an app-defined 4001 with what each means, a count, a share bar and a small sparkline. Reconnects draws reconnects per minute for the last hour as bars, with a bracket over the minutes above three times the usual rate and a hidden range as a cursor that reads one minute. Guides draw the frame and its bands; the entrance is CSS only. For chat, live dashboards and any app that depends on long-lived sockets.
FAQ
How do I use my own codes?
Edit CODES (code, count, meaning and a 12-sample trend) and RECONNECTS (60 per-minute counts), with USUAL as the normal rate. The normal share, the growth of 1006 and the bracket are derived.
How is the bracket decided?
It spans from the first to the last minute with more than FACTOR (3) times the usual reconnects. Change FACTOR or USUAL and it moves.
How does the cursor work?
A native range over the strip named Minute; arrow keys move one minute and a polite status line speaks the reading after you stop.