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. Backend errors are relatively straight forward, as you can log them directly in your server. However, frontend 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 frontend 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.

1
2
3

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

We wanted something more than just stacktrace.

That is why we built Atatus. Atatus will solve this issue for any growing webapp. When an error happens Atatus captures the errors. 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.

This one step alone avoided Bad User Experience on our website.

Don’t wait for users to report issues. Avoid bad user experience on your website. Move fast & fix everything in the frond-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 30 day trial – no credit card required. If you have any questions, we’d love to hear from you.