sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

createWidget and feedbackIntegration missbehavior with triggerLabel?!

Open Nowocyn opened this issue 9 months ago • 1 comments

Is there an existing issue for this?

  • [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
  • [X] I have reviewed the documentation https://docs.sentry.io/
  • [X] 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.4.0

Framework Version

Vue 3.4.11

Link to Sentry event

No response

SDK Setup

window.feedback = Sentry.feedbackIntegration({
  // Additional SDK configuration goes in here, for example:
  colorScheme: 'light',
  autoInject: false,
  triggerLabel: 'Test this button!'
})
Sentry.init({
  app,
  dsn: OWN_DSN,
  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration(), window.feedback],
  tracesSampleRate: 1.0, 
  tracePropagationTargets: ['localhost', /^https:\/\/([a-zA-Z]*\.)+localhost\.io\/api/],
  replaysSessionSampleRate: 0.1, 
  replaysOnErrorSampleRate: 1.0,
  maxBreadcrumbs: 10,
  environment: process.env.NODE_ENV
})

Steps to Reproduce

  1. Init Sentry inside main.js and add feedbackIntegration including setting it up for access through global variable window
  2. Manual inject the feedbackwidget into a page through a vue componten
  3. Try to change the triggerLabel within the createWidget function.

Vue Option-Component:

this.feedbackWidget = window.feedback.createWidget({
      useSentryUser: {
        name: 'fullName',
        email: 'email'
      },
      triggerLabel: this.$t('sentry.triggerLabel')
      formTitle: this.$t('sentry.formTitle'),
      submitButtonLabel: this.$t('sentry.submitButtonLabel'),
      cancelButtonLabel: this.$t('sentry.cancelButtonLabel'),
      confirmButtonLabel: this.$t('sentry.confirmButtonLabel'),
      addScreenshotButtonLabel: this.$t('sentry.addScreenshotButtonLabel'),
      removeScreenshotButtonLabel: this.$t('sentry.removeScreenshotButtonLabel'),
      nameLabel: this.$t('sentry.nameLabel'),
      namePlaceholder: this.$t('sentry.namePlaceholder'),
      emailLabel: this.$t('sentry.emailLabel'),
      emailPlaceholder: this.$t('sentry.emailPlaceholder'),
      isRequiredLabel: this.$t('sentry.isRequiredLabel'),
      messageLabel: this.$t('sentry.messageLabel'),
      messagePlaceholder: this.$t('sentry.messagePlaceholder'),
      successMessageText: this.$t('sentry.successMessageText'),
      buttonLabel: this.$t('sentry.buttonLabel')
    })
    this.feedbackWidget.appendToDom()

Expected Result

The "Report a bug"-Button should show the string of the triggerLabel like all other labels get localized through i18n. i18n shows correct string value for the request localized string inside the console.

Actual Result

addScreenshotButtonLabel and everything else will change based on the value of i18n but triggerLabel don't get affected like the other labels within the createWidget function.

Changing triggerLabel inside the options on the setup of Sentry is working. We try to make it a little bit more flexible and give a option-object to createWidget with changed texts inside it and it don't behave the same like the option-object for Sentry.feedbackIntegration(options) with changed texts inside it.

options = {
  triggerLabel: 'Fehler melden'
  formTitle: 'Fehler melden'
}

// used here:
Sentry.feedbackIntegration(options)
// -> Button-Label: 'Fehler melden'
// -> Form-Title: 'Fehler melden'

//used here:

const feedback = Sentry.feedbackIntegration({
  autoInject: false,
})
const widget = feedback.createWidget(options)
widget.appendToDom();
// -> Button-Label: 'Report a bug'
// -> Form-Title: 'Fehler melden'

https://docs.sentry.io/platforms/javascript/guides/vue/user-feedback/configuration/#text-customization don't work for both Functions.

Nowocyn avatar May 27 '24 09:05 Nowocyn