Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
vkbandi opened this issue Nov 6, 2023 · 2 comments
Open

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

vkbandi opened this issue Nov 6, 2023 · 2 comments

Comments

@vkbandi
Copy link

vkbandi commented Nov 6, 2023 •
edited
Loading

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
Copy link

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 @

boomerang/plugins/auto-xhr.js

Line 1393 in c0cbec6

if (node._bmr && typeof node._bmr.res === "number" && node._bmr.end[node._bmr.res]) {
(delete lines 1393-1395) and see if that works for you.

@querymetrics
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vkbandi @querymetrics