How to integrate Datadog into your web application in less than 1 day
Tags: monitoring, myheritage, webdev, tutorial
Published: 2022-02-01 12:54:36

## 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](https://docs.datadoghq.com/real_user_monitoring/guide/enrich-and-control-rum-data/?tab=event#)


## 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/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgv9dt0bb17fvutub947.png)

 
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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rfk9t8incpa5okr8upf.png)

I created a new application with the following code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb5mknyb9x3xt5xcg85o.png)
 

If you want to record sessions data and enable replay:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw190d7x8461xp4jpa09.png)
 
You can control the rate with the option:  
  replaySampleRate: 100,


After my new app is created:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20ajue0yctrvzdtoutw6.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ob6xe8g4d0r4is4xbhx.png) 

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)... if you don't have CSP, you should!    
[datadog domain](https://docs.datadoghq.com/real_user_monitoring/faq/content_security_policy/?tab=us)

## 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](https://app.datadoghq.com/help/quick_start)

Those are all of your options and tabs :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uc544zpfo6zsqqd36c2.png)

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...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uu26qp7bslns1v2t0qu.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chjrv7h5tn6rcnyieyyw.png)
 

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 :)