search

akamai / boomerang

End user oriented web performance testing and beaconing
http://akamai.github.io/boomerang/
Other
1.86k stars 292 forks source link

SPA beacon is blocked if link href value is updated after soft navigation #351

Open vkbandi opened 10 months ago

vkbandi commented 10 months ago

SPA beacon is blocked if the href value of a existing link element is updated after route change, the following code will aid in reproducing the issue.

If we replace the example.com with any working domain, we can observe that on route change a spa beacon is not fired, on subsequent route changes spa beacon for the previous route change is fired and the t_done value is reported as the total time between the two route change events. So if we trigger the first route change by clicking on the example link and wait for 30 seconds and then change the route again by clicking on the sample link, the on sample page load the spa beacon for example is fired with t_done value as 30 seconds.

I have debugged and found that the pending_events in autoxhr plugin, for the css resource is never cleared in this scenario, this is blocking the spa beacon from firing.

Issue also exists if the href value for the link element is replaced with same value

<!doctype html>
<html>
<head>
    <title>Boomr multiple load test page</title>
    <script src="https://example.com/boomerang-default-spa.js"></script>
    <link id="css-link" rel="stylesheet" href="https://example.com/global.css">
</head>

<body>
    <div>
        <a href="javascript:changeRoute('example')">Example</a>
    </div>
    <div>
        <a href="javascript:changeRoute('sample')">Sample</a>
    </div>
    <script>
        // simulate spa soft navigation  
        function changeRoute(routeName) {
            const state = { 'page_id': 1, 'user_id': 5 };
            const url = routeName
            history.pushState(state, '', url);

            var cssLink= document.getElementById("css-link");
            cssLink.href = "https://example.com/styles.css";
        }

        // Boomerang init
        (function () {
            if (window.BOOMR) {
                var appId = 'test_app_id';
                var beaconUrl = 'https://example.com/api/beacon';

                BOOMR.init({
                    beacon_url: beaconUrl,
                    applicationInfo: {
                        getAppId: function getAppId() {
                            return appId;
                        },
                        getUserObj: function getUserObj() {
                            return {
                                data: "some data"
                            };
                        }
                    }
                });
            }
        })();
    </script>
</body>
</html>
querymetrics commented 9 months ago

Hi @vkbandi, thanks for the report. We have a fix in testing and will be back-ported here once complete. In the meantime you can delete the if block @ https://github.com/akamai/boomerang/blob/c0cbec6da22c38733fef2a494104b4816b956fea/plugins/auto-xhr.js#L1393 (delete lines 1393-1395) and see if that works for you.

querymetrics commented 9 months ago

My proposed fix above might not help. It was meant to fix A element href changes. I thought that your code might hit the same bug but it does not. It looks like Chrome doesn't fire a load event when a LINK href changes, we'll investigate further.