Bug Reporting for React

The bug reporting widget for React apps

One component-friendly widget: your users and testers report bugs with an annotated screenshot, console errors, and failed network requests attached — created directly in Jira, AI-triaged. Plays nicely 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 →

Every report arrives in Jira with

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

Then AI triage sets priority and category and links duplicates — before the issue lands in your project (team-managed and JSM included).

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.

Ship the widget on your React app today

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
  • ~40KB core, lazy-loaded extras