Flawsnap
Free trial

Console and network logs, attached to every report

The reporter sees a broken page; you get the error message and the request that failed, without asking them to open developer tools.

Console and network capture in Flawsnap means every website bug report includes the last 100 console messages and uncaught errors, plus the last 100 fetch and XHR requests with method, URL, status and duration. Request and response bodies are never captured. It is included on both Starter and Pro.

Exactly what is captured

In the portal, each report has a console tab and a network table you can scan for failed status codes. The capture is a rolling buffer, so it reflects what happened just before the reporter clicked.

LogWhat is keptWhat is not
ConsoleThe last 100 console messages and uncaught errorsAnything older than those 100
NetworkThe last 100 fetch and XHR requests: method, URL, status, durationRequest and response bodies

Put the script in the head to catch page-load errors

The widget can only record what happens after it loads. If the bug is an error thrown while the page boots, or an API call made on first render, load the script early, in <head>. The async attribute keeps it from blocking the page.

Snippet in <head>
<head>
  <!-- ... -->
  <script src="https://backend.flawsnap.com/widget.js" data-key="pk_..." async></script>
</head>

If your site sets a Content Security Policy, it must allow the script and the API host (https://backend.flawsnap.com) in script-src and connect-src.

Reading one: an example

Say a customer reports "the Pay button does nothing". The screenshot shows a normal-looking checkout. The network table shows a POST /api/orders that returned 422 after 180 ms, and the console shows a validation error logged just after it. You now know it is a server-side validation failure, not a frozen button, and which endpoint to open.

That is the gap these logs close: the reporter describes the symptom, and the logs point at the cause. For a primer on reading them, see console logs explained.

Why bodies are left out

Request and response bodies are where passwords, tokens, addresses and payment details live. Flawsnap never captures them, so a report from a customer cannot leak another customer's data into your bug tracker. The URL and status are usually enough to find the failing call in your own server logs.

In the extension and in Flutter apps

  • [Chrome extension](/install/chrome-extension): after a team member turns on "Capture logs on this site", it attaches console errors and failed requests for sites without the widget.
  • Flutter SDK: the last 100 log lines (Flutter errors, uncaught exceptions, debugPrint output and Flawsnap.log) and the last 100 requests made through Flawsnap.httpClient(). Dio and other HTTP clients are not seen yet.

Logs your AI agent can read

On Pro, an agent connected over MCP can read a report with its console and network logs (the latest 50 of each) and the annotated screenshot, then work the fix in your codebase.

Questions

Do my reporters need to open developer tools?
No. The widget records console output and requests in the background on pages where it is installed, and attaches them when someone sends a report.
Will Flawsnap capture an API key sent in a request?
Bodies are never captured. The URL is recorded, so avoid putting secrets in query strings, which is good practice anyway.
Why is an error missing from the console tab?
Either it happened before the widget loaded (move the script into the head), or more than 100 messages were logged after it and it fell out of the buffer.

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