Flawsnap
Free trial

Device and browser details, filled in for you

"Which browser were you on?" is the question every bug thread starts with; Flawsnap answers it before you ask.

Device context in Flawsnap is the environment data attached to each bug report automatically: browser, operating system, viewport, screen size, pixel ratio, language, time zone, page URL and title. You can add your own details, such as a release number, with setMetadata. Flutter reports carry device model, OS, app version and build instead.

The fields, and the bug each one explains

FieldOften explains
Browser and OSA layout that only breaks in one engine, or a missing font on one OS.
Viewport and screen sizeA menu that overlaps at one breakpoint, or a modal taller than the window.
Pixel ratioBlurry images or 1px lines that vanish on high-density screens.
LanguageText overflowing in a longer translation, or a wrong number format.
Time zoneDates shown a day early, or a booking slot in the wrong hour.
Page URL and titleWhich page, and which query state, the reporter was on.

Nobody fills these in. The widget reads them when the report is sent.

Add what only your app knows

Environment data tells you about the device. It does not know your release number, the feature flag a visitor was in, or which plan their account is on. Attach that yourself, and it travels with every report from that page.

Custom metadata and reporter details
<script>
  window.FlawsnapConfig = {
    reporter: { name: 'Sam Lee', email: '[email protected]' },
    metadata: { release: '2026.11.3', region: 'eu' },
  }
</script>
<script src="https://backend.flawsnap.com/widget.js" data-key="pk_..." async></script>

<!-- Or, after the widget has loaded (for example once a user signs in): -->
<script>
  Flawsnap.identify({ name: 'Sam Lee', email: '[email protected]' })
  Flawsnap.setMetadata({ plan: 'team', flag_checkout_v2: true })
</script>

Knowing who sent it

  • identify({ name, email }) prefills the reporter on bug reports. It is used for reports only and never reaches Insights.
  • With team sign-in turned on for the project, a team member signs in from the widget once, and their reports carry their name.
  • Customers do not need an account to report. If you do not identify them, the report is simply anonymous.

Device details from Flutter apps

Reports from the Flutter SDK swap browser fields for app ones: device model, OS and version, app name, version and build, screen size, pixel ratio, locale, light or dark mode, and the current screen. Reports are tagged iOS or Android.

Finding patterns across reports

In the portal you can filter reports by platform (Web, Android, iOS or Other), status, priority and category, and search titles and descriptions. When three reports about the same page arrive, open each one's environment details and look for the field they share.

Questions

Why does a report show a different screen size from the viewport?
Screen size is the whole display; viewport is the browser window's visible area. A small viewport on a large screen usually means a resized or split window, a common cause of layout bugs a tester cannot reproduce at full size.
Can I attach a user ID so support can look up the account?
Yes. Pass it with Flawsnap.setMetadata or in window.FlawsnapConfig.metadata. Only attach what your privacy notice covers.
Is device context available on the Starter plan?
Yes. Device and browser details are included on both Starter and Pro.

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