@socketscope/core

Headless engine for SocketScope — the Chrome DevTools for realtime systems.

This package contains everything that has no React dependency:

• window.WebSocket interceptor — drop-in monkey-patch, idempotent, SSR-safe.
• Zustand store with slices for connections, events, metrics, topology, replay, settings, UI.
• Ring buffer + frame classifier + secret redactor.
• Topology derivation — pure function deriveTopology(connections, events).
• Mock data + generator for design/demo modes.

Install

pnpm add @socketscope/core

Usage

import { initSocketScope } from '@socketscope/core';
initSocketScope();  // patches window.WebSocket — capture starts immediately

Every new WebSocket(...) your app opens after this call is observed: opens, closes, errors, sends, messages all flow into the Zustand store.

To render the UI, install @socketscope/ui and drop <SocketScopeDevtools /> into your tree.

Headless usage (no UI)

import {
  initSocketScope,
  useSocketScope,
  selectStats,
} from '@socketscope/core';

initSocketScope();

useSocketScope.subscribe((s) => s.events.length, (count) => {
  console.log('events captured:', count);
});

const stats = selectStats(useSocketScope.getState());

License

MIT