This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
As a web developer, you are bound to come across clients who are not very tech savvy. Some clients might want you to create a new website for them, while others might want to only make changes to specific sections or add new functionality. This is how the situation generally plays out:
- You update a section of the website, check that everything is working fine, and then go to bed.
- Next day, you wake up only to find an email or message from your client which says that the website is not working as expected.
- You start wondering what it is that's not working and open the website on your own device. At this point, you may be able to reproduce the issue the client is talking about and fix it. However, in some unfortunate cases, the website would seem to be working correctly, and you won't be able to see what the client is complaining about.
- This is when the trouble begins. The website may not be working for your client as well as many other people, but you have no idea what's wrong and how to resolve the issue.
- You start asking the client what's not working, the browser they are using, exactly what they were doing, etc., in the hope of being able to reproduce the issue on your end. Sometimes you can reproduce the issue, but sometimes you can't.
The whole process is very frustrating for both you and your clients. In situations like these, I wish that I could just sit right next to the client and see everything myself.
BugReplay helps you do something very similar. You no longer have to ask your users tons of questions about their browsers, cookies, plugins, etc. All you have to do is give them a link that they can click on to start browser recording.
You can use BugReplay for internal testing as well. In this article, we will go over all the features of this software that can make the internal testing of a website or providing awesome customer support a breeze.
BugReplay Records Everything Visible in the Browser Tab
Whenever you ask your users the steps they followed in order to reproduce a bug, you can never be sure that the users have not missed any steps. BugReplay helps you overcome this very common problem by recording everything the users did while trying to reproduce the bug. This is not only helpful when resolving customer complaints, but it also speeds up internal testing and makes the whole process very efficient.
As you can see in this video, BugReplay records every action the user takes, from button clicks to scrolling up and down the browser window.
While seeing what the user did when they ran into trouble with your website is helpful, it is still hard to know if any plugin installed by the user interfered with a script or if the user has disabled cookies, etc. Just by watching the above video, you may conclude that the images are not showing up because the call to retrieve the images failed.
It is also possible that the images were retrieved without any error, but they were not displayed because of some issue with the code that was supposed to arrange them in two different columns.
All you can do at this point is just guess and wish there was a way for you to see all the network calls as well as the JS console to determine what went wrong. Luckily, BugReplay also records all the network requests and responses.
These calls are all synchronized with the screen recording to help you figure out exactly when a network call was fired. The calls can be filtered based on a variety of factors like the domain, MIME type and HTTP status of the request, etc. The following video shows you how BugReplay can help you in quickly figuring out if any of the network calls caused the bug.
In the video, try to observe how clicking on the Settings icon on the right and applying different filters changes the list of requests shown in the Network Traffic Tab. Only the highlighted filters are applied at any given time. You should also see that the Network Traffic tab doesn't show any calls at the beginning. This is because a call is added to the tab only after a request has been made. Knowing when a call was fired goes a long way in figuring out what went wrong with the app or website.
The filters can prove very helpful when you are dealing with websites that can make a large number of requests with varying HTTP status codes and MIME types. In the following image, I have shown the result of filtering the requests by domain and selected localhost. As you can see, our network call was fired as expected.
You can also click on any network call to find out more about it, like the duration of the request. You can also check the request and response headers.
The following screenshot shows the details of our second request. As you can see, we are getting the JSON response back. This means that something must have been wrong with the code that was supposed to place the images in two different columns.
Just like filtering network requests, you can also filter all the console messages under the JavaScript Logs tab based on their domain, level, or source. In this case, we are looking for an error message, and that's why we set the level filter to error. Once you click on the error that you want to inspect, you will see more details about it. Here is a screenshot of the error which was preventing the images from displaying in our case.
Thanks to BugReplay, we now know the library as well as the exact function which prevented our images from displaying. You can see how easy the software makes it for developers to debug their websites.
Internal Testing and Customer Support
It doesn't matter if you are using BugReplay for internal testing or customer support. The software records all the network calls and console logs in the same manner. However, keep in mind that you (or your users) need to use different browser extensions for these purposes, and the process is slightly different as well.
Here are the steps to follow when using BugReplay for internal testing:
- The first thing that you need to do is register and create an account. You can use the software for free for the first 30 days.
- In the next step, you can download the BugReplay extension for Chrome. If you primarily use Firefox for your work, you can download the BugReplay Firefox extension instead.
- Once you have installed the extension, you can just click on the Start Recording button inside it to record a bug.
- BugReplay also allows you to replay the video before saving it in order to make sure that the video captures all the necessary details properly. You can give each recording an optional title and description in order to identify it later.
Instead of recording a video, you can also take one or multiple screenshots in order to point out a bug in the website.
If your users want to report a bug in your website, they will have to download another extension called Feedback by BugReplay. First, you will have to generate a link from which the users can download the extension. The link can be generated by clicking on the Request Feedback Report tab in your account.
You can give the link a title and an expiration date as well. After successful installation, the extension gives the users some easy-to-follow instructions so that they can record the bug with ease. The users can also optionally provide a title and description for the bug along with an email address for any further communications.
Since BugReplay records everything from the steps taken by a user to the network calls and the console logs, it becomes a lot easier for your users to submit detailed bug reports without getting frustrated with tons of questions. I would also like to point out that the Feedback by BugReplay extension doesn't give the users access to any of your other videos or to the dashboard.
More BugReplay Features and Integrations
If you decide to use BugReplay for internal testing, you will probably be working with a team. Everyone in a team can access each other's reports, making it easy for them to work together in order to resolve bugs. You can invite other people to join your team by clicking on your name in the upper right corner of your BugReplay account page and then entering the names and email addresses of people that you want to invite.
Sometimes, you might want to share a bug report with people who are not in your team. BugReplay allows you to create a shareable URL for each of your videos and then make the video accessible to anyone with a link. You can share a video by clicking the share link next to that video in your dashboard. Once the concerned people have watched the video, you can revoke the shared URL by clicking on Unshare.
If you and your team use either GitHub or Jira, it makes sense to allow you to file issues with both of them directly using BugReplay. The BugReplay team has already written a detailed article that outlines all the necessary instructions to integrate JIRA.
Integrating BugReplay with GitHub is easy as well. All you have to do is click on Notifications and Integrations on your account page and then select GitHub Issue Tracker under Add Integration. Similarly, you can integrate BugReplay with Slack by following the on-screen instructions.
If you want to receive an email whenever your users submit a bug report, you can provide BugReplay with one or more email addresses through which you want to be notified.
All these features of BugReplay make it one of the best tools to internally test your website and create detailed reports that are accessible to everyone on the team. Here is a testimonial from one of the many happy users of BugReplay.
BugReplay has greatly reduced my team's need to type tedious Steps to Reproduce and nearly eliminated uncertainty in bug reports - our dev team can start troubleshooting right away using BugReplay.
— Matt Viirlee, Project Manager
Final Thoughts
BugReplay makes it very easy for you to provide awesome customer support to your customers and significantly speed up internal testing by providing some useful tools. Any bug report created by either your users or a member of the team will be visible to the whole team now. The ability to see all the network calls and the console log will give you the most detailed bug reports possible, without bothering your client with a single question about the bug.
If you have been looking for a tool that can help your users or team create detailed bug reports, BugReplay is probably going to satisfy all your needs. Since you can register for a BugReplay account without paying anything for the first 30 days, I would suggest that you give it a try. If things work out well, you will have an amazing tool that keeps both your clients and internal testing teams happy.
