Skip to content
TraceItX Docs
Documentation

Quickstart

From zero to your first delivered report in a few minutes.

1. Register an app and get an SDK key

Create a free account, register your app in the admin console, and copy the SDK key it generates. The key is a bearer token your SDK uses to authenticate — keep it out of public source where you can.

2. Add a webhook subscriber

In the console, add a subscriber — the URL that should receive reports — and copy its signing secret. Every delivery to that URL is signed with this secret so you can verify it’s genuinely from TraceItX. Don’t have an endpoint yet? Use a request inspector while you’re testing, then point it at your real service.

3. Install and initialise the SDK

Install the SDK for your platform (full per-platform details in installation). For React:

npm i @traceitx/react

Wrap your app and provide the SDK key:

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

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

4. Trigger a report

Wire any button (or the built-in hotkey) to open the reporter. The user adds a title and description, optionally annotates the screenshot, and submits.

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

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

open() resolves with the outcome — { status: 'submitted', reportId }, 'queued' (saved for retry), or 'cancelled' — so you can confirm to the user.

5. Receive the report

Within moments your subscriber URL receives a POST with the AI-ready envelope as the JSON body and a X-TraceItX-Signature header. Verify the signature, return 2xx, and you’re done — the full context of the bug is now in your tools. See webhooks for verification code.

That’s the whole loop: capture → envelope → signed delivery. Next, learn the envelope shape so your receiver can act on every field.