How to Log Client-Side JavaScript Errors

Introduction

Over the last few years, browsers got some superpowers. They evolved from simple viewers for HTML & CSS to platforms executing our beloved web applications.

This is opening the doors for developers to do incredible things. And this is awesome. However, there is one big challenge that comes with every new shiny application.

With everything that is new, chances are high for bugs and issues to occur.

With Usersnap, I’ve found a great solution for that: its console log recorder enables me to record client-side JavaScript errors. One by one.

In this tutorial, I’ll walk you through the process of setting up the client-side of JavaScript error logging.

Complex JavaScript Bugs

There are a couple of reasons why client-side JavaScript errors have become more and more important to log than ever before.

First, JavaScript is the most popular programming language of the web. With new JavaScript libraries going mainstream every day, developers are demonstrating that almost everything is possible inside browsers.

Why do you need to log JavaScript errors?

The short answer is: Because writing good code is hard. And reproducing client-side errors is even harder.

Especially if you’re using non-trivial JavaScript in your codebase, you will have a hard time finding those bugs. Just think about all these different browser versions and devices for a moment.

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

The problem of client-side errors

The basic problems of client-side JavaScript errors are:

• The user does something on your website, e.g. clicking on a button
• The button does not do what it should (like linking to another page)
• There is no error message displayed to the user.
• The developer console does not contain information 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 probably agree that it is time for a way to attach the console output to get high-quality bug reports.

Usersnap console recorder

With the use of the Usersnap console recorder I found a great solution for recording, reproducing, and fixing front-end errors.

Basically, the Usersnap Console Recorder is a tool to record every front-end error, such as XHR traces, JavaScript exceptions, etc.).

And it sends this information along with an annotated screenshot to the developer of the site.

How to log client-side JavaScript errors?

The setup process for the Usersnap console recorder is simple:

1. Create a Usersnap account (free trials available)
2. Embed a JavaScript snippet on your site or inside your web app
3. Activate the console recorder
4. You’re done.

1. Create a new Usersnap account

You can sign up for a free Usersnap trial here. Create the first project and add the URLs you want to track.

2. Embed the JavaScript snippet

After creating your first project, you need to add the URLs of your site and embed the Usersnap widget.

It’s pretty simple and there are also available plugins for various CMS available.

After you embed the javascript widget on your site or app, you’ll see a little feedback button on your site.

3. Activate the console recorder

The feedback button is fully customizable in the project settings.

Enabling the console recorder is very easy. Open the widget configuration tab in the project settings and click on “change color and features of the widget”.

Enable the console recorder feature by clicking on the on/off checkbox.

Every submitted report will now contain the log output in the Usersnap dashboard.

4. Receive client-side errors

You’re done. Every created bug report with the embedded Usersnap feedback widget will now attach client-side errors as well.

In our example below, we see that there is an error:

Uncaught SyntaxError: Unexpected token {

We also see the call stack, and it looks like JSON.parse method failed.

Imagine that this JSON was generated specifically for a client’s account. Without this error log, the only way to reproduce the issue would be to log into your user’s account and repeat the same actions your user made. In most cases, this isn’t possible.

Limitations

According to my experience, the console recorder works with every modern web framework out of the box.

However, there are some limitations listed in the documentation of the console recorder.

Errors that occur very early (e.g., a body onload function that fails) could be missed by the recorder. Usersnap is loaded asynchronously to not hit your page loading time and therefore this might be missed.

It even works with AngularJS

If you are using AngularJS, the console recorder needs a little modification from your end.

If you add this library to your Angular JS project you’ll get AngularJS errors attached to your bug reports with the console recorder.

Inject it into your dependencies in your main app like this:

angular.module('yourapp', ["usersnapLogging”])

Conclusion

In most cases, we cannot access our user’s account in order to reproduce certain issues. The debugging of such client-side errors might take hours or even days.

The Usersnap console recorder fixes this problem and hands us the information we need to have.

As a developer, I’m now able to solve such client-side errors quickly. And most importantly, without spending too much time on finding my client’s bugs.