Web browsers got some superpowers over the last few years. The increasing speed of the browser engines has pushed browsers from being simple website viewers to a level where they are platforms executing our beloved applications like Gmail and Facebook day in day out.
Of course, this opened up the door for developers to do incredible things. But just like with everything that’s new, chances are high that bugs and issues occur. A lot of times, client-side errors give developers a hard time in reproducing and finding the bugs.
Or, as Eric Elliott would state it:
Especially if you compare this to the olden days of server-side code…
How to log client-side errors?
I guess we’ve all been there. How do you describe a bug in order to make it reproducible for the developer in charge?
Use the console recorder and avoid email ping pong
So, how do we avoid all those ping pongs between bug reporter and developer and spend the time on actual bug fixing?
- The user does something on your website, e.g. clicking on a button
- The button does not do what it should (like linking to some other page)
- There’s no error message displayed to the user.
- The developer console would contain some info with error logs
- Because the bug appears on the client-side, the developer in charge will have a hard time finding and fixing it.
At this point, you will probably agree that it’s time for a way to attach the console output to get high-quality bug reports.
Usersnap console recorder
A while ago we introduced the Usersnap Console Recorder which helps every developer by delivering the recorded output from the developer console.
Once a Usersnap screenshot has been taken, the log record is automatically attached to your bug report and easily accessible from the Usersnap Dashboard.
Step 1: Sign up for a Usersnap account
if you already have one, log into your existing account.
Step 2: Activate the Console Recorder in your project settings
If you have already created a bug tracking project, you can switch to your project settings and activate the Console Log Recorder in the widget settings.
Step 3: Embed the feedback widget on your website or app…
You’re good to go.
Wrapping it up.
This article was brought to you by Usersnap – a visual bug tracking tool used by software companies like Facebook, Google, and AddThis.