[User Feedback] Feedback button is not attached to DOM, when it is initialized while DOCUMENT is still loading

[jaspreet57]

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

8.18.0

Framework Version

2.6.12

Link to Sentry event

No response

SDK Setup/Reproduction Example

import Vue from 'vue'
import * as Sentry from '@sentry/vue'

Sentry.init({
  Vue,
  dsn: ...,
  release: ...,

  replaysSessionSampleRate: 0.01,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
      mask: ['.sentry-mask, [data-sentry-mask]']
    }),
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: 'system',
    })
  ]
})

It is a basic setup. Only difference here is that I am using Nuxt, in which when Sentry.init is called, during that time
DOCUMENT.readyState is still equal to 'loading'.

And I have already found that there is a Bug in packages/feedback/src/core/integration.ts. And bug is that appendToDom method is not called.

Fix will be : (I tested it already and it is working)

Steps to Reproduce

1. Add @sentry/vue in nuxt (vue) app.
2. Use it as a plugin in Nuxt.
3. Start the app

Expected Result

User Feedback button should be visible in the application regardless of when it is initialized.

Actual Result

User Feedback button is not visible.

[andreiborza]

Hello @jaspreet57, thanks for filing this and providing how to fix it :)

Is this something you maybe would like to contribute yourself via a PR? If not, we'd happily do it, just let us know.

[jaspreet57]

Thanks @andreiborza for a quick reply. Yes I am working on it. I will try to raise a PR soon, if I am able to meet the contribution requirements and pass the test cases. Else I will let you know by EOD.

[andreiborza]

@jaspreet57 great! Feel free to ask for help or skip parts you can't figure out.

[jaspreet57]

@andreiborza I have raised a PR.

This line is not covered by any of the existing unit test cases. I guess this line will be covered in e2e or browser-integration-tests. I couldn't run e2e tests yet.

can I skip test cases if sentry team can write that later? I need this fix sooner in my Nuxt project.

[andreiborza]

@jaspreet57 thanks, taking a look!