Profiling Timing Components in Angular Apps for RUM

This article discusses how to time-out specific components in Angular applications. For the most accurate results, it's best to add the timers directly into the app using the browser's User Timing API and report that data back to our systems using the reporting methods in our RUM library.

The User Timing API

This interface allows users to create and control component-specific timestamps from parts of the browser's performance timeline. The API makes use of two timing event types: 'mark' and 'measure'.

mark events are named by the app and can be set at any location in an app.

measure events are also named by the application. They are placed between two marks and thus they are effectively a midpoint between two marks.

Usually this can be done by instrumenting the ngAfterViewInit() and OnInit() Angular methods with the user timing performance.mark() and appropriate deltas with the performance.measure() methods:

import { Component, OnInit } from '@angular/core';

@Component({ 
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  
  constructor() { }
  ngOnInit(): void { }
 
  ngAfterViewInit() {
    performance.mark('mark_fully_visible');
    performance.mark('mark_fully_loaded');
  }
}

Figure 1: Setting up the timing methods in Angular

Please see the MDN Web Doc discussing the methods and arguments used for creating and retrieving 'mark' and 'measure' event types:https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API

Reporting the User Timing Data in RUM

Reporting this data back to Catchpoint requires leveraging the RProfiler.addInfo() method within the Catchpoint RUM library.

Rprofiler.addInfo('indicator', '<tag token>', <indicator value>);
Rprofiler.addInfo('tracepoint', '<tag token>', <tracepointvalue>);

The first parameter specifies what type of custom data is sent back to Catchpoint - an indicator is a custom numerical metric, and a tracepoint is custom string dimension to the dataset.

The second parameter specifies a tag token - a key in the Catchpoint portal that we use to map these custom values to the value we report in the UI. Tag Tokens are configured under Settings > Insight in the Catchpoint portal. For example, if we wanted to make a custom timer for the Favorites Table we could make an Indicator with the name "Favorite Table Time" and assign it a tag token of "fav" (see Figure 2).

Figure 2: Implement Catchpoint's Insight feature for component tracking

Then in the Favorite Table component, we can make a call to our RProfilercommand with the following JavaScript that reports back the duration parameter of the particular measurement we made earlier with the User Timing API:

Rprofiler.addInfo('indicator', 'fav',performance.getEntriesByName('CartMount')[0].duration;);

Complete Code Example

ngOnChanges() {
    window.performance.mark('FavoriteListUpdateEnd');
    window.performance.measure(
        'FavoriteListUpdate',
        'FavoriteListUpdateStart',
        'FavoriteListUpdateEnd',
    );

    const duration=window.performance.getEntriesByName('FavoriteListUpdate')[0].duration;
    (windowas any).RProfiler&&
    (windowas any).RProfiler.addInfo('indicator', 'FavoriteList', duration);
}

ngAfterViewChecked() {
    window.performance.clearMarks('FavriteListUpdateStart');
    window.performance.clearMarks('FavoriteListUpdateEnd');
    window.performance.clearMeasures('FavoriteListUpdate');
    window.performance.mark('FavoriteListUpdateStart');
}

ngOnChanges() {
    window.performance.mark('RecetProductListUpdateEnd');
    window.performance.measure(
        'RecetProductListUpdate',
        'RecetProductListUpdateStart',
        'RecetProductListUpdateEnd',
    );

    const duration =window.performance.getEntriesByName('RecetProductListUpdate')[0].duration;
    (windowas any).RProfiler&&
    (windowas any).RProfiler.addInfo('indicator', 'RecetProductList', duration);
}

ngAfterViewChecked() {
    window.performance.clearMarks('RecetProductListUpdateStart');
    window.performance.clearMarks('RecetProductListUpdateEnd');
    window.performance.clearMeasures('RecetProductListUpdate');
    window.performance.mark('RecetProductListUpdateStart');
}

Helpful Links

RProfiler():https://docs.catchpoint.com/docs/Monitoring-a-website-using-Catchpoint-Real-User

Insight Indicators:https://docs.catchpoint.com/docs/Insight-Guide