Front End Performance Testing With Datadog(RUM)

Dilum Pathiraja
7 min readJul 29, 2021

In my previous article about Front End Performance Testing With Chrome DevTools, I discuss the importance of Front End Performance Testing, why we need it, and its benefits. Also in there, I mentioned it’s a manual effort and will take some considerable time to do the test.

In this article, I’m going to explain how to test the Front End Performance using DataDog which will overcome the above-mentioned problems. This will be a very reliable approach and allows us to integrate into the CI pipeline and enable continuous frontend SLA verifications. Here I will be explaining how to use Datadog’s Real User Monitoring (RUM) capabilities to test the Frontend Performance of a web application​.

Why DataDog RUM?

Datadog’s RUM provides end-to-end visibility into individual users' real-time activity and experience having many more great features. Out of many, below are some of the key features that fulfilled the technical feasibility.

  • Performance: Track the performance of web pages, user actions, network requests, and your front-end code.
  • Error Management: Monitor the ongoing bugs and issues and track them over time and in versions.
  • Analytics / Usage: Understand who is using your application (country, device, OS), monitor individual users’ journeys, and analyze how users interact with your application (most common page visited, clicks, interactions, feature usage).
  • Support: Retrieve all of the information related to one user session to troubleshoot an issue (session duration, pages visited, interactions, resources loaded, errors).
  • Dashboards: Analyze information about your user journeys, performance, network requests, and errors collected automatically with out-of-the-box dashboards.
  • Tracking user actions via Datadog Custom Actions: Most user actions like user “clicks” on the application are collected, some actions like scrolling and keyboard tabbing are not automatically collected by RUM SDK. Those user actions or interactions can be collected by added Custom Actions in the application code. Custom actions are user actions declared and sent manually by using the addAction API. They are used to send information relative to an event occurring during a user journey.
  • Single-page applications (SPAs) support:
  1. For single-page applications (SPAs) the RUM SDK differentiates between initial_load and route_change navigations with the loading_type attribute. Initial load is a traditional URL change, stemming from a complete load or reload of a URL. This is indicated in the browser when a page load event fires (the window.onload event). Initial page loads appear along with route changes in the browser UI.
  2. If a click on a web page leads to a new page without a full refresh of the page, the RUM SDK starts a new view event with loading_type:route_change. RUM tracks page changes using the History API. Datadog provides a unique performance metric, loading_timewhich calculates the time needed for a page to load. This metric works both for initial_load and route_change navigations. To account for modern web applications, loading time watches for network requests and DOM mutations.

Initial Load: Loading Time is equal to whichever is longer: The difference between navigationStart and loadEventEnd.Or the difference between navigationStart and the first time the page has no activity for more than 100ms (activity is defined as ongoing network requests or a DOM mutation).

Route Change: Loading Time is equal to the difference between the user click and the first time the page has no activity for more than 100ms (activity is defined as ongoing network requests or a DOM mutation).

Frontend performance testing with Datadog RUM

Although RUM is mostly used for real user monitoring in PRODUCTION applications, my focus is to test/monitor our application’s user actions via Datadog RUM. Below are the primary steps that enable testing frontend performance via Datadog RUM:

  1. Setting up Datadog RUM SDK in frontend codebase
  2. Setting up data collection
  3. Perform user actions in the browser
  4. Visualize collected data in Datadog dashboard

Setting up Datadog RUM SDK in Frontend Codebase

This will initialize the Datadog RUM in Frontend and enable Datadog to collect the user actions happening in client-side browsers. There are three methods to install SDK in the codebase.

  1. npm (node package manager) The RUM SDK gets packaged with the rest of your front-end javascript code.
  2. CDN async — The RUM SDK is loaded from our CDN asynchronously: this method ensures the SDK download does not impact page load performance.
  3. CDN sync — The RUM SDK is loaded from our CDN synchronously: this method ensures the SDK is loaded first and collects all errors, resources and user actions.

You can get more understanding on this by referring to this.

Setting up data collection (Client-Side Browser Data)

Once RUM SDK is set up and deployed to Frontend codebase, Datadog collects browser data inline to 6 key Event Types (RUM Events) described below:

Out of these RUM events, View and Action (User Actions) are what we mainly use to extract the Loading Time, Performance Indicator (KPI)

The following diagram illustrates the RUM event hierarchy:

NOTE: If you need you can create a separate environment(AWS EC2) to execute the tests and capture all the events coming from that environment to RUM graphical interfaces.

Perform user actions in the browser

To perform the automated user actions like clicks, scrolls and navigations we are using an automated selenium suite. You can create an automated suite with the test scenarios that you want to test the performances. These automated Frontend Performance test scenarios will execute frequently via a Jenkins job.

Tracking user actions via Datadog Custom Actions

Datadog Real User Monitoring (RUM) Browser SDK automatically detects user interactions performed during a user journey.

The automatic collection of user actions provides insights into user behavior, without having to manually instrument every single click in your application. It helps you achieve the following objectives:

  • Understand the performance of key interactions (for example, a click on a button)
  • Quantify feature adoption
  • Identify the steps that led to a specific browser error

Although most user actions like user “clicks” on the application are collected, some actions like scrolling and keyboard tabbing are not automatically collected by RUM SDK. Those user actions or interactions can be collected by added Custom Actions in the application code.

What are Custom Actions?

Custom actions are user actions declared and sent manually by using the addAction API. They are used to send information relative to an event occurring during a user journey. In the following example, the RUM SDK collects visitor’s data when they hit the button.

import { datadogRum } from '@datadog/browser-rum';datadogRum.addAction('<NAME>', '<JSON_OBJECT>');// Code example
datadogRum.addAction('<NAME>', {
<JSON_OBJECT>: {
amount: 42,
currency: '$',
nb_items: 2,
items: ['socks', 't-shirt'],
},
});

Visualize collected data in Datadog dashboard

The data collected during the performed user actions are visualized in a Datadog Dashboard that builds custom to showcase the Frontend Performance statistics.

Let’s look at how we can create a Dashboard in DataDog:

  1. In Datadog, navigate to the Real User Monitoring page and click the New Application button.
  2. Enter a name for your application and click Generate Client Token. This generates a clientToken and an applicationId for your application.

Note: Your application shows up on the application list page as “pending” until Datadog starts receiving data.

For more details on setting up the Dashboard.

The user actions performed via frequently executed automated frontend performance test scenarios will pump the client-side browser data into time-series graphs. This will help us to understand the frontend performance details with a greater number of samples.

Sample Dashboard

Every time the selenium suite is executed, the graph will be updated with the times that took for the relevant actions. If the graph exceeds the SLA line then there is a Performance breach and you can investigate what causes this degradation.

By clicking on any point in the time series line, the dashboard will present a list menu of different views that narrow down or illustrates different statistics.

Out of which, the “View RUM events” option highlighted above will further elaborate the Action/View events that took place at the point you clicked on, in a new window.

By selecting a particular Action/View event in the newly opened window, you will be presented with the full trace of calls that contributes to the load time at the point in the time series line you clicked. Datadog dashboards will present all the available information captured pertaining to the particular Action/View event which will help us understand the happenings under the hood.

Hope you learn something useful. See you in the next one ✌️

References

--

--

Dilum Pathiraja
Dilum Pathiraja

Written by Dilum Pathiraja

Associate Quality Engineering Lead — Specialist @ SyscoLABS

Responses (1)