Vue Error that is detected in Issue not propagated/visible in Replay under Errors tab

[isBrainDed]

Environment

self-hosted (https://develop.sentry.dev/self-hosted/)

Steps to Reproduce

1. Create a basic Vue3 project using npm create vue@latest ( Use "Yes" when it asks you for options )
2. Install sentry using the standard recommended config and don't use the tunnel ( Happens on Tunnel as well )
3. Change code inside App.vue. Replace script and template with this to create a simple error on click. ( something should throw an error inside updateBar() )

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';
const message = ref("WelcomeMessage");

function updateBar() {
  message.value = new Date().toDateString();
  const response = fetch("https://this-is-error-now.com");
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <h1>{{ message }}</h1>
      <button @click="updateBar">TestError</button>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

4. Check Sentry Issues and Sentry Replay

Expected Result

1. Sentry Issues -> New Issue is opened
2. Sentry Replays -> New replay is created with the TypeError visible on the Replay timeline and inside the "Error" tab

Actual Result

1. New Issue gets created
   
2. Replay gets created and Error tab is empty
   
3. Trace with error exists
   

Product Area

Replays

Link

No response

DSN

No response

Version

24.4.1

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-replays for triage ⏲️

[ryan953]

Related to #70242

[isBrainDed]

Should I keep the session open for multiple hours to see if at some point the error is reported properly? Anything required from me or just wait for the other issue to be resolved?

[bruno-garcia]

is the error happening before Sentry replay is initialized? I don't understand why the error happened before the replay got recorded.

Could you please try this on SaaS? You could use a free account. Then with a link to the replay/error in Sentry as well as the example code, we can debug this better

[isBrainDed]

Hello, I have tested it on SaaS and it seems that the Error is being seen in the replays there.
Issue: https://isbrainded.sentry.io/issues/218501/events/82b516c155a64eb181193a92c802e004/
Replay: https://isbrainded.sentry.io/replays/e8d33e70c59f45a4a60327286fa5a0c9/?referrer=%2Freplays%2F%3AreplaySlug%2F&t=0&t_main=errors

I have created it again on Self Hosted Sentry and I waited to make sure that the replay was created in the Network tab and then triggered the error.

What I did notice is that in self-hosted the Trace is not a proper event in the breadcrumbs, I cant click on it, instead it directly links me to the Issue, where in SaaS I can expand it
Self-hosted:

SaaS:

I have managed to get the errors popup twice somehow, but it was always for the previous replay session and its not consistent. Each of the replays I triggered the error

I managed to recreate this on Self-hosted.

1st recreation: The error is only propagated to replay when a new session is started by closing the browser and starting it again, waiting 30 seconds or so and trigger few navigations, then trigger the error. At that point, the error will be shown in the previous Replay but not the current one. To get it in the current one you have to repeat it

2nd recreation: Start a new session by opening the browser and navigating to the website. Trigger some navigations then trigger the error by pressing the button and trigger some navigations for more data. Refresh the page, trigger some navigations and then again, trigger the error. Once you Refresh the page and trigger the error for the 2nd time, the 1st error will be shown in the Replay. To see the 2nd error, Refresh the page and trigger again. This replay on SaaS shows this recreation: https://isbrainded.sentry.io/replays/d2cddd341664480cace9c41e442258c7/?query=&referrer=%2Freplays%2F%3AreplaySlug%2F&statsPeriod=14d&t_main=errors&yAxis=count%28%29&t=0 2 Errors are logged here instantly in SaaS, but in Self-hosted only the 1st one would be logged after 2nd error is triggered

It seems that Self-hosted is always one error behind in

[isBrainDed]

Sentry.init({
    app,
    dsn: "REMOVED",
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration(),
    ],

    trackComponents: true,
    // Performance Monitoring
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
    // Session Replay
    replaysSessionSampleRate: 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
  });

This is the Init that I am using

[bruno-garcia]

if this only happens on self hosted we had a bug that was fixed but got out in this last release. Could you update sentry to the latest commit?

[isBrainDed]

I will update my local instance in the next 24 hours

[isBrainDed]

I have tried on Sentry 24.4.2 and the scenario is still the same.
If you want me to go on specific commit, let me know the exact commit

[bruno-garcia]

Sorry but I should have asked, what SDK version are you on?

[isBrainDed]

"dependencies": {
"@sentry/vue": "^7.112.2",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},

[isBrainDed]

Updated to
"dependencies": {
"@sentry/vue": "^8.0.0",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
Same issue persists as well

[bruno-garcia]

OK to summarize it's not happening on SaaS. But on even the latest self hosted, on any SDK version it happens. I'm getting lost here it seems like something self-hosted-only issue. @JoshFerge any ideas who is the ideal person to give any insight here? Could ping the dev infra folks (who recently too over self hosted) but before that maybe you have an idea what could be going on?

[isBrainDed]

Let me know if you need any logs from any of the containers and how to collect them, I can submit any of it.