{"id":4160,"date":"2015-11-25T10:18:17","date_gmt":"2015-11-25T08:18:17","guid":{"rendered":"https:\/\/usersnap.com\/?p=4160"},"modified":"2025-07-30T18:40:51","modified_gmt":"2025-07-30T16:40:51","slug":"client-side-javascript-error-logging","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/client-side-javascript-error-logging\/","title":{"rendered":"Why we have to talk about client-side JavaScript error logging!"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Of course, this opened up the door for developers to do incredible things. But just like with everything that\u2019s 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.<\/p>\n\n\n\n

In this blog post, I\u2019m going to show you why client-side JavaScript error logging<\/strong> is easy to implement and that it is just a few clicks away \ud83d\ude42
\n<\/p>\n\n\n\n\n\n\n

Try Usersnap for Website Testing<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

JavaScript – the winner takes it all?<\/h2>\n\n\n\n

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\u2019s safe to say that JavaScript has become the most widespread programming language for web applications.<\/p>\n\n\n\n

Or, as Eric Elliott<\/a> would state it:<\/p>\n\n\n\n

\n

JavaScript has the potential to help a lot of more people, because it’s the most popular language in the world.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Why log client-side JavaScript errors?<\/h2>\n\n\n\n

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

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

And because there are so many different browser versions<\/a>, operating systems and devices out there, it\u2019s much harder to produce high-quality JavaScript code that works everywhere.<\/p>\n\n\n\n

Especially if you compare this to the olden days of server-side code…<\/p>\n\n\n\n

\n

Let’s keep this short. Too few websites log JavaScript errors.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

– Karl Seguin<\/a><\/p>\n\n\n

Try Usersnap for Website Testing<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

How to log client-side errors?<\/h2>\n\n\n\n

I guess we\u2019ve all been there. How do you describe a bug in order to make it reproducible for the developer in charge?<\/p>\n\n\n\n

When it comes to client-side JavaScript errors<\/strong>, people have a hard time reporting the issue. A simple \u201cthe button doesn\u2019t work<\/em>\u201d isn\u2019t 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?<\/p>\n\n\n\n

Use the console recorder and avoid email ping pong<\/h2>\n\n\n\n

So, how do we avoid all those ping pongs between bug reporter and developer and spend the time on actual bug fixing?<\/p>\n\n\n\n

The basic problem of client-side JavaScript errors looks something like this:<\/p>\n\n\n\n

    \n
  • The user does something on your website, e.g. clicking on a button<\/li>\n\n\n\n
  • The button does not do what it should (like linking to some other page)<\/li>\n\n\n\n
  • There\u2019s no error message displayed to the user.<\/li>\n\n\n\n
  • The developer console would contain some info with error logs<\/li>\n\n\n\n
  • Because the bug appears on the client-side, the developer in charge will have a hard time finding and fixing it.<\/li>\n<\/ul>\n\n\n\n