Saved scroll position not being updated correctly with @sentry/vue@9

[ramonwenger]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

9.4.0 (broken) / 8.55.0 (working)

Framework Version

Vue 3.5.13 (current)

Link to Sentry event

No response

Reproduction Example/SDK Setup

Working example without sentry:
https://github.com/ramonwenger/sentry-scroll-bug/tree/without-sentry
Working example with sentry@8:
https://github.com/ramonwenger/sentry-scroll-bug/tree/sentry-v8
Broken example with sentry@9:
https://github.com/ramonwenger/sentry-scroll-bug/tree/sentry-v9

Sentry is being called as follows (in the two examples that use the package):

import "./assets/main.css";
import * as Sentry from "@sentry/vue";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

Sentry.init({
  app,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

app.use(router);

app.mount("#app");

The code that breaks is found inside router/index.ts, specifically this part:

  scrollBehavior(to, from, savedPosition) {
    console.log(savedPosition);
    if (savedPosition) {
      console.log("savedPosition", savedPosition);
      return savedPosition;
    }
    return { top: 0 };
  },

The Vue pages are just the default pages from the create-vue template, adjusted for one page to be really long (so it can be scrolled down), with a router-link on the bottom to get to the second page.

Steps to Reproduce

1. Run the demo inside the repo with npm install and then npm run dev.
2. Visit localhost:5173 in the browser
3. (Optionally:) Open the dev tools
4. Scroll down on the page that says "A very long page" at the top, until you see the link "Other Page link", and click it
5. On the "This is an about page", click your browsers 'back' button

Expected Result

1. The page should retain the scroll position from before clicking the link
2. The console should say something along the lines of savedPosition { left: 0, top: 838 }

Actual Result

1. The page goes to the scroll position of the initial page load (usually 0,0, but can be something else if the browser was reloaded further down the page)
2. The console says savedPosition { left: 0, top: 0 }

[ramonwenger]

To add to this: This seems to be broken from @sentry/vue version 9.0.0 on, so it happened some time between 8.55 and 9.0.0

[AbhiPrasad]

@ramonwenger could you try this with 9.5.0 which we just released? https://github.com/getsentry/sentry-javascript/releases/tag/9.5.0

We fixed a bug with the history API that could be the root cause for this.

[ramonwenger]

Thank you @AbhiPrasad

I tried again with 9.5.0 and the issue seems to have been resolved with the fix you mentioned.