Spa/Spa_hard not sending on stateChange

[quintenp]

Hi Team,

I am experiencing a really odd issue, for some reason boomerang is not firing spa/spa_hards on link based state changes for example if I click

<p><a ui-sref="home">Go to home</a></p>

I see that the state changes based on the console but boomerang does not send the actual spa beacon

boomerang.angular: [debug] 1: $stateChangeStart: [object Object]
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeSuccess: /
boomerang.js:1948 boomerang.angular: [debug] 1: $locationChangeStart: http://localhost/#/home

Is all I get, however if I change the url in the browser bar I do get teh spa/spa_hards

Any idea whats going on here?

[quintenp]

Is boomerang ment to send beacons on these types of state changes it seems so since when I debug it follows the exact same code path as the url change

[andreas-marschke]

Hey @quintenp !

Which plugins did you include in your Boomerang build?

Can you provide a minimal example of the observed issue? Either a page where we can observe the issue or minimal source here in the issue to test with would be great!

Thanks in advance!

[quintenp]

Console output

boomerang.js:1948 boomerang.rt: [debug] Click called with A
boomerang.js:1948 boomerang.rt: [debug] passing through
boomerang.js:1948 boomerang.rt: [debug] Setting cookie (timer=cl)
nu=http://localhost/
    cl=1507279209830
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeStart: [object Object]
boomerang.js:1948 boomerang.AutoXHR: [debug] Running filter: shouldExcludeXhr on URL: http://localhost/secondview.html
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeSuccess: /
boomerang.js:1948 boomerang.angular: [debug] 1: $locationChangeStart: http://localhost/#/secondview
boomerang.js:1948 boomerang.rt: [debug] Click called with A
boomerang.js:1948 boomerang.rt: [debug] passing through
boomerang.js:1948 boomerang.rt: [debug] Setting cookie (timer=cl)
nu=http://localhost/
    cl=1507279216644
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeStart: [object Object]
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeSuccess: /
boomerang.js:1948 boomerang.angular: [debug] 1: $locationChangeStart: http://localhost/#/home
boomerang.js:1948 boomerang.rt: [debug] Click called with A
boomerang.js:1948 boomerang.rt: [debug] passing through
boomerang.js:1948 boomerang.rt: [debug] Setting cookie (timer=cl)
nu=http://localhost/
    cl=1507279220685
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeStart: [object Object]
boomerang.js:1948 boomerang.angular: [debug] 1: $stateChangeSuccess: /
boomerang.js:1948 boomerang.angular: [debug] 1: $locationChangeStart: http://localhost/#/secondview
boomerang.js:1948 boomerang: [debug] Visibility changed from visible to hidden
boomerang.js:1948 boomerang: [debug] Visibility changed from hidden to visible

[quintenp]

@andreas-marschke https://quintenp.github.io/BoomTest/#/home https://github.com/quintenp/BoomTest

[andreas-marschke]

Cool thanks!

Something that springs out to me immediately is your Boomerang initialization:

window.BOOMR_config = {
            autorun: true,
            Angular: {
                enabled: true
            }
        };
        BOOMR.init({
            instrument_xhr: true,
            Errors: {
                sendAfterOnload: true
            },
            beacon_url: "http://localhost:9421/api/BoomerangHandler",
        });

Since init will run twice and in both cases try to configure the plugins it knows of and has configuration for, you can consolidate this into one, ie.:

        BOOMR.init({
            instrument_xhr: true,
            Errors: {
                sendAfterOnload: true
            },
            Angular: {
                enabled: true
            }
            beacon_url: "http://localhost:9421/api/BoomerangHandler",
        });

You won't need to override if you know that the page you're initializing on is consistent with what you configure it for. If you have a page that is static (ie. does not use a SPA) you can override the behaviour and it will work fine.

Since you're enabling Angular for the page, you shouldn't set autorun: true as this will mean the beacon will be sent when the page is loaded, not when the SPA is done. Infact it would then only send a SPA hard/soft once the next navigation happens.

Also the demo page you've set up does not include or didn't (for me) fetch boomerang.js, which is of course required to send a beacon in the first place.

Does this help?

[andreas-marschke]

And another thing: You don't need to include each plugin by itself via a <script>-tag instead just configure plugins.json with the "shopping-list" of plugins you wish to include in your build of boomerang and just build it. This will provide you with a minified and unminified version of boomerang in build. You'll need the tools to do this though. So running npm install and then grunt build is required and a NodeJS environment of course.

[quintenp]

@andreas-marschke That helps loads you can look here https://quintenp.github.io/BoomTest/#/home I updated it based on your recommendations. Usually I use the .min from the output of grunt clean build I just set it up in this manner so its easier to debug, but I realize I can just use the debug.js it concats

[quintenp]

@andreas-marschke I can see spa's firing now on each click thanks a million!

[andreas-marschke]

@quintenp Awesome, this looks almost right, the only thing missing now is that you'll need to set autorun: false in your config, otherwise you'll get a normal page load beacon instead of a SPA_HARD beacon and infact send 2 beacons as I can see in my browser(One for rt.start = navigation and one for http.initiator = spa_hard) that shouldn't happen.

[andreas-marschke]

@quintenp Anything else you'll need? Otherwise I'll close this issue then.

[quintenp]

@andreas-marschke I added autorun false I still see the navigation beacon though did I make a mistake there? Other than that I am happy thanks you have been a great help!

[quintenp]

@andreas-marschke actually no I only get the spa beacon on hard refresh now must have been a cache issue. Thanks for all the help