@bugcatcher/react

React SDK for BugCatcher, intelligent bug capture with session replays and AI-powered triage.

Installation

npm install @bugcatcher/react
# or
yarn add @bugcatcher/react
# or
pnpm add @bugcatcher/react

Usage

Import the BugCatcherWidget and add it to your root component (e.g. App.tsx or layout.tsx).

import { BugCatcherWidget } from '@bugcatcher/react';

function App() {
  return (
    <>
      {/* Your app content */}
      <BugCatcherWidget apiKey="bc_your_project_api_key" />
    </>
  );
}

Configuration

| Prop | Type | Description | |------|------|-------------| | apiKey | string | Required. Your project API key from the BugCatcher dashboard (starts with bc_). |

How it works

The widget automatically:

• Captures console errors and logs
• Tracks network requests (Fetch and XHR)
• Records user sessions for visual replays (rrweb)
• Provides a simple UI for users to report bugs

Peer dependencies

• React ^18.0.0 or ^19.0.0
• React DOM ^18.0.0 or ^19.0.0

Links

• Dashboard: bugcatcher.app
• CLI (alternative): npx bugcatcher@latest init, auto-injects the widget
• MCP: bugcatcher-mcp for Cursor/Claude integration

License

MIT