Bug Reporting for React

The bug reporting widget for React apps

A bug-report widget for React. Users and testers report bugs with an annotated screenshot, console errors, and network failures — created directly in Jira, AI-triaged. Works with React 18+, strict mode, and client-side routing.

Start FreeSee the install

Why React teams use it

"It broke" — but the console error is gone

React error boundaries swallow render crashes and users close the tab. The widget monitors console and network from page load, so the report carries the TypeError your reporter never saw.

Re-renders and routing break naive widgets

Scripts that assume a static page fall apart under client-side routing. IssueCapture has an explicit init/destroy lifecycle designed for component unmount/remount and per-route config.

CSS collisions with your design system

The widget renders inside Shadow DOM — your Tailwind/CSS-in-JS styles cannot touch it, and its styles cannot leak into your components.

Install on React in minutes

No SDK, no backend changes — the widget is a single ES module.

  1. 1

    Get an API key

    Sign up free and grab the widget key for your project.

  2. 2

    Load once, init in an effect

    Add the module script in index.html, or init inside a useEffect with a destroy() cleanup so strict-mode double-mounting stays clean.

  3. 3

    Reports land in Jira

    Connect Jira via OAuth once; every report arrives as a ready-to-work issue.

useEffect(() => {
  IssueCapture.init({ apiKey: process.env.REACT_APP_ISSUECAPTURE_KEY });
  return () => IssueCapture.destroy(); // strict-mode safe
}, []);

React lifecycle pattern — full guide in the docs. Read the full React guide →

Reports can include

Annotated screenshot

Reporters circle the problem instead of describing it

Console errors

JavaScript errors and warnings from page load onward

Failed requests

4xx/5xx network calls, with privacy filters

Browser context

URL, browser, OS, viewport — automatically

Your widget settings control which details are included. On Team and Business, enabled AI features add priority, category and duplicate suggestions after the Jira issue is created. Team-managed projects and JSM are supported.

React bug reporting: FAQ

Does the widget work with React strict mode?›

Yes. init() is idempotent and destroy() fully cleans up (button, listeners, state), so the double-mount behavior of React 18 strict mode in development is handled by the init/destroy effect pattern shown above.

Does it capture errors from inside React error boundaries?›

The widget records console output and failed network requests from page load. Errors your boundaries log to the console are captured; the report includes them alongside the screenshot and browser context.

Will it clash with Tailwind, styled-components, or my design system?›

No — the widget UI renders inside Shadow DOM, which isolates styles in both directions. Your CSS cannot restyle the widget and the widget cannot leak styles into your app.

Can different routes use different widget configs?›

Yes. Re-init with a different API key (auto-detected), call updateConfig(), or use the destroy/init cycle in route-level effects — the SPA lifecycle is a documented, supported path.

Add the widget to your React app

Free plan with 10 issues/month, no credit card. Jira connection takes one OAuth click.

Start FreeRead the Docs
  • Works with Jira Cloud + JSM
  • Team-managed projects supported
  • ~31KB core, lazy-loaded extras