The bug reporting widget for Next.js sites
App Router or Pages Router: one script in your root layout and every page can file Jira-ready bug reports with screenshot, console, and network context. Works with server components, preview deployments, and NEXT_PUBLIC env keys.
Why Next.js teams use it
Hydration and RSC make "just add a script" ambiguous
Where does a browser-only widget go in a server-component world? In the root layout as a plain module script — the widget runs entirely client-side and never touches the server render.
Bugs on preview deployments die unreported
Stakeholders review Vercel previews and report bugs in Slack screenshots. A widget on the preview turns that into a Jira issue with the branch URL and console attached.
App Router navigation is client-side
Route changes don’t reload the page, so page-load-only tools miss context. The widget persists across App Router navigation and captures the URL at report time.
Install on Next.js in minutes
No SDK, no backend changes — the widget is a single ES module.
- 1
Add the script to your root layout
One module script tag in app/layout.tsx (or _document for Pages Router).
- 2
Key via NEXT_PUBLIC_ env
NEXT_PUBLIC_ variables are inlined at build time — set per environment so previews and production can use different widgets.
- 3
Connect Jira once
OAuth to your Jira; reports arrive as ready-to-work issues, team-managed projects included.
// app/layout.tsx
<script type="module" dangerouslySetInnerHTML={{ __html: `
import IssueCapture from 'https://issuecapture.com/widget.js';
IssueCapture.init({ apiKey: '${process.env.NEXT_PUBLIC_ISSUECAPTURE_API_KEY}' });
` }} />Root-layout pattern — full App/Pages Router guide in the docs. Read the full Next.js 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).
Next.js bug reporting: FAQ
Does it work with the App Router and server components?›
Yes. The widget is browser-only; the script tag in your root layout is rendered by the server but executes on the client. No client component wrapper is required for the basic setup.
Can I run it on Vercel preview deployments?›
Yes — and it’s one of the best uses: reviewers report bugs on the preview itself, with the preview URL, console errors, and network failures attached. Scope keys per environment with NEXT_PUBLIC_ variables.
Will it slow down my Core Web Vitals?›
The widget loads as a deferred ES module (~40KB gzipped core) and never blocks render. Heavier features like the screenshot annotator lazy-load only when a user actually reaches for them.
Does it capture failed API-route calls?›
Failed fetch/XHR requests (4xx/5xx) from the browser are recorded and attached to reports — including calls to your Next.js API routes and server actions invoked from the client.
Ship the widget on your Next.js app today
Free plan with 10 issues/month, no credit card. Jira connection takes one OAuth click.
- Works with Jira Cloud + JSM
- Team-managed projects supported
- ~40KB core, lazy-loaded extras