---
title: "Profiling Timing Components in Angular Apps for RUM"
slug: "profiling-timing-components-in-angular-apps-for-rum"
updated: 2023-01-06T15:49:07Z
published: 2023-01-06T15:49:07Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.catchpoint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](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). ![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360058119072-blobid0.png) **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](https://docs.catchpoint.com/docs/360002566092-Monitoring-a-website-using-Catchpoint-Real-User)

Insight Indicators:[https://docs.catchpoint.com/docs/Insight-Guide](https://docs.catchpoint.com/docs/203347759-Insight-Guide)