Install

npm i @traceitx/react

Wrap your app

import { TraceItXProvider } from '@traceitx/react';

export default function Root() {
  return (
    <TraceItXProvider config={{ apiKey: 'txx_live_…' }}>
      <App />
    </TraceItXProvider>
  );
}

That is the whole install. The provider starts capture, patches the console and network, and tracks route changes — see Screen tracking.

Open the reporter

Anywhere inside the provider:

import { useTraceItX } from '@traceitx/react';

function ReportBugButton() {
  const { open } = useTraceItX();
  return <button onClick={() => open()}>Report a bug</button>;
}

There is no floating widget to fight with — you wire it to your own button. A keyboard shortcut works out of the box too: ⌘/Ctrl + Shift + B. See Configuration to change or disable it.

open() resolves when the reporter closes, with a status of submitted, queued (offline, sent later) or cancelled. Outside a component — a global error handler, a router callback — import open from @traceitx/react directly; it rejects with TraceItXNotMountedError if no provider is mounted.

Verify it

Open the reporter, file a report, and check the delivery log in the dashboard. A report that reached ingest but not your receiver is a webhook problem, not an SDK one — the log tells you which.

If nothing arrives at all, wire onError — it reports failures in the SDK’s public client calls:

<TraceItXProvider config={{
  apiKey: 'txx_live_…',
  onError: (err) => console.warn('[traceitx]', err.name, err.message),
}}>

(debug: true installs the replay diagnostic seam rather than verbose logging — it will not print anything here.)

The three usual causes are a wrong key, a disabled: true left in a build, and a strict CSP with no cspNonce.

Requirements

Next

• Configuration — every option
• Screen tracking — what is automatic on the web
• Sensitive content — mask before anything leaves the browser