From browser quirks to bugs caused by faulty lines of code, tracking down bugs can be difficult. BugReplay can help you debug user feedback quickly by providing video bug reports with developer console logs and all the data you need to diagnose and fix bugs.
The bug reporting process is quite complex: it includes several different people (QA, developers, product managers, customers/end-users, etc.) with varying levels of technical knowledge or expertise, and all the members involved must be able to provide just enough key information so that the developer can fix the issue. But it has to be the “right” information, and additional useless data can slow down the process. Obtaining both visual and critical data is hard to do in an efficient way.
Let’s take a look at how BugReplay can help developers debug user feedback quickly. We created a quick fictional website called OneTrip using Vue.js. This basic page is composed of two Vue components. The first component is the Vue Google Autocomplete component that is used to autocomplete valid addresses, and the second component is a date picker called vue-datepicker. The demo is not meant to focus on Vue.js but rather to be demonstrate BugReplay’s features. With that in mind, let’s take a look:
John is a QA agent at OneTrip. He is debugging the new homepage when he notices there is an issue when the user enters a destination address. After several attempts, he is able to confirm the bug as well as view the alert banner at the top of the page that notifies the user of an error. Prior to using BugReplay, John would’ve take a screenshot of the alert and document the steps he took to reproduce the error. Then he would send the report to the engineering team. The engineering team would use the report and try to follow his steps to see the issue. Sometimes the developers would be able to trigger the bug and other times they’d need additional info.
With BugReplay John can just toggle the BugReplay extension (available on Chrome and Firefox). The panel pops open with the option of taking a screenshot or video recording. Screenshots and videos are seamlessly saved alongside key network and JavaScript console data to his BugReplay account. John selects "video recording" and he reproduces the bug. After triggering the bug he stops the video and it is saved to his account. From there he can share a link with anyone on his team or any third-parties, and they can all watch the video without even creating a BugReplay account. (John could also invite an unlimited number of his colleagues to his BugReplay team account, and all the bug reports are available on the team dashboard.) The developers are able to see that the destination input using the Google Autocomplete component is throwing an error of “Destination address not found”. They are able to follow the stack trace info and find the error quickly without any back-and-forth communication. Bug fixed!
BugReplay for Customer Support Teams
When I clicked this button, it said thisReported by Tim
Feedback like this can often point a developer in the right direction, but usually developers require much more information in order to diagnose and fix the issue. It’s a very frustrating and time-consuming process for both the customer support teams who have to ask the most basic questions (like “are cookies enabled?”) and for the non-technical end-users who just want the website to work properly.
Feedback by BugReplay offers the solution. Using the same OneTrip demo, imagine this scenario:
Tim is visiting the OneTrip website and would like to book a car rental. All is going well until he enters the destination info. A red alert box comes up and says there is an issue with the destination address. Confused and not sure what to do, he sends an email to the support team saying “When I clicked this button, it said this! Help!” And now the fun begins. Let’s see how BugReplay could help out the OneTrip team.
Right away, OneTrip’s help desk sends Tim a link- and he launches the browser recorder in one easy click. The Feedback by BugReplay extension records his screen without requiring Tim to download any additional software or create a BugReplay account- all Tim needs to do is press record and retrace his steps. The Feedback by BugReplay extension records the JavaScript logs and network traffic and all the necessary environmental data, so the OneTrip dev team can review and debug the exact error Tim encountered. The video and console logs are also in sync so they can narrow in on the exact time the error occurred. Tim won’t see all that data on his end, but the devs will receive the full, detailed report.
By reviewing Tim’s logs, we can see that the destination address field is causing the error with the console stating "Destination address not found.” The dev team is quickly able to track down the bug and push a quick fix. Problem solved in record time!
Sign up here for a free trial!
