DEV Community

Cover image for I replaced Atlassian's Issue Collector with a modern alternative — here's what I built
Benji Darby
Benji Darby

Posted on

I replaced Atlassian's Issue Collector with a modern alternative — here's what I built

Atlassian's Issue Collector hasn't been meaningfully updated since 2014. No screenshot tools, no AI, it doesn't work with team-managed projects, and the docs still reference Firefox 28. If you've ever tried to set it up on a modern stack, you know the pain.

I spent months building a replacement. IssueCapture is a drop-in JavaScript widget that lets website visitors report bugs directly into Jira — with screenshots, console errors, and network data included automatically.

The problem

Bug reports from end users are usually terrible. "It doesn't work" with no context, no steps to reproduce, no browser info. Developers waste hours going back and forth trying to understand what actually happened.

Atlassian's answer to this was the Issue Collector — a widget you embed on your site. But it's been abandoned. No screenshot annotation, no error capture, no AI, no modern framework support. And if your Jira project is team-managed? You can't use it at all.

What I built

One script tag, five minutes to set up:

<script type="module">
  import IssueCapture from 'https://issuecapture.com/widget.js';
  IssueCapture.init({ apiKey: 'your-api-key' });
</script>
Enter fullscreen mode Exit fullscreen mode

The widget gives users a floating button. They click it, describe the bug, and the ticket lands in Jira with full context:

  • Screenshot + annotation — capture, crop, draw, highlight. Lazy-loaded so it's only +13KB if they actually use it.
  • Console errors — captured automatically from page load, not just after the widget opens.
  • Network failures — 4xx/5xx responses caught automatically.
  • Browser info — URL, user agent, viewport size.

Technical decisions

Shadow DOM isolation. The widget runs inside a Shadow DOM so it can't conflict with the host page's CSS. All styles are plain CSS strings injected into the shadow root — no external stylesheets, no Tailwind, nothing that could leak.

Preact over React. The core widget is ~40KB gzipped. Screenshot capture adds 13KB, annotation adds 107KB — both lazy-loaded only when the user needs them. Keeping it small matters when you're injecting into someone else's site.

Console capture from page load. Most bug reporters only capture errors that happen after the widget opens. That misses the errors that actually caused the problem. IssueCapture hooks into console.error and monitors network requests from the moment the page loads, then includes relevant ones in the report if the dashboard admin has enabled it.

AI is optional. Triage, categorization, duplicate detection, and sentiment analysis run through a queue processor on Gemini 2.5 Flash with an OpenAI fallback. Duplicate matching uses text-embedding-004 + pgvector. But the widget works perfectly fine without any of it — AI features only kick in on paid tiers.

Stack

  • Widget: Preact + TypeScript + Vite
  • Dashboard: Next.js 16 (App Router) + Tailwind
  • Backend: Vercel Serverless Functions + Supabase (PostgreSQL + RLS)
  • AI: Google Gemini (primary) + OpenAI (fallback)
  • Jira integration: OAuth 2.0 (no API tokens or passwords)

Supabase handles multi-tenancy through Row Level Security — every query is scoped to the account. pgvector powers the duplicate detection embeddings. Edge Functions serve the widget config so it loads fast.

16 languages supported with lazy-loaded locale files so you only download the one you need.

What I learned

Bug report quality is the real product. The AI features are nice, but the biggest impact is just capturing console errors and network failures automatically. Developers told me that alone cut their "can you send me more details?" messages in half.

Widget size is a feature. Every KB matters when you're asking someone to add your script to their production site. Lazy-loading the heavy parts (screenshot, annotation) was the right call — most bug reports don't include screenshots.

Shadow DOM has rough edges. Focus trapping, font loading, and z-index stacking all behave differently inside a shadow root. If you're building an embeddable widget, budget time for this.

Try it

There's a demo on the homepage: issuecapture.com

Free tier is 10 issues/month, no credit card required. Paid plans start at $29/mo with no per-seat pricing.

If you're on a team that uses Jira and you're tired of garbage bug reports, give it a shot. Happy to answer questions in the comments.

Top comments (0)