Repository navigation
How to get the typed Feedback integration? #10941
Description
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/browser
SDK Version
@sentry/nextjs 7.105.0
Framework Version
18.2.0
Link to Sentry event
No response
SDK Setup
import * as Sentry from '@sentry/nextjs';
const feedback = Sentry.feedbackIntegration({
autoInject: false,
colorScheme: 'light',
buttonLabel: 'Give Feedback',
messagePlaceholder: '',
submitButtonLabel: 'Send Feedback',
formTitle: 'Give Feedback',
showBranding: false,
isEmailRequired: false,
submitBackground: 'rgba(72, 16, 193, 1)',
submitBackgroundHover: 'rgb(172, 152, 254, 1)',
submitBorder: 'rgb(172, 152, 254, 1)',
fontFamily: 'Inter',
showEmail: false,
showName: false,
});
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
ignoreErrors: ['ResizeObserver loop completed with undelivered notifications'],
integrations: [feedback],
});
### Steps to Reproduce
Create a custom component as per the documentation (doc is not up to date with latest change of interface from the SDK)
```jsx
import { BrowserClient, getClient } from '@sentry/react';
const SentryFeedbackButton = () => {
const client = getClient<BrowserClient>();
const feedback = client?.getIntegrationByName('Feedback');
if (!feedback) {
return null;
}
return(
<button type="button" onClick={() => feedback.openDialog()}>
Give me feedback
</button>,
);
};
export default SentryFeedbackButton;
Expected Result
- The documentation should be up to date.
- The method
getIntegrationByNameshould return the appropriateIntegrationtype with its own methods defined.
Actual Result
Not sure how to import the type FeedbackWidget.
The error are:
Property 'return' does not exist on type 'Integration'.
Property 'openDialog' does not exist on type 'Integration'.
Metadata
Metadata
Assignees
Projects
- Status
Activity
mydea commentedon Mar 7, 2024
Hello,
I guess you are referring to this: https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#bring-your-own-button - is that correct?
We need to update that docs snippet, you are absolutely right. Currently, the way to do this is as follows:
Then you have a typed instance of this. We appreciate though that this is not really ideal, we'll add a better utility method for this case, so you can do something like
Sentry.getFeedbackIntegration()or something along these lines!AdrienFromToulouse commentedon Mar 7, 2024
Hi @mydea , you are absolutely right! I was missing
ReturnType<typeof feedbackIntegration>hence running around like a headless chicken trying to make typescript understand the right type in order to access the methods.Works like a charm now.
My knowledge of typescript is not super high and I only do kind of basic things. Never used the
ReturnType<>before. I have learnt something today!Cheers,
[-]User feedback widget[/-][+]How to get the typed `Feedback` integration?[/+]ryan953 commentedon Apr 2, 2024
I'm going to close this issue,
ReturnType<typeof feedbackIntegration>is a good solution for the short term. To avoid confusion in the future #11331 has been merged, and will be released as part of the changes to Feedback in SDK v8.That PR added a function
getFeedback()which returns (no one will have to type this anymore)ReturnType<typeof feedbackIntegration> | undefined. Instead you'll be able to do:As usual, replace
@sentry/browserwith@sentry/vue,@sentry/react, or any of the many framework specific packages that wrap the main browser package.