sentry-javascript
sentry-javascript copied to clipboard
createWidget and feedbackIntegration missbehavior with triggerLabel?!
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
- Init Sentry inside main.js and add
feedbackIntegration
including setting it up for access through global variablewindow
- Manual inject the feedbackwidget into a page through a vue componten
- Try to change the
triggerLabel
within thecreateWidget
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.