User Feedback V8 - Documentation seems OFF

[AdrienFromToulouse]

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/nextjs

SDK Version

8.0.0

Framework Version

18.3.1

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,
  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

Custom button working before v8

import { MegaphoneIcon } from '@heroicons/react/24/outline';
import * as Sentry from '@sentry/nextjs';
import React from 'react';
import { Button } from 'rsuite';

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

  if (!feedback) {
    return null;
  }

  return (
    <Button
      style={{ position: 'fixed', bottom: 0, right: 0, zIndex: 100 }}
      className="m-3 shadow-sm bg-white fw-bold"
      type="button"
      onClick={() => feedback.openDialog()}
    >
      <span>
        <MegaphoneIcon style={{ width: '22px' }} /> Give Feedback
      </span>
    </Button>
  );
};

export default SentryFeedbackButton;

After upgrading to v8 the following error appears:

Property 'openDialog' does not exist on type 'Integration & { attachTo(el: string | Element, optionOverrides: any): () => void; createForm(optionOverrides: any): Promise<FeedbackDialog>; createWidget(optionOverrides: any): any; remove(): void; }'

The documentation here, does not provide any upgrade path: https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/configuration/#bring-your-own-widget

confer Alternatively, you can call feedback.openDialog():

Cheers,

Expected Result

An up to date documentation precisely explaining how to instantiate a custom button with v8.

Actual Result

Property 'openDialog' does not exist on type 'Integration & { attachTo(el: string | Element, optionOverrides: any): () => void; createForm(optionOverrides: any): Promise<FeedbackDialog>; createWidget(optionOverrides: any): any; remove(): void; }'