boomerangJS for SPA with AngularJS - is it stable/working?

[luckykurhe]

I am trying to use boomerangJS for SPA built using AngularJS

using plugins: plugins/rt.js plugins/navtiming.js plugins/auto_xhr.js plugins/spa.js plugins/angular.js

with init

BOOMR.init({
    beacon_url: 'http://myValidDomaincom/test.gif',
    autorun: false,
    instrument_xhr: false
  });

Angular plugin is hooked using below code:

.run(['$rootScope', function($rootScope) {
var hadRouteChange = false;
$rootScope.$on("$routeChangeStart", function() {
    hadRouteChange = true;
});

function hookAngularBoomerang() {
    if (window.BOOMR && BOOMR.version) {
        if (BOOMR.plugins && BOOMR.plugins.Angular) {
            BOOMR.plugins.Angular.hook($rootScope, hadRouteChange);
        }
        return true;
    }
}

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();
            }
        });
    }
}
}])

And when first time page is loaded I trigger BOOMR.page_ready(); using JS

Now when I go through the flow which loads different views, I don't see any new beacons getting triggered

• Which function triggers a new beacon, after route change?
• Will boomerang trigger new beacons each time a new view is displayed on page ?
• Am I missing any configuration or code, to get it working ?
• or do I need to execute any more code from boomerang after routeChangeStart ?

debugging:
on page where I have included these boomerangJS, I can see (in dev console)

• BOOMR.plugins.AutoXHR, BOOMR.plugins.SPA, BOOMR.plugins.Angular are valid objects
• hookAngularBoomerang() from Angular .run hook also executed
• boomerang debug logs @https://gist.github.com/luckykurhe/87f9c00991dd0797d31f6e6dbabb66c9

[luckykurhe]

Can someone plz rpl on this question/issue:

• @bluesmoon : if you have an idea on this plugin, whats expected behavior

[luckykurhe]

@nicjansma ^^

[nicjansma]

@luckykurhe: When the Angular plugin is enabled, you shouldn't have to ever run BOOMR.page_ready(). When enabled, it takes over control of all page view sending. For example, when your visitor loads your page for the first time, it will either wait for a $routeChangeStart event to start monitoring, or if given hadRouteChange=true, send a page view beacon right away. We call this a SPA Hard Navigation.

The Angular plugin then listens for all future $routeChangeStart events, and once complete, fires a SPA Soft Navigation beacon.

You should be able to put a breakpoint on the SPA.route_change function which will get called once $routeChangeStart is fired. It then starts listening for all network fetches on the page to die down, and eventually MutationHandler.prototype.sendEvent will fire, which sends a beacon. MutationHandler.prototype.wait_for_node and MutationHandler.prototype.load_finished are the events that fire when a new resource to be monitored is added/completed.

[luckykurhe]

@nicjansma
you shouldn't have to ever run BOOMR.page_ready() - correct

You should be able to put a breakpoint on the SPA.route_change function which will get called once $routeChangeStart is fired - correct, this also works.

eventually MutationHandler.prototype.sendEvent will fire, which sends a beacon

• at this step, there seems to be some issue

few console logs:
boomerang.angular: [debug] 1: $routeChangeStart:
... here are few custom console logs
.... logs from MutationHandler.prototype.wait_for_node also gets executed

----------- start MutationHandler.prototype.sendEvent
------ No crumb, so try again after 5 seconds, i is 0
----------- start MutationHandler.prototype.sendEvent
----------- !ev || ev.complete condition failed, next will be ev value
Object {type: "spa", resource: Object, nodes_to_wait: 0, resources: Array[20], complete: true…}

Here ev.complete - value is true - so execution returns from function MutationHandler.prototype.sendEvent

[nicjansma]

@luckykurhe can you give it a try with this fix 7f58ca3

[luckykurhe]

ok let me try it. (btw I am not including restiming plugin)

[luckykurhe]

@nicjansma : wohooo.. at first run beacon calls are getting triggered for routeChanges.
I will go through more details to know what all data is captured.
thanks a lot.

[nicjansma]

@luckykurhe That's great to hear. Please let us know if you see any additional issues.

[luckykurhe]

@nicjansma :
#.1 when your visitor loads your page for the first time, it will either wait for a $routeChangeStart event to start monitoring,

• which means from first beacon itself, we get a spa view beaconCall (and beaconCall will wait for resources like imageLoad to complete).
• In this case beaconCall will NOT INCLUDE most of the navigationTiming params (those which usually gets triggered with regular pageView)

#.2 or if given hadRouteChange=true, send a page view beacon right away. We call this a SPA Hard Navigation

• if there are few resources (lets say images - which are loadingInProgress for given page, beaconCall will not wait for imageLoad to complete).
• But In this case beaconCall will INCLUDE most of the navigationTiming params (those which usually gets triggered with regular pageView)

So #.2, is happening (and will most likely happen) for async loading of boomerangJS (plz lmk if its incorrect)

Question/doubt:
Is this expected and correct understanding ?
Coz I am trying async loading, so few beaconCall (for view with pageLoad) will show timings that DOES NOT INCLUDE resourceLoad time and few of them (spaViews after firstTime load) will INCLUDE resourceLoad time.

[luckykurhe]

In brief, for first beacon: if its scenario
#.1 page navTiming data is lost (most of the params), but spaView t_done gives correct time
#.2 page navTiming data is collected (most of the params), but t_done is not correct time
is it expected/known? and if yes should be handled/considered accordingly while analyzing data
@nicjansma ^^

[nicjansma]

When the SPA plugins are active, for the hard-navigation (first load of the page), we use the following timestamps:

1. The beginning of the navigation is performance.timing.navigationStart (from NavigationTiming)
2. End the of the navigation is when the last of the static and dynamically injected content has been fetched from the page

For soft navigations (any interaction after the first load), we use similar timestamps:

1. The beginning of the navigation is whenever the navigation was started by interaction (click, $routeChangeStart, etc)
2. End the of the navigation is when the last of the dynamically injected content has been fetched from the page

Hope that helps explain things!