Monitoring Angular Application with Datadog

Introduction

Hi readers, in this blog we will look into what is Datadog, what are its uses and what advantages it can provide for an angular application.

What is Datadog?

Datadog is a monitoring and analytics tool that you can use to optimize your application. Here are some features that datadog provides for your web application:

• You can track and monitor the whole user activity across your application
• If your application is taking time to load, you can debug the root cause of it.
• If in case you want to analyze particular user session, you can filter the results based on certain attributes like userId, email etc.
• You can add logs in case you want to analyze some results and also analyzes if there is any error.

Now, if you want to visualize the whole user journey, you need to enable RUM browser Monitoring in your application.  

What is RUM in datadog?

RUM stands for real user monitoring which gives you end to end visibility of the real time activity of the users. RUM  can help you monitoring the applications in such scenarios:

• Performance: Tracks the performance of your pages on each action and network request.
• Error Management: Tracks any ongoing bugs or issues .
• Usage: Datadog will track which user is using your application along with their country, device, browser and how they are interacting with the application including all navigation or click.
• Support: Retrieve all of the information related to one user session to troubleshoot an issue (session duration, pages visited, interactions, resources loaded, and errors).

A user session can last up to four hours. If a user does not interact with an application for 15 minutes, the session is considered complete. A new session will start when user interacts with the application again. To start browser RUM events tracking, you need to add this package in your application.

Use this command:

npm i @datadog/browser-rum

After this, you need to initialize datadog.

datadogRum.init({
applicationId: ‘<DATADOG_APPLICATION_ID>’,
clientToken: ‘<DATADOG_CLIENT_TOKEN>’,
site: ‘<DATADOG_SITE>’,
service: ‘my-web-application’,
env: ‘production’,
version: ‘1.0.0’,
sessionSampleRate: 100,
sessionReplaySampleRate: 100,
trackResources: true,
trackLongTasks: true,
trackUserInteractions: true,
})

Apart from RUM events, if you want to add logs in your application, you can use another package. Here is the command for it:

npm i @datadog/browser-logs

In this case we need to initialize datadog as:

datadogLogs.init({
  clientToken: '<DATADOG_CLIENT_TOKEN>',
  site: '<DATADOG_SITE>',
  forwardErrorsToLogs: true,
  sessionSampleRate: 100,
})

Conclusion

So today we learned what is datadog and what all advantages it can provide if we integrate it with our application. Thats not all. Datadog has various other features which you may need for your application. You can go through them here in the documentation.

Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.