Late sentry initialization breaks HMR

[daugvinasr]

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

10.5.0

Framework Version

Vue 10.5.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

https://github.com/daugvinasr/sentry-vue

Steps to Reproduce

1. Make sure sentry init runs not on app launch. For example in my use case dsn config needs to be fetched.
2. Have some state in the app
3. Run sentry init
4. Try to edit a vue component. HMR will cause full reload and loss of state

Expected Result

If I delete everything related to sentry HRM works with no problems. So expect sentry to not break HMR.

Actual Result

Sentry init breaks HMR causing full reload and loss of state

HBbhsyI1.mp4

[linear]

JS-871 Late sentry initialization breaks HMR

[Lms24]

Hey @daugvinasr thanks for writing in! Quick heads-up: We're having an internal hackathon this week ("Hackweek"). Therefore, we'll likely only look at this next week in detail.

[s1gr1d]

Hy, I just tested your example and I'm not sure if you can call this "breaking" HMR as this is rather a feature of HMR. You can see this if you remove all Sentry code, export a function (that's maybe just logging something) from you main.ts and import this function in index.vue. You will see that the page also refreshes with a counter set to 0.

[daugvinasr]

Thanks @s1gr1d for taking the time to look at this. Could you give an example of the correct way to init sentry after fetching config (or waiting for any promise)? Currently still not sure what the best way to do this is and not break HRM in dev.