Using boomerang in angularjs application

[EfratGordon]

I'm trying to use boomerang in my AngularJs app. I put an alert in the "before_beacon" event and I see it happens only in the first load and not in soft navigation. I used the angular, spa and auto-xhr plugins.

My code:

BOOMR.init({
        beacon_url: "https://my_url/",
        instrument_xhr: true,
        autorun: false,
        ResourceTiming: {
            enabled: true,
            clearOnBeacon: true
        }
    });

BOOMR.subscribe('before_beacon', function(o) {
        alert("This page took " + o.t_done + "ms to load");
});

angular.module('myApp').run(["$rootScope", function($rootScope) {
    var hadRouteChange = false;

    // The following listener is required if you're using ng-router
    $rootScope.$on("$routeChangeStart", function() {
        hadRouteChange = true;
    });

    // The following listener is required if you're using ui-router
    $rootScope.$on("$stateChangeStart", 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();
                }
            });
        }
    }}])

[querymetrics]

Hi @EfratGordon, do you have a test site url that you could share? Which version of Angular?

[EfratGordon]

Thank's for your answer. I found the problem: the plugins were loaded in a wrong order. But now I have another issue: I get negative values for t_done in some scenarios. The version is latest from git. I'm using AngularJS 1.6.

[querymetrics]

@EfratGordon ,Can you reproduce the issue? Does it happen in a browser version in particular (like an older browser without NavTiming)? During a hard or soft spa navigation? Is t_page, t_resp or any other param value negative? Is nt_bad on the beacon?

[nicjansma]

Hi @EfratGordon, any feedback? If not, we can close this issue out.

Also, can you clarify what order you had the plugins before, and what order ended up working? I can update the documentation to make sure it's clear for everyone else.

[quintenp]

I found that autoxhr needs to load before spa which needs to load before angular. This can easy be reproduced in a sandbox

[nicjansma]

@quintenp @EfratGordon I've created an update to make the load order for SPA plugins more specified: https://github.com/akamai/boomerang/pull/223

[nicjansma]

@EfratGordon please let us know if there are any additional details, otherwise we'll close this for now.

Also, you may want to check the latest changes in https://github.com/akamai/boomerang/pull/230 as it has a few fixes for SPAs.