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