`@idebug/react`

Browser-only SDK. No dependency on @idebug/core, @idebug/ui, or Node APIs.

Install

pnpm add @idebug/react
pnpm --filter @idebug/react build   # monorepo

Imperative start

// main.tsx
import { start } from '@idebug/react';
 
start({
  enabled: import.meta.env.DEV,
  overlay: true,
  maxEvents: 1000,
  captureFetch: true,
  captureXhr: true,
  captureErrors: true,
  captureNavigation: true,
});

React provider

import { IDebugProvider, useIDebug, trackEffect, log } from '@idebug/react';
 
createRoot(document.getElementById('root')!).render(
  <IDebugProvider config={{ enabled: true, overlay: true }}>
    <App />
  </IDebugProvider>,
);
 
function Panel() {
  const { events, clear, sessionId } = useIDebug();
  useEffect(() => trackEffect('Panel.mount'), []);
  return (
    <button onClick={() => log('hello', { token: 'secret' })}>
      {events.length} events · {sessionId}
    </button>
  );
}

What is captured

Type	Source
`fetch` / `xhr`	Patched `window.fetch` and `XMLHttpRequest`
`navigation`	`pushState` / `replaceState` / `popstate` / load
`error`	`error` + `unhandledrejection`
`render` / `effect`	Optional React helpers
`log`	`log()` API

Bodies/headers are redacted with the same key list philosophy as the server SDK.

Overlay

When overlay: true and started, a floating ID control opens an in-page panel (filter, detail, clear). This is not the server @idebug/ui SPA.

Lifecycle

import { start, stop, isStarted, getEvents, clearEvents } from '@idebug/react';
 
start({ enabled: true });
// …
stop(); // restores fetch/XHR/history, removes overlay

@idebug/ui Debug UI