Inspector

react-socket ships with a built-in inspector panel you can drop into any page during development. It captures every event the manager emits (connects, disconnects, sends, receives, subscriptions, reconnect attempts) and lets you step through state snapshots and diffs.

The inspector renders as a draggable bubble in the corner of the screen. Click it to expand the full panel with an event timeline, a JSON state viewer, and a diff view that highlights what changed between any two snapshots.

Live Demo

Send a few messages below, then click the WS bubble in the bottom-right corner to open the inspector. You'll see every event in the sidebar, the current manager state in the State tab, and the delta between snapshots in the Diff tab.

Usage

Import InspectorPanel from the separate @luciodale/react-socket/inspector entry point and pass it your manager instance. That's all it takes:

import { WebSocketManager, useSocketEvent } from "@luciodale/react-socket";
import { InspectorPanel } from "@luciodale/react-socket/inspector";

const manager = new WebSocketManager<TClientMsg, TServerMsg>({
  url: "ws://localhost:3001/ws",
  serialize: (msg) => JSON.stringify(msg),
  deserialize: (raw) => JSON.parse(raw),
});

function App() {
  useSocketEvent(manager, "echo", (msg) => {
    // handle incoming messages
  });

  return (
    <div>
      {/* your app */}
      <InspectorPanel manager={manager} />
    </div>
  );
}

Options

InspectorPanel accepts two optional props:

<InspectorPanel
  manager={manager}
  maxSnapshots={500}                // event history limit (default: 500)
  defaultPosition="bottom-right"   // "top-left" | "top-right" | "bottom-left" | "bottom-right"
/>

The panel renders via a React portal into its own DOM node with scoped CSS, so it won't interfere with your app's styles. Strip it from production builds with a simple conditional or your bundler's dead-code elimination.