"Add a Screenshot" button in feedback throws an exception when clicked

[rjd22]

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.22.0

Framework Version

Vue 3.4.21

Link to Sentry event

No response

Reproduction Example/SDK Setup

System:
Arch Linux on Wayland (Add needed modules to make screenshots are installed and recording works fine)
Firefox (Lastest version)

Stack trace of error:

Uncaught (in promise) ReferenceError: h is not defined
    CropCorner ScreenshotEditor.tsx:341
    Preact 23
        q$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        M
        P$1
        z$1
        M
        P$1
        M
        w$1
        C$1
        promise callback*x$1
        setState
        __
    onClick Form.tsx:207
    Preact 32
        D$1
        A$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        z$1
        M
        P$1
        M
        P$1
        M
        B$1
    renderContent integration.tsx:66
    open integration.tsx:52
    handleClick2 integration.ts:245
    _attachTo integration.ts:247
    <anonymous> main.js:98

Config used:

  const feedback = Sentry.feedbackIntegration({
    autoInject: false,
    isNameRequired: true,
    isEmailRequired: true,
    showBranding: false,
    colorScheme: "system",
  });

  const feedbackButton = document.querySelector("#sentry-feedback");

  feedback.attachTo(feedbackButton);

  // Load sentry with feedback and recording
  Sentry.init({
    app,
    dsn: import.meta.env.VITE_SENTRY_DSN,
    release: import.meta.env.VITE_RELEASE_VERSION,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration(),
      feedback,
    ],
    trackComponents: true,
    tracesSampleRate: 0.01,
    replaysSessionSampleRate: 0.01,
    replaysOnErrorSampleRate: 1.0,
  });

Steps to Reproduce

1. Click on feedback-button to open feedback form
2. Click on "Add a screenshot" button

Expected Result

I except a screenshot being made of my screen

Actual Result

Error is thrown.

[chargome]

Hey @rjd22,

you will need to attach the button after mounting your app:

const app = createApp(App);

Sentry.init({
  app,
  dsn: "YOUR_DSN",
  integrations: [
    Sentry.feedbackIntegration({
      autoInject: false,
      isNameRequired: true,
      isEmailRequired: true,
      showBranding: false,
      colorScheme: "system",
    }),
  ],
});

app.mount("#app");

const feedback = Sentry.getFeedback();
const feedbackButton = document.querySelector("#sentry-feedback");
feedback?.attachTo(feedbackButton!);

[rjd22]

Thx! Everything is loading correctly now.