🐛 RUM Custom user actions have wrong `@view.id` after using the Back button

[aethr]

trafficstars

Package versions

    "@datadog/browser-logs": "^4.28.1",
    "@datadog/browser-rum-slim": "^4.28.1",

Describe the bug RUM User Actions appear to have the wrong "@view.id" (which means they display with the wrong View name, etc) when the action triggered by a route change where the user hit the "Back" button in their browser.

To Reproduce Steps to reproduce the behavior:

1. Create a custom RUM event that's sent when the route has changed

• in our case, a vue project using vue-router that watches route.params and sends an event when they change

2. Trigger the event by navigating using a link or router.push in the app

• in this case, custom events have the correct view.id and display correctly in the RUM interface

3. Hit the Back button in the browser, triggering another route change

• in this case, the custom event is fired using the view.id from before the Back button was pressed, causing the RUM interface to present the wrong View name, etc

Expected behavior The View name and other attributes should match the value of window.location at the time the event was sent.

Additional information Our app has some routes like:

• /org/:orgId/*
• /site/:siteId/*
• /terms-of-use

When a user navigates to an org or site route, we send a custom event like:

• org selected
• site selected We also set some custom global context that will be sent with every RUM resource/event while they are "within" that part of the app.

Then on non-org and site routes, we want to clear that information. We don't send a RUM event at that time (although I added one for some debug purposes to ensure the global context was being cleared). During normal navigation, this looks like:

These events read from bottom to top, and you can see "SPA Route change /org/?" is correlated with a "Custom user action org selected" and "SPA Route change /terms-of-use" is correlated with "Custom user action [DEBUG] site context cleared". These events are working and displaying correctly.

When the Back button is used, we get this: In this screenshot, the user behavior was:

• visit the route /org/?/pickup/list
• visit the Terms of Use page (start of screenshot)
  • [DEBUG] event happens correctly and is "on page /terms-of-use"
• hit the Back button to return to /org/?/pickup/list
  • we see a Route Change event correctly
  • we then see "Custom user action org selected on page /terms-of-use"
    • this event should be on "page /org/?/pickup/list"
    • instead it's correlated with one of the Terms of Use page views: https://app.datadoghq.com/rum/explorer?query=%40context.usr.uuid%3Aa6654fc1-7c5b-5da6-b38b-3b564e27e86e%20%40type%3Aaction&cols=&event=AgAAAYWdsEvA3BMUIwAAAAAAAAAYAAAAAEFZV2RzRXZBQUFEVlhIeFZtR2lFaXM4agAAACQAAAAAMDE4NTllMWYtOTE3YS00YTcwLTlkODgtNDg2MjFiYjYxMmQy&spanID=6379190270171487975&viz=stream&from_ts=1673311735810&to_ts=1673484535810&live=true
    • debugging console.log prior to sending this event confirms the window.location was already set to /org/?/pickup/list

[BenoitZugmeyer]

Interesting, thank you for the thorough report. On top of my head, it might be because we subscribe to the popstate event after the Vue router, and thus the RUM View is created after the application reacted to the URL change. We'll investigate this issue.

[BenoitZugmeyer]

Sorry for the late answer here. We discussed about this issue and it is probably because the popstate event listener of the Browser SDK is triggered after the popstate eventlistener of the Vue router (as mentioned in the comment above). To work around this, make sure to initialize the SDK before the Vue router.

I'll close this issue for now, feel free to reopen if it's still an issue.