debugsy — real-time React debugging panel with dependency tracking and circuit breakers

debugsy v2 — in-process React inspector

what
React component, mounted inside your tree — not a browser extension, not a separate app.
traces
re-render cause — identity churn, dep mutation, prop churn, context cascade — down to the offending key.
reads as
one ordered log: renders, effects, state, fetch. No DevTools / Profiler / Console juggling.
cost
~12 kB gzip · 0 runtime deps · sub-ms init.
in prod
safe to keep mounted — no telemetry, no network, no global hooks. Tree-shake with NODE_ENV=production for zero cost.

  1. Install + mount

    // shell
$ pnpm add @workspace/debugsy
// app root — ↓ panel below = this same component
import { DebugsyLook } from "@workspace/debugsy"
<DebugsyLook />

  2. Logs config

    registerModule("auth", {
  label:       "Auth",
  emoji:       "🔐",
  description: "session · login · refresh",
  // each key → debug point: auth.<key>
  points: {
    session: { emoji: "🔑", label: "Session" },
    login:   { emoji: "→",  label: "Login"   },
    refresh: { emoji: "↻",  label: "Refresh" },
  },
})

  3. Logging

    // (point, message, data?, tags?) · .log .warn .error .critical · .time / .timeEnd
// hook · stable, in components
const debug = useDebugsy()
debug.log("rt.conn", "synced", { roomId })
// const · eager, anywhere
dsy.warn("auth.session", "expired", { ttl })
// fn · lazy, anywhere
getDebugsy().error("api.fetch", "5xx", err)
// global · browser console
window.debugsy.critical("render.loop", "runaway")

  4. Re-render cause tracing

    // shallow-equality diff over the watched bag,
// emitted as a debug log entry on every commit.
useWhyDidYouUpdate("Form", { values, errors, onSubmit })

  5. Reference instability detection

    // counts renders, tracks identity-stability of deps,
// alerts when renderThreshold or mountThreshold is hit.
useRenderTracker("Modal", [open, items, onClose], {
  renderThreshold: 10,   // default
  mountThreshold:  3,    // default
  onExcessiveRenders: (info) => debug.warn("render.rate", "hot", info),
})

  6. Zero production cost

    // tree-shaken when NODE_ENV=production. no runtime,
// no global hooks, no telemetry, no network.
if (process.env.NODE_ENV !== "production") {
  await import("@workspace/debugsy/dev")
}