How to get the typed `Feedback` integration?

[AdrienFromToulouse]

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 getIntegrationByName should return the appropriate Integration type 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'.

[mydea]

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:

const feedback = getClient()?.getIntegrationByName<ReturnType<typeof feedbackIntegration>>('Feedback');

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]

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,