NG-RUM

NG-RUM proposes methods to help monitor the real user performance of your web application. (compatible with Angular2+)

Notes

• This project is still under development
• Contributions are welcome
• Pull request are accepted

Installation

In angular 2+

Add the package

In your package.json add the line:

"ng-rum": "^0.1.2"

Install the node modules of your application

npm install

Call ng-rum

• Imports the library

import * as RUM from 'ng-rum';

• Calls the method (Gets the data about the navigator, the different times specified in params and the user) You can add the following calls where you think they are the most judicious. Personally, I put them in the main app component in the hook ngAfterViewChecked() :

console.log(RUM.getData({
  webPageLoadTime: true,
  webPageRenderTime: true,
  entriesLoadTime: true,
  measures: true
  }, {
      name: 'admin',
      role: 'admin'
}));

• Sends the data to an URL (Sends data to the url URL, about the navigator, the different times specified in params and the user, using post method)

RUM.sendData(URL, {
  webPageLoadTime: true,
  webPageRenderTime: true,
  entriesLoadTime: true,
  measures: true
  }, {
      name: 'admin',
      role: 'admin'
}));

Start your application

npm run start

In your favorite browser's console, you should see something link that: (the time are in ms)

{
  "href": "http://localhost:4200/patrimoine",
  "navigator": {
    "appCodeName": "Mozilla",
    "appName": "Netscape",
    "appVersion": "5.0 (Windows)",
    "buildID": "20180128191252",
    "cookieEnabled": true,
    "language": "fr",
    "mimeTypes": {},
    "onLine": true,
    "oscpu": "Windows NT 10.0; Win64; x64",
    "platform": "Win64",
    "plugins": {},
    "product": "Gecko",
    "productSub": "20100101",
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0",
    "vendor": "",
    "vendorSub": ""
  },
  "times": {
    "webPageLoadTime": 5273,
    "webPageRenderTime": 4516,
    "entriesLoadTime": {
      "document": 739.5403741612078,
      "http://localhost:3000/json/pays": 341.6426377923899,
      "http://localhost:3000/json/lignes": 398.03157115105523,
      "http://localhost:3000/json/gares": 440.0691856536405,
      "http://localhost:4200/sockjs-node/info?t=1518086900287": 279.35986860122966
    },
    "measures": {
      "header": 117.53999999999996,
      "app": 121.44000000000005
    }
  },
  "user": {
    "name": "admin",
    "role": "admin"
  }
}

Configuration

getData()

RUM.getData({ // The parameters
    webPageLoadTime: true, // Set to true if you want to get the web page load time
    webPageRenderTime: true, // Set to true if you want to get the web page render time
    entriesLoadTime: true, // Set to true if you want to get the load time of your application's entries 
    measures: true, // Set to true if you want to get our personalize measures (see below)
    }, { // Optionnal: specify a user
      name: 'admin', // unspecified by default
      role: 'admin' // unspecified by default
    }));

Personalize measures

You can measure the load time of the component you want.

Start a measure

I advise you to put this function on the ngOnInit hook

RUM.startMeasure('${THE_MEASURE_NAME}');

Stop a measure

I advise you to put this function on the ngAfterViewChecked hook

RUM.stopMeasure('${THE_MEASURE_NAME}');

Reset the measures

I advise you to call this function when your application change route

RUM.stopMeasures();

TODO

• Add metrics based on Resource Timing API, PerformanceFrameTiming, PerformanceNavigationTiming and PerformanceTiming
• Add documentation on the angular2+ routing listeners