Error Monitoring for Web Apps

Summary💡

Have you ever had an error reported by your web app users but found it difficult to track down or reproduce in your environment? Or do you wonder whether your users are happily using the new feature you just released?

Adding an error monitoring or real user monitoring solution to your app could help you keep these things (and more) in check!

In this article, let’s introduce some of the tools to help you do that.

What is Error Monitoring? 🤔

Here, we are discussing two different terms, error monitoring and real user monitoring (RUM). But what are these?

Error Monitoring systems help you collect unexpected crashes and exceptions that occur in an app. They also provide a way to handle exceptions manually in the code and report them to the error monitoring system. These systems usually come with an interface where you can check the error logs along with more specific details such as operating system, browser, app version, sourcemap, etc.

Real User Monitoring is a more comprehensive solution that not only tracks exceptions and crashes but also helps you analyze how a real user is interacting with your application and learn what affects their user experience. Different RUM solutions may offer various metrics and types of data.

Almost every Error monitoring/RUM solution provider would have a blog section where you can learn more about these terms in detail.

Why do we need this? 🧐

There are many scenarios where we may want to rely on these solutions to get the most accurate report from a user’s encounter with our app.

A web app with a large number of users and a wide variety of hardware/software environments could be an ideal case. It is almost always impossible to have the same experience as the user who is facing an issue with their hardware and software.

For example, a user with the Brave browser faces an issue that doesn’t occur in Chrome. This could be due to an unsupported browser API or a CSS property. Knowing the user’s device, browser, and browser version could help us resolve this much faster. (Some tools may even point out the exact code where the issue exists.)

It is always great to let our users reach out to us directly for any feedback, but we may not rely on that because our users may be confused, may not have the time to report, may be first-time users, and may simply decide not to report it and avoid that feature or the app altogether.

Solutions 🔨

Here are some of the tools that I have been familiar with and used in frontend projects.

Before we get confused between the similar-looking and functioning tools that all claim to be the best, it is perhaps good to know what we should look for. Here’s a list of some of the basic checks:

• Ease of use (user-friendly dashboard, navigating through the logs, finding the details you’re looking for)

• Support for your application (frontend, backend)

• Error tracing

• Reports and insights

• Pricing

Sentry

Sentry is one of the most popular and open-source platforms. It comes with good support for almost all types of application stacks. Apart from error monitoring, Sentry also emphasizes performance monitoring and some of the best debugging features.

Pros

• Active open-source community support

• Easy to integrate

• The most usable free plan

• Tons of free learning content (blog, youtube)

• User feedback

• Code coverage, error tracing in the source code

• Support across platforms and support for all major frontend frameworks

Bugsnag

Bugsnag has been around since 2013 and is really simple and user-friendly. It has a good support for mobile apps as well.

Fun fact - Bugsnag is now acquired by Smartbear who provides an ecosystem of software testing tools including Cucumber (also acquired).

Pros

• Simple and easy to use

• Only the essential information

• Good support across platforms

Datadog

Datadog is an all-in-one solution for a whole range of monitoring and security products. It is more focused on network, cloud, and all backend-related monitoring.

Out of all the other options available, Datadog would surely find itself at the bottom of the list when it comes to ease of use and user-friendliness.

Pros

• All-in-one solution for one subscription

• Great support for backend

• Decent community support

Honeybadger

Known for its error tracking and uptime monitoring, Honeybadger comes with good support for all types of backend applications and minimal JavaScript support as well. It has been around for a long time, and I have seen my colleagues (backend devs) rely on it for any production issues/alarms, which makes it worth mentioning.

Pros

• Easy and reliable

• Integrations with Slack, GitHub, etc.

Getting started with a free plan 🍻

To get started, consider trying out a few of these tools before hooking them up with your production app. Here’s a quick comparison of the free plans provided by these software tools.

Conclusion

We’ve briefly covered error monitoring for web applications. Each of these software/services has its pros and cons, and we can pick the one that fits best for our specific app.

Thanks for reading! 👋

Links 🔗

• https://www.bugsnag.com/

• https://sentry.io/welcome/

• https://www.datadoghq.com/

• https://www.honeybadger.io/