Skip to main content

Best Practices for Developers in Userback

Written by Jon

How developers can use annotated screenshots, session replays, console logs, and network requests to reproduce and fix bugs faster, without chasing the reporter for details.
​

A bug report that says "it's broken" leads to guesswork and back-and-forth with the reporter. Userback attaches the technical context to each report automatically: what the user saw, what they did, and what the browser logged. You can often reproduce the issue from the report alone.
​
​

Capture bugs where they happen

  • Put the widget on the pages that matter. Users can annotate a screenshot of the exact problem and add a comment. See Create and Edit Your Feedback Widget.
    ​

  • Open the widget from your own code. Use the JavaScript SDK to open it from a button or at a specific point in a flow, so reports come in from where users hit the problem. See JavaScript SDK and Developer Docs.
    ​

  • Add it to your native app. With the Mobile SDK, users report bugs from inside your iOS or Android app, and you get the same visual feedback and context.
    ​
    ​

Watch the session before the bug

Userback links a session replay to each feedback submission, so you can watch what the user did before they reported the issue.

  • Look for the step that failed, such as a click that did nothing, a form that didn't submit, or a page that loaded wrong.
    ​

  • Check the Events panel in the replay player for clicks, form events, and rage clicks.
    ​

  • Tag sessions with the Tag button, for example #checkout or #bug, so you can find related sessions later.

See Session Replay.
​
​

Get the full technical context

Open Dev Tools on a feedback item to see what the browser recorded.

  • Console logs show JavaScript errors and warnings from the user's session.
    ​

  • Network requests show outgoing HTTP requests, so you can spot failed API calls and slow responses.
    ​

  • Choose what's captured. On Feedback > Settings > Widget > Design > More, select the log levels to capture: Log, Error, Warning, Info, Debug, and Network Request.

Two more sources of context:

  • User identification attaches the user's ID, email, and attributes such as plan, so you can contact them or check whether an issue affects one user or a segment. See How to Identify Users.
    ​

  • Custom data attaches anything else you need, such as an app version or a feature flag, to each submission. See Attach Custom Data.



Work from your issue tracker

Keep bugs in the tool your team already plans work in.



Route bugs to developers automatically

  • Assign bugs by type. Set a triage rule so every new Bug goes to a developer or your dev lead, with a due date. See Configure Your Feedback Settings.
    ​

  • Discuss fixes in internal notes. In the comment box, check Internal before you post, so the reporter doesn't see technical discussion. See Comments and Notifications.
    ​

  • Keep some developers to internal notes only. In Site Settings > Members, set a member's permission to Internal notes only so they can't reply to users by mistake. See Set Per-Site Member Permissions.
    ​
    ​

Test with the browser extension

The browser extension lets your QA testers and developers report issues on any site, including staging and test environments where the widget isn't installed.

  • Capture annotated screenshots with page metadata attached.
    ​

  • Record video to show the steps that lead to a bug. This helps most with complex or intermittent UI issues.

See Installing the Userback Browser Extension and Capture and Annotate Feedback with the Browser Extension.
​
​

Work with feedback from your editor using MCP

Userback MCP connects your feedback to AI coding tools like Cursor, Claude Code, and VS Code. MCP (Model Context Protocol) is a standard way for AI tools to read and act on data in other apps.

  • Debug with full context. Ask your AI tool to pull a feedback item with its console logs and network requests, suggest a likely cause, and check it against your codebase.
    ​

  • Find feedback without leaving your editor. Search by status, assignee, priority, date, or a plain-language description, to see what's open in an area before you start work.
    ​

  • Update feedback as you go. Assign, change status, and add comments from your AI tool, so nothing is left open after you've fixed it.
    ​

  • Keep personal data out. Turn on Restrict PII from MCP responses on Feedback > Settings > Privacy to remove names and emails from what MCP returns.

What's next

Related articles

Did this answer your question?