Flawsnap
Free trial

Bug reporting for SaaS product teams

Put the report button inside your signed-in app, attach the account details your team needs, and work each report from the same board as the rest of the product.

The problem: the bug only happens for one account

A customer on your Team plan says the invoice export button does nothing. Nobody on your team can reproduce it, because nobody has that customer's data, feature flags or role. The support thread grows by a message a day while someone asks for a screenshot, then the browser, then the account ID.

In a SaaS app the context that matters is mostly yours, not the customer's: which account, which plan, which flags were on. The widget can attach all of it at the moment the report is made.

Wire the widget into your signed-in app

Load the snippet once in your app shell, in <head>, and not on every route change. For React, Next.js or Vue see the React, Next.js and Vue guides. Then, once you know who is signed in, tell the widget:

After sign-in
window.Flawsnap.identify({ name: user.name, email: user.email })
window.Flawsnap.setMetadata({
  accountId: account.id,
  plan: account.plan,
  role: user.role,
  flags: enabledFlags.join(','),
  release: BUILD_SHA,
})

identify() only prefills the reporter on bug reports. It never reaches Insights.

Project settings worth changing

  • Allowed domains: app.example.com for production and staging.example.com for your own team. One project per product, not per environment, keeps reports in one place.
  • Button placement: if a floating button doesn't suit your UI, hide it with Show on website (under Report a bug button) and call Flawsnap.open() from a 'Report a problem' item in your help menu. open() still works when the button is hidden.
  • Categories: route by product area (Billing, Editor, Integrations, Settings) rather than by layer. The person triaging knows who owns each area.
  • Team sign-in: turn it on so your own staff file reports under their name while dogfooding.
  • Recording (Pro): turn on Allow screen recording. Your app can start one with Flawsnap.startRecording() when a user picks "Record what happened". Recordings stop at five minutes and mask typed values.

Mask what customers type and see

Recordings mask every typed value already. For content you don't want in a replay at all, such as a customer's documents or API secrets on a settings page, add data-flawsnap-block to hide an element or data-flawsnap-mask to mask its text. Reporters can also blur parts of a screenshot before it is sent; the blur happens in the browser, before upload.

Insights: see the path, not just the page (Pro)

Insights is off by default. Turn it on from Insights → Setup and the widget records screens, how visitors moved between them, API calls with their status and duration, and uncaught errors grouped into issues. Single-page app routes count as screens, and IDs in paths are masked, so /invoices/8812 becomes /invoices/:id.

For the invoice export bug, the APIs view shows whether the export endpoint is slow or failing for everyone, and Errors shows whether a front-end exception is behind it. Journeys, screens and API timing are on Pro; error tracking is on both plans. Insights sets no cookies and respects Do Not Track and Global Privacy Control.

Let an agent take the first pass (Pro)

On Pro, connect Claude, ChatGPT or a coding agent such as Claude Code or Cursor to Flawsnap's MCP server. A typical loop: the agent lists its tasks, starts one (the card moves to In Progress), reads the report with its console, network calls and annotated screenshot, proposes a fix, then finishes the task, which moves the card to QA with a summary and a PR link. Agents can't delete anything or change settings, and every action is recorded as the person who connected, marked 'via agent'. See AI agents and MCP.

Pitfalls

  • Putting secrets in metadata. setMetadata values are shown to your whole team. Send IDs, not tokens.
  • Loading the script per route. In a single-page app, load it once. Re-adding it on each navigation is unnecessary.
  • Hash routers and Insights. Screens are keyed on the URL path. If your app routes with #/, name screens yourself with Flawsnap.screen('Billing').

Questions

Will the widget slow our app down?
The snippet loads with async, so it does not block rendering. The Insights and recorder scripts are loaded separately, and only when the project uses them.
Does Flawsnap capture request or response bodies?
No. Network capture records method, URL, status and duration for the last 100 fetch or XHR requests. Bodies are never captured, in bug reports or in Insights.
Can we file reports into Jira or Linear?
Not today. Flawsnap has its own board and no Jira, Linear or GitHub integration. On Pro, an agent connected over MCP can read a report and act on it, which some teams use instead of a sync.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Start free trial Try the live demo

Related

Updated