Why we have to talk about client-side JavaScript error logging!

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.

In this blog post, I’m going to show you why client-side JavaScript error logging is easy to implement and that it is just a few clicks away 🙂

JavaScript – the winner takes it all?

JavaScript is the de facto standard language of the web. With all those JavaScript libraries popping up, developers demonstrating that almost everything is possible in browsers. It’s safe to say that JavaScript has become the most widespread programming language for web applications.

Or, as Eric Elliott would state it:

JavaScript has the potential to help a lot of more people, because it’s the most popular language in the world.

Why log client-side JavaScript errors?

OK, so we all know that JavaScript is widely used in many applications and websites. But why should you log client-side errors?

The short answer is: because you do not want to spend hours and hours reproducing bugs. And if you’re using JavaScript, especially non-trivial JavaScript, in your code base, you will have a hard time finding those bugs.

And because there are so many different browser versions, operating systems and devices out there, it’s much harder to produce high-quality JavaScript code that works everywhere.

Especially if you compare this to the olden days of server-side code…

Let’s keep this short. Too few websites log JavaScript errors.

– Karl Seguin

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?

When it comes to client-side JavaScript errors, people have a hard time reporting the issue. A simple “the button doesn’t work” isn’t sufficient. Developers in charge of finding those bugs need answers to a lot more questions, such as: What was the user doing before the error occurred?

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 basic problem of client-side JavaScript errors looks something like this:

• 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.

The Console Recorder from Usersnap is a tool that records and tracks every front end error, such as XHR traces, JavaScript exceptions and much more.

Once a Usersnap screenshot has been taken, the log record is automatically attached to your bug report and easily accessible from the Usersnap Dashboard.

So how do you make everyone’s life easier and start recording client-side JavaScript errors?

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…
and start tracking client-side JavaScript errors.

You’re good to go.

All client-side JavaScript errors and XHR calls will automatically be saved once you create a Usersnap report.

Wrapping it up.

I guess the good old days of not logging client-side JavaScript errors are over. Aside from the Usersnap Console Recorder, there are also some other great applications out there which help developers in their bug tracking efforts.

Try the Usersnap Console Recorder for free and start logging client-side JavaScript errors.

Get started with Usersnap and deliver what users want. Collect your first 20 feedback items for free, upgrade to continue acting on the insights.

This article was brought to you by Usersnap – a visual bug tracking tool used by software companies like Facebook, Google, and AddThis.