bugsnag-js icon indicating copy to clipboard operation
bugsnag-js copied to clipboard

Vue3: Two hits to sessions.bugsnag.com on each route change

Open bbotto-pdga opened this issue 3 years ago • 3 comments

Describe the bug

My team is in the process of upgrading from Vue 2 to Vue 3:

  • in our Vue 2 app, each time a route changes we see ONE post to session.bugsnag.com;
  • after upgrading to Vue 3, we see TWO posts to sessions.bugsnag.com.

Steps to reproduce

I've attached a small zip archive with reproduction code. Unzip it, install deps, then run the code:

unzip vue-bs-repro
cd vue-bs-repro
npm install

Update src/main.js with a valid API key on line 32.

Run the app:

npm run dev

Open http://localhost:3001/first-page in a browser. Note that each time a link is clicked in the app, there are two posts to sessions.bugsnag.com. Below is a screenshot that shows the network requests after opening the aforementioned link, then navigating one time using the link on the page: session-screenshot

If I recreate the same code in Vue 2, I see only one hit to session.bugsnag.com on each route change.

Environment

  • Bugsnag version: 7.16.1
  • Browser framework version (if any):
    • Vue: NOTE: The reproduction code is not using the @bugsnag/plugin-vue dependency, although it has it specified in package.json.
  • Server framework version (if any):
    • None/SPA
  • Browser version (e.g. chrome, safari):
  • Device (e.g. iphonex): vue-bs-repro.zip

bbotto-pdga avatar Mar 08 '22 00:03 bbotto-pdga

After digging in to this further, I don't think that this is a bug with Bugsnag. Sorry for the noise.

For the record, the new Vue Router (vue-router@4) does a replaceState and a pushState each time the route changes. (See lines 283 and 292.) As documented, Bugsnag's automatic session tracking is triggered on each call, so twice per navigation.

Vue 3's router differs from Vue 2's, which just does a pushState. (See line 61.)

bbotto-pdga avatar Mar 08 '22 15:03 bbotto-pdga

Hi @bbotto-pdga - thanks for bringing this to our attention.

Although this isn't strictly an issue with Bugsnag in the sense that bugsnag-js is behaving as documented and reports a new session whenever the URL changes via Vue router's pushState/replaceState events (as well as when the page loads), we're still going to investigate this to see if there's anything we can do to improve the behaviour in this area 👍

There's also a bit of discussion over at https://github.com/bugsnag/bugsnag-js/issues/1071 if you wanted to override the default behaviour with manual session tracking.

luke-belton avatar Mar 09 '22 14:03 luke-belton

Thanks @luke-belton. I read through #1071 prior to adding this issue and ended up going with manual session tracking. After reading up on the subject, I think we should have been using manual session tracking all along, even in Vue 2. For us, our Vue application is an SPA. We now start a single session when the SPA is loaded--no new sessions on route change.

bbotto-pdga avatar Mar 09 '22 15:03 bbotto-pdga