JavaScript Error Tracking - Find which user actions lead to exceptions

Justin -

The last few years we have had a tremendous growth in JavaScript web applications.

As with any new development, there will always be errors that happen in realtime. Back-end errors are relatively straight forward, as you can log them directly in your server. However, front-end errors are a completely different ball game as that happens at your user's browser on which you don’t have any control or access to view the errors.

Finding and fixing front-end errors are sometimes not straightforward. Usually the errors that happen to your users, are not seen or reproducible in your development environment (otherwise, you wouldn’t have deployed it in the first place).

One relatively simple approach is to simply hook into window.onerror and send that error
information to the backend. Unfortunately, you won’t have any stack traces. Instead,
onerror receives three parameters: message, the file, and line number.

window.onerror = function(message, file, line) {
    logError(file + ':' + line + '\n\n' + message);
};

Still with this you wouldn’t have the stack trace.

What if I have stacktrace?

Assume, even if you have the stack trace, usually it is not straightforward to identify which part of your complex web application has this error originated from.  We faced such issues as well

  • First, we did not have a way to capture Frontend Errros
  • Even when we used window.onerror, we did not get stack traces
  • Even when we had stack traces, there were issues which we were not able to reproduce in spite of the stacktrace
  • We asked the users how to reproduce, but not all users were interested in helping us out. They move on leaving us to figure it out ourselves

More than just stacktrace

There was more we wanted than a stacktrace.

That is why we built Atatus!

Atatus will solve this issue for any growing web-app. When an error happens Atatus Browser monitoring captures all the front-end errors in real-time. But as you would know by now, error capturing alone sometimes doesn’t help. What we do in addition is, we also capture all the user actions, such as clicks, input that lead to the error.

This showed us exactly what the user did which lead to the error. And with the stack trace and the steps, we zeroed in on the issues and have fixed them with ease.

Just by taking this one step,the Bad User Experience on our website was avoided.

Don’t wait for users to report issues. Avoid bad user experience on your website. Move fast and fix everything in the front-end. Let your users have the best experience, without any issues, on your website.

If you haven’t signed up yet, try out the free 14 day trial – no credit card required. If you have any questions, we’d love to hear from you.