Live feedback POC

Hi there 👋

This post is 100% non-technical and is about a problem I have encountered while working on web apps.

Issue

  • Reporting bugs in our web apps requires contextual information, such as the browser version, the operating system, and the user's actions leading up to the bug and most important a screenshot of the bug or better yet a video recording of the bug.
  • The current process of reporting bugs is cumbersome and requires the user to manually fill out a form with the necessary information, creating a barrier to reporting bugs.
  • The current process of reporting bugs is not user-friendly and does not provide a good user experience.
  • Usually implies creating a new issue in the repository, a JIRA ticket 🫠 or a Trello card or a document somewhere with the evidence, which stops you from working on your current task and requires you to switch context.
  • You have to tell your developers what you did, what you expected to happen, and what actually happened. This can be a lot of work, especially if you're not sure what's causing the bug.
  • If you are not a developer, you may not know how to provide the necessary information to help the developers fix the bug.
  • Sometimes a bug is related to a specific user's data, and you can't reproduce it on your local machine.
  • Sometimes a bug is related to a pull request that is not yet merged, and you can't reproduce it on your local machine.

A proven solution

Vercel Live Feedback is a great great solution to these problems. It covers almost all the issues mentioned above and provides a seamless way to report bugs and provide feedback to the developers.

I haven't used it yet in deep, but I have seen the demo and it looks promising.

The problem is that is heavily tied to Vercel and Next.js, and I would like to have a similar solution that can be used with any web app, not just Next.js.

Requisites for a good solution

In the following posts you will see how these initial requisites will fall apart as I start to explore the problem and the possible solutions.

Negotiable:

  • No backend required: Ideally the solution should not require a backend to work. Introducing a backend would make the solution more complex and harder to integrate.
  • No need to create an account: The user should not be required to create an account to report a bug.
  • No need to install anything: The user should not be required to install anything to report a bug.
  • No need to configure anything: Configuration should be minimal and easy to do and by the owner of the web app not the user.
  • Easy to integrate: The solution should be easy to integrate into any web app even by non-developers.

Non-negotiable:

  • Easy to use: Any solution that requires the user to do more than a few clicks and some typing is not a good solution.
  • Framework agnostic: The solution should be popular enough to be used with any web app, not just Next.js.
  • Open source: The solution, in the future, may need some kind of token or API key to work, and making it open source would make it more trustworthy.
  • User won't have to leave the app to report a bug: If the user has to leave the app to report a bug, the solution should be discarded.

Propsals

Script

My very first idea was to create a script that can be added to any web app, that would allow users to report bugs and provide feedback from the toolbar.

The script would be added to the web app, and the user would be able to click on the toolbar icon to report a bug or provide feedback by clicking an element in the DOM.

A toolbar would appear at the bottom of the screen with a button to report a bug and a button to provide feedback.

The user would click on the button to report a bug, then click on the element in the DOM or select some text, and a modal would appear with a form to fill out with the necessary information.

The script then will collect user information, such as the browser version, the operating system, and the element clicked on or the text selected, and send it to somewhere where the developers can see it.

Problems with this solution

  • The script doesn't have access to the user's screen, so it can't take a screenshot or record a video of the bug. This is a big limitation.
  • Also, the script doesn't have access to the user's actions leading up to the bug, so the user would have to manually fill out the form with the necessary information, creating a barrier to reporting bugs.
  • We must save the information somewhere, and the user must be able to see the status of the bug report, so eventually, we will need credentials of any kind to authenticate the user and store the information. Keeping credentials in the script would be a security risk and since we are negated to have a backend, we would have to store the information in a third-party service, which would require credentials.

These problems make this solution not viable.

Browser extension

The second idea was to create a browser extension that would allow users to report bugs and provide feedback from the toolbar.

The idea is similar to the script, but the browser extension would have access to the user's screen and actions, so it could take a screenshot or record a video of the bug, plus we could have access to user traffic and network requests, for future debugging.

Why is it better than the script?

  • The browser extension has access to the user's screen, so it can take a screenshot or record a video of the bug.
  • The browser extension has access to the user's actions leading up to the bug, so the user would not have to manually fill out the form with the necessary information.
  • Credentials will be needed to store the information, but since the user will have to install the extension, we could use the browser's local storage to store the information. User credentials will remain private.
  • We can collect more information about the bug, such as network requests, user traffic, and user actions leading up to the bug.

Problems with this solution

  • Website's owners have no control over the extension.
  • The extension would have to be installed by the user, which is a barrier to reporting bugs.
  • The extension will need manual updates, which is a barrier to reporting bugs.
  • In security terms, extensions are always riskier for the user than scripts.
  • Smartphones and tablets can't install extensions.
  • Probably It will only work on Chrome.

Conclusion

  • The browser extension is a better solution than the script, but it still has some problems that make it not really viable, although it is a good starting point.
  • Script is very limited but if we can find a way to overcome the limitations, it would be the best solution.

Click here to share this article with your friends on X if you liked it.