Javascript - Real User Monitoring (RUM)

Client-side JavaScript logging library for Logmatic.io allows you to send log entries to Logmatic.io directly from web browsers or other JS clients.

Overview

Already a Logmatic.io’s user ?

We advise you to to directly go to the Logmatic JS-RUM - Integration on your platform that will help you do the setup and the configuration.

The logmatic-rum-js library aims at collecting End User Web (as known as RUM) performance and streaming it to Logmatic.io.
Main features are:

  • Easy to setup, compatible with modern browsers
  • Use the library as a complement of logmatic-js and boomerang libs
  • All-in-one minified scripts
  • No-wrapper, use Boomerang as usual
  • Single Page Application Monitoring (Angular, Backbone, etc.)

Setup - Installation & Configuration

You simply have to include the minified scripts and initialize your logmatic.io logger with your key. If you're using bower, install it as usual: bower install --save logmatic-rum-js.

<html>
  <head>
    <title>Example to report User Monitoring performance to Logmatic.io</title>

    <script type="text/javascript" src="path/to/boomerang.min.js"></script>
    <script type="text/javascript" src="path/to/logmatic.min.js"></script>
    <script type="text/javascript" src="path/to/logmatic-rum.min.js"></script>

    <script>
        // set up your Logmatic account
        logmatic.init('<your_api_key>');
        // see @https://github.com/logmatic/logmatic-js 

        // set up boomerang
        BOOMR.init({});
    </script>
    ...
  </head>
...
</html>
//Once loaded in a page you should see this kind of events in the Logmatic.io explore view.
{
   "severity":"info",
   "message":"[RUM JS] Page '/#!/phones/motorola-xoom' took 398 ms to load",
   "rum":{
      "t_done":398,
      "t_resp":11,
      "t_page":387,
      "rt":{
          "t_domloaded": 230
       },
      "restiming":{
         "nb":24,
         "t_max":135,
         "worst_entries":[
            "http://localhost:8000/phone-detail/phone-detail.module.js took 135 ms",
            "http://localhost:8000/phone-detail/phone-detail.component.js took 135 ms",
            "http://localhost:8000/phone-list/phone-list.component.js took 132 ms",
            "http://localhost:8000/core/phone/phone.service.js took 98 ms",
            "http://localhost:8000/core/core.module.js took 95 ms"
         ],
         "other":{
            "nb":1,
            "t_max":13
         },
         "img":{
            "nb":1,
            "t_max":36
         },
         "link":{
            "nb":3,
            "t_max":13
         },
         "script":{
            "nb":19,
            "t_max":135
         }
      }
   },
   "url":"http://localhost:8000/#!/phones/motorola-xoom",
   "domain":"localhost"
}

And that's all.

By default, Logmatic-RUM provides these 3 regular Boomerang metrics:

  • t_done: Time duration between the first page request (i.e. the navigationStart) and the time where the dom is loaded.
  • t_resp: Network time duration
  • t_page: Renderer time duration

logmatic-rum-js also includes the Resource Timing plugin (restiming). logmatic-rum-js exposes the data as more readable way as the default behavior. Main metrics are:

  • restiming.nb: number of assets loaded
  • restiminig.t_max: load time of the slowest asset.
  • restiming.worst_entries: assets displayed by worst load time (top ten by default)

For each type of assets (image, link (css, font), script and other)

  • restiming.<type>.nb: number of assets loaded
  • restiming.<type>.t_max: load time of the slowest asset.

Getting Further

logmatic-rum-js has been designed as a regular Boomerang's plugin. Hence, you can leverage all the features and the use cases provided by Boomerang.

Although you can read the use cases provided in the Boomerang documentation please find below the ones we wanted to highlight here:

  • Add your own timers
  • Single-Page application monitoring

Add your own timers

Boomerang allows you to define custom timers for tracking custom components. This feature is emboddied by the RT plugin directly loaded in the boomerang most basic Boomerang library (so no need to rebuild the library here...).

In order to fine-control when the beacon is fired, you need to disable the autorun mode.

        // init Boomerang
        BOOMR.init({
            autorun: false
        });

You are responsible to fire the beacon somewhere in your code, when your page/app is ready. You have just to call the BOOMR.page_ready(); method.

To add some custom timers you have to use the 2 following methods: BOOMR.plugins.RT.startTimer("a_timer") and BOOMR.plugins.RT.endTimer("a_timer").

To illustrate this, let's track the angular the dom loading times:

    ...
    // Somewhere in a controler
    function PhoneDetailController($routeParams, Phone) {

        var self = this;

        // start the timer and labelize it
        BOOMR.plugins.RT.startTimer("t_angular");

        self.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {

          self.setImage(phone.images[0]);


          // stop the timer and add labelize it
          BOOMR.plugins.RT.endTimer("t_angular");


        });
    })
    ...

Don't forget to fire the beacon somewhere after the timer.

    // At the end of your main controler, when your page is loaded
    BOOMR.page_ready();
    ...
    "t_page":387,
    "RT":{
        "t_domloaded": 230,
        "t_angular": 23
    },
    ...

Single-Page application monitoring

Actually, we only test this with angular. Please feel free to create an issue if you're facing any troubles.

To use Boomerang and Logmatic with Angular, you need set both Boomerang and Angular. Get sources from the dist/boomerang-angular directory, or build your own. Then, declare initialize the plugin right into init method:

BOOMR.init({
  // AngularJS
  Angular: {
    enabled: true
  },
  autorun: false,
  // Disable XHR instrumentation as this is auto-enabled by the SPA-plugins
  instrument_xhr: false
});

Then, in your angular bootstrap script add the following code

  // This block enable RUM for angular
  .run(['$rootScope', function ($rootScope) {
      // If boomerang is loaded to late to watch the first route change happen
      // toggle hadRouteChange to true using the routeChangeStart callback.
      // This will tell the plugin to fire a beacon immediately as it gets
      // initialized and not wait for a routeChange event.
      var hadRouteChange = false;
      $rootScope.$on("$routeChangeStart", function () {
        hadRouteChange = true;
      });
      function hookAngularBoomerang() {

        if (window.BOOMR && BOOMR.version) {
          if (BOOMR.plugins && BOOMR.plugins.Angular) {
            // pass your $rootScope object and the aforementioned hadRoueChange variable to
            // the hook to both make sure we are listening for route changes and check whether
            // or not we we're on time
            BOOMR.plugins.Angular.hook($rootScope, hadRouteChange);
          }
          return true;
        }
      }

      // If we hooked in correctly we would return true if not we wait for the onBoomerangLoaded event
      // to fire and try again as we can be sure then that Boomerang has arrived in the page
      if (!hookAngularBoomerang()) {
        if (document.addEventListener) {
          document.addEventListener("onBoomerangLoaded", hookAngularBoomerang);
        } else if (document.attachEvent) {
          document.attachEvent("onpropertychange", function (e) {
            e = e || window.event;
            if (e && e.propertyName === "onBoomerangLoaded") {
              hookAngularBoomerang();
            }
          });
        }
      }
    }]
  )

Blog article

If you want to learn more about this topic you should consult some of our blog article:

Javascript - Real User Monitoring (RUM)

Client-side JavaScript logging library for Logmatic.io allows you to send log entries to Logmatic.io directly from web browsers or other JS clients.