@outcode/bug-reporter-web

In-app bug reporter for React (web). Drop in a floating button — your users capture the current screen, annotate it (draw, arrow, box, blur, text), set a severity and type, and file a report to ClickUp or any custom backend. No backend code required to get started.

Part of the OutCode Bug Reporter monorepo. For React Native, see @outcode/bug-reporter-native.

Features

• 🎯 One component — <BugReporterButton /> runs the whole capture → annotate → form → done flow
• ✏️ Annotate — pen, arrow, box, blur/redact, and text, flattened onto the screenshot
• 🧭 Auto-captured context — route, browser, viewport, language, connection type, console errors… all consent-free
• 🎨 Themeable — Indigo / Noir / Mint presets or your own tokens
• 📡 Offline retry queue, log/breadcrumb capture, screenshot size guard
• 🧩 Pluggable backends — ClickUp out of the box, or any repository / HTTP endpoint
• 📦 Tree-shakeable ESM + CJS, fully typed

Install

npm install @outcode/bug-reporter-web @outcode/bug-reporter-core
# peers:
npm install react react-dom

html2canvas is bundled — no extra install needed.

Quick start

import { BugReporterButton } from '@outcode/bug-reporter-web';
import { ClickUpBugReporterRepository } from '@outcode/bug-reporter-core';

export function App() {
  return (
    <>
      {/* …your app… */}
      <BugReporterButton
        config={{
          appName: 'My Web App',
          appVersion: '1.0.0',
          theme: 'indigo',
          repository: new ClickUpBugReporterRepository({
            apiKey: import.meta.env.VITE_CLICKUP_API_KEY,
            problemListId: import.meta.env.VITE_CLICKUP_PROBLEM_LIST_ID,
            suggestionListId: import.meta.env.VITE_CLICKUP_SUGGESTION_LIST_ID,
          }),
        }}
      />
    </>
  );
}

No ClickUp? Use the default HTTP backend instead: config={{ appName, apiUrl: 'https://your-api/bug-report' }}.

⚠️ Don't ship a ClickUp API key in a public web bundle. Prefer the apiUrl path behind a server proxy that holds the key; reserve direct-to-ClickUp for internal/trusted builds.

Configuration

Full BugReporterConfig reference (theme, screenshot size guard, offline storage, collectContext, collectDiagnostics, backendName, …) lives in the root README.

License

MIT © OutCode Software