How to log client-side errors using JavaScript to the server?

Let me tell you a use case that I’ve used before: has an end-user ever contacted you that they can’t use a feature or perform an action in your web application and neither they see any useful user-friendly message(s) to convey back to you that may help to find the origin of the problem? In this post I’ll explain you how to log client-side errors using JavaScript to the server to make your web application better.

First of all, the situation mentioned above is a bad experience for your user. You may get to know about this actual issue if they report back to you. But many a times, they may just not bother to even raise a call to the concerned team about this issue. So, there are two-ways to get to know about a client-side bug – ask your user to open dev tools, go to console and take screenshot or copy the message to send it to you. There may be some errors logged in the browser’s console but it’s not their duty to open the developer tools and report the red coloured message back to you. Or a better way is to  automate this process by logging any client-side errors on your server automatically so that your team can fix it similar to any server-side errors.

The demo and code mentioned below is the native JavaScript way to get hold of the errors and do something with it.

Why is this code snippet loaded first?

We need to use the onError function available on window object to define a custom error-handler that will log errors to the server. Place this in head so that this runs first and is ready to catch any errors. If placed at bottom, it’s possible that this may not run if an error occurs before!

What is Stacktrace in the code above?

I’ve referenced a library known as Stacktrace.js. One of the important feature of this library is that you can easily get the full stacktrace from the error (Error object) which tells you a lot about the error’s origin, message and some other information when given an exception object to its printStackTrace method. It’s optional to use this library to achieve this as you can see the onError already provides many useful information like message, url, line-number, column-number.

Prepare the data/information to log

Next, we create an object that is also written on the server so that the data we send on HTTP POST is easily understandable by the server. This model definition is quite simple enough that aims to record the cause, message, url and the full stacktrace i.e. anything that you may need to log an error to the server. Depending on your application, you may have something less or more to log which eventually will help your team to resolve this issue. Before sending the stacktrace to the server, we perform a join on the array that is populated by the stacktrace service.

Send information to the server

To send the log information to the server, we need to use browser’s native way to make an AJAX call i.e. XMLHttpRequest. We could have used Ajax function exposed in other libraries like jQuery or any other library. But what if that library fails to load or something else goes wrong due to which we will be able to execute the error handler but sadly the HTTP POST action will fail! So, to be at safe side, stick to the native way which ensures no matter what goes wrong, the code will work provided it is executed before any error and server is up and running. Please make sure that you setup the right content-type else you will face invalid JSON primitive issue or similar kind of error. Also, make sure to call the JSON.stringify function on the data that you would like to send to the server which wraps the object in string. I’ve added a dummy url which you can replace with a valid end-point that exists on your server. I use ASP.NET Web API for this but this concept can be used with any server-side platform.

Having this setup in the client-side web application, we now don’t need to worry about errors that use to go unnoticed because now there is no way that an error is encountered and we are not aware of it! If you followed all the steps above, you now have all the skills to log client-side errors using JavaScript to the server.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger