Open your eyes on production thanks to SaaS monitoring & analysis solutions

When building a web app, being notified when your system has issues is crucial. Unfortunately, if you’ve not been proactive in getting data from your system, I would bet you're currently blind. Hopefully there are powerful solutions that take minutes to be integrated into your stack and give you a great insight on your production state.

Here is an exhaustive list of the tools we use at Lalilo that help us to get insights from our apps usage. I will also provide snippets of code to show you how we integrated them into our stack. It will give you an idea of the cost of integration and help you to install these tools quickly.

Fullstory

Pixel-Perfect Session Replay | FullStory

Fullstory allows us to watch as a video what our users do on our front apps. It is not a notifier. When we release new features, we have a look to Fullstory to see how the user interacts with the app.

The most powerful features for us:

• seeing how the user is using the app (almost as if we were with them)
• detecting frustration such as rage clicks, dead clicks
• using the the super Fullstory complete search / filter bar to find the movie you want to watch
• speeding up the player x4 or more

Super powerful Fullstory search bar

The limits

• The rendering in Fullstory videos can’t be 100% trusted. Fullstory shows you a bug but it's actually Fullstory which does not interpret well your website
• We see per user sessions so there is a risk to overfit on some users.

This is the most expensive tool we pay for ($199/month) although there is a free version with all the features but limited to 1000 sessions. It help us a lot to prioritise new features / improvements.

Integration

Installing FullStory consists in adding a header tag in index.html:

After login or signup, you can call Fullstory to identify the session:

Sentry

Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more

Sentry gives useful insights on front errors with context. I saw the difference between the small Slackbot I developed at first and Sentry. Sentry gives much more useful context.

List of errors in Sentry interface

On each error, you can have a look to the history of user actions

Sentry displays nicely user agent and the history of an error

We use the Sentry’s Slack integration: each error occurring on our front apps appears on a dedicated slack channel

Sentry allows to assign errors within the technical team and to track the errors solving.

For now we use Sentry free plan but upgrading to the $29/month plan would definitely worth it.

Integration

The first step to integrate Sentry in an app consists in installing its client called Raven:

npm install --save raven-js

This code should be at the very beginning of your app

This is enough to start receiving errors.

Things become a bit trickier if you are compressing your app on production because the error’s stack trace won’t be readable without the sourcemaps. Unless your sourcemaps are open sourced, you’ll have to provide them to Sentry each time you deploy a new release. You'll also have to configure Raven with the current release id so that Sentry's backend attaches the received error to the corresponding sourcemaps.

To do this I added this code in our continuous integration script:

Our continuous integration script

I pass the release id to the app during the production build…

… To pass it to Raven configuration

Now you can read the stack trace of errors in Sentry.

Slackbot

For backend errors, things are easier. I don’t see the need of a SaaS solution. I created a simple slackbot that catches errors and sends it to our Slack errors channel. There is a link to the source code (github) in the notification for quickly seeing what might cause the error.

Here is an example of a Express.js error middleware. It can be easily adapted to another stack.

Datadog

Modern monitoring & analytics

Datadog is a SaaS solution for monitoring servers. I was impressed at how easy to setup and how simple it is to build a dashboard and setup notifications in Slack. Datadog acquired Logmatic a few weeks ago so it can also be a good tool to analyse logs.

The dasboard I created for an Express API

Default dashboard for any server

Integration

Datadog agent can be installed in one command line on any kind of servers.

For example for Ubuntu server: DD_API_KEY=xxx bash -c "$(curl -L https://raw.githubusercontent.com/DataDog/dd-agent/master/packaging/datadog-agent/source/install_agent.sh)"

This will give you access to standard metrics such as CPU usage.

To get more insights on your app (response time, requests count etc.) you’ll have to send your metrics to the small server that Datadog agent installs on your server or use a library that does it for you.

For example, for an express app:

npm install --save connect-datadog

The connection to you account is done when installing the agent, not here

Google Analytics and Google Tag Manager

Although I don’t master these tools I understand they are useful for aggregated analysis. They help answer questions such as “how many users are on mobile?”, “what is the flow of a user on the app”, “where do users stop”.

It is not the good tool to get a segment of users since we are not allowed to send “personally identifiable information” data to Google Analytics.

To protect user privacy, Google policies mandate that no data be passed to Google that Google could use or recognize as personally identifiable information (PII). PII includes, but is not limited to, information such as email addresses, personal mobile numbers, and social security numbers.

Integration is similar to Fullstory.

Admin Tool

Last but not least, I created a simple web app to get access to our database entities. Thanks to https://marmelab.com/admin-on-rest/, it is a matter of a couple of hours to develop. It allows to find users and their activity on our apps to perform simple admin tasks.

Conclusion

I am amazed to note how quick it is to integrate these solutions compared to the value they add. It gives visibility on the usage of your apps and helps taking better decisions. If you feel blind, don’t be afraid, you can change this before the end of the day!