The Best Free JavaScript APM Tools for Hobbyists

Photo by Carlos Muza on Unsplash

So you created a side project and it’s starting to gain some traction. You want to ensure the best possible experience for your users. This means that if infrastructure issues or bugs do arise then you want to be able to detect them early and swiftly mitigate them. That is where an APM system comes in to play.

Some of the major players in the APM tooling space are New Relic and Splunk. These companies offer an APM as a service. But if your project does not generate a significant amount of income, then it is hard to justify spending $100+ per month to pay someone else to monitor your application.

There are generally two options that exist for integrating an APM system into your application:

1. Using a SaaS (software as a service) platform
2. Self-hosting the APM within your application

We are going to take a look at both of these options in this article.

What is an APM?

An APM or application performance management is the concept of monitoring an application for the performance and availability of its services. In layman terms, APMs gather metrics about your application and infrastructure and display it in a graphical and tabular format. When it comes to your JavaScript applications, this can mean different things depending on the context. For an HTTP server, an APM can gather metrics around all incoming requests, middleware, and CPU usage. For a client-side application, these metrics can include console errors and transactional data around user interactions and AJAX requests.

Best APM Tools for JavaScript apps

This list contains a mix of both open-source NPM packages and companies that offer a free tier for their APM service. They are in no particular order but one thing they have in common is that they are super simple to integrate into your applications.

1. Sentry.io

Sentry.io Dashboard

Sentry.io is one of those SaaS companies with an extremely generous free tier. Dubbed “Developer”, this tier level allows you to create an unlimited number of projects, tracking 5000 errors per month and persisting those events for thirty days. They track pretty much everything you would need to generate the steps to reproduce a bug — IP Address, browser and hardware information, request headers, cookies, stack trace, etc. They automatically send you email alerts in real-time so you are made aware of these issues as they happen.

Integration exists for all major programming languages and frameworks. So for Javascript, Sentry has guides for all of the popular server-side frameworks as well as the client-side libraries. If for some reason Sentry doesn’t support your favorite framework, then they do have guides for a Vanilla JavaScript or Node.js integration. There’s even a guide for setting up Sentry with Next.js.

In my above screenshot, you can see that I set up Sentry with an application that is powered by a Koa backend. These were the steps I had to take to get my app to start feeding errors to Sentry:

1. Create a new Project in the Sentry dashboard
2. Choose “Koa” for the platform
3. Install the Sentry Node SDK

npm install -S @sentry/node

4. Copy the boilerplate that Sentry provides to you — which looks like:

Now Sentry does have its shortcomings. It is primarily an error tracking tool so it will give you all the tools you need to debug your code and help you mitigate bugs. But, Sentry does not provide you much insight into the health of your infrastructure. If you want to have more information around CPU & memory usage or requests per minute, then you can use Sentry in conjunction with one of the other tools I mention in this article.

2. Express Status Monitor

Source: https://www.npmjs.com/package/express-status-monitor

Express Status Monitor is one of those self-hosted open-source options that I talked about earlier.

This tool does all of the heavy lifting for you and presents CPU & memory usage, requests per minute, response time, and health check status all in an easily digestible format. It uses web sockets to transport these metrics in realtime. You can customize the CSS of the dashboard if you so choose and even configure multiple health checks.

Integrating it into your application couldn’t be easier:

1. Install the Express Status Monitor package

npm i -S express-status-monitor

2. Require it in your application and serve it from the route of your choice

In your production environment you probably don’t want to make this route available to all of your users so you can go ahead and add middleware to restrict access as to who can view the monitoring dashboard.

Those who are not using Express.js need not feel left out. There are two community-led projects — koa-monitor and hapijs-status-monitor for those respective frameworks.

Albeit very basic, Express Status Monitor provides you with most of the raw metrics you would look for in an APM tool. It is certainly a commendable option and is a breeze to integrate.

3. honeycomb.io

Source: https://www.honeycomb.io/blog/get-deeper-insights-with-honeycomb-tracing/

Like Sentry, honeycomb.io has a very generous free tier available for developers. Listen to this: it includes an astonishing 20 million events per month, 60 days of data retention, slack integration, and more. Pretty impressive for a free service, huh?

Honeycomb.io uses what they call Beelines (really a glorified term for an SDK) which automatically detects what packages your application is using and propagates that information accordingly into their system.

Integration is super simple with Honeycomb.io. After creating your free account, you can create your first dataset (their term for a project). From your account dashboard select “Create new dataset”, choose Node.js, and click the “Create” button. Honeycomb will then present you with your API key which you will use to integrate honeycomb with your application.

To do that, follow these steps:

1. Install the Node.js Beeline

npm install honeycomb-beeline

2. Add this code snippet to the top of the main entry point to your app (the file that gets executed when you run npm start ).

When you run your application you will be able to see the data start pouring into Honeycomb. What’s so powerful about this APM tool is its Querying feature which allows you to use SQL-like syntax to analyze and ultimately visualize the data that Honeycomb collects from your application.

You can even view traces of different API endpoints that exist in your app, giving you full visibility into the transactional data collected by the beehive. It can paint a full picture for you as to the various services that make up one of your API endpoints and the execution time of each of those services, allowing you to easily pinpoint any latency in your system.

Conclusion

This is by no means an exhaustive list of APM tools that are available to use in your JavaScript apps. There are other open-source options available to you such as jaeger, Promethus, and Zipkin. However, these are distributed tracing systems that require a bit more configuration to get set up and maybe a little more extensive than what you would need for one of your projects. These tools require the use of an external GUI to view the metrics and in many cases, the SDKs for JavaScript are not officially supported by the monitoring system.

For that reason, I would say use any of the APM tools that I previously mentioned or use all three, depending on what exactly you want to get out of performance monitoring. The setup will not cause you any headaches and you will have all the data you need to make informed decisions on bug fixes and scalability.