Skip to main content

Best Practices for Developers in Userback

C
Written by Chris

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?