How to integrate Datadog into your web application in less than 1 day

mai zohar — Tue, 01 Feb 2022 12:54:36 +0000

Real User Monitoring tool(RUM) - get to know your users’ experience

Let’s start with the question, why do we need a client side monitoring tool?
First of all because we want to know the users' experience, detect anomalies, discover errors and root causes and optimize performance across your site.
We were looking for a platform that would monitor our user experience in the best way.
We want to make sure our users have the best experience on the page, that if the page reloads, then it is in a reasonable time frame and that there are no fatal errors (those are the basics considerations, there are many other criteria).
After experimenting with a few other platforms we decided to give Datadog a try (spoiler alert: it turned out to be a good decision).
Before you begin, let me share with you a checklist we used to make sure the system meets all of our needs:

Error monitoring
Session monitoring
Session recording (to see error flows - wasn’t mandatory)
Custom data of ours in the each event
Possible integration in other parts of our code (BE/devops/microapps/microservices)
Easy dashboards creation (in Datadog you have many of them automatically generated)

And after some research it sounded like Datadog provides all of these, so we started the POC.
In order to start a POC or a demo you should go and contact Datadog here

Let’s see some code - Datadog RUM (Real time User Monitoring)

They offer 3 ways of implementing Datadog in your web app:
You can find a full explanation in [here].(https://docs.datadoghq.com/real_user_monitoring/browser/)

We chose npm because we consider ourselves a modern web application :P
But really this is our way to add addons to the site and it's okay if we miss some errors.
Another small thing you need to consider is, do you want to be able to record your sessions as part of the monitoring process?(I recommend at least trying it.)
This has different pricing, so take that under consideration from a technical perspective.

What did I do (or how simple is this)?

Add @datadog/browser-rum to your app by npm i and then use it:

I created a new application with the following code

If you want to record sessions data and enable replay:

You can control the rate with the option:

replaySampleRate: 100,

After my new app is created:

Bundle the app like you bundle every app you have.
Add the bundle as a script in every page you have - or init it in every app.
Now in order to enjoy monitoring on each of our Single Page Application, we need to run the init function in each page or just load a single bundle that does it as a script.
In order to start the package and the monitoring you need to call the init function, so what we did was build it into a bundle and add it to exposed traffic.
You should see the following lines in your HTML:

For us, we have a function that initiate all the scripts for each application and loads it to the page, so we just added this bundle to the party(behind a Feature flag of course) :)

Don’t forget to add the domain to CSP... if you don't have CSP, you should!

datadog domain

Let’s take a look at Datadog to see the integration

Now that we have Datadog on each page we can let the data flow. Watch the magic in your Datadog

Those are all of your options and tabs :

But let’s start with taking a look at the sessions, you will see here all the sessions that were handled by Datadog and for each session, lots of such as: errors, view load(as a waterfall as well), device type, browser, country, city, etc...

Try to create your own dashboards according to what is important for you to monitor.

Now we had to add some more data to each RUM(Real time user monitoring).
This can be done by all kind of options but the easiest one and the most generic one is the context:

You will see it in each error under Custom Attributes and in each session this can be part of the filter.

So we see above how many cool tools we can get by adding client side monitoring.
By adding those tools, we can see if we have some fatal errors or consistent errors that affect our clients.
We can now get a better feeling for our client and how long each flow takes them.
We can take a look and see many types of session statistics like page load time, page views and much more.
After demonstrating how simple it is to implement any kind of monitoring tool, I hope it helps and you will go and do it in 1 day or maybe more.
But do it!

Good luck :)

DEV Community: mai zohar

How to integrate Datadog into your web application in less than 1 day

Real User Monitoring tool(RUM) - get to know your users’ experience

Let’s see some code - Datadog RUM (Real time User Monitoring)

What did I do (or how simple is this)?

Let’s take a look at Datadog to see the integration