Profiling Timing Components in React Apps for RUM

This article discusses how to time-out specific components in React 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 render() and componentDidMount() React methods with the userTiming performance.mark() and appropriate deltas with the performance.measure() methods:

class Chart extends React.Component {  // ...

    componentDidMount() {
        this.mounted = true;
        window.performance.mark('ChartMountEnd');
        window.performance.measure('ChartMount', 'ChartMountStart', 'ChartMountEnd');   
        }

}

Figure 1: Setting up the timing methods in React

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

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

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

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

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

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

render() {
    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