User Feedback V8 - Documentation seems OFF

[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/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; }'

[pquerner]

Sorry to hijack this thread, but I think it fits.
The migration docs have this:

The v8 version of the JavaScript SDK requires a self-hosted version of Sentry TBD or higher (Will be chosen once first stable release of 8.x comes out).

which I think should be changed now that 8 is out there. :)

[AdrienFromToulouse]

@pquerner not sure to understand fully the subtlety - I am a Sentry Saas (sentry.io) user.

[pquerner]

Does not matter. It affects the v8 documentation (in my case the migration one).

[mydea]

Hey, sorry about both of these, the docs were not yet fully updated, but should be correct now:

For user feedback, the docs have been updated to show the new APIs, sorry again for the confusion: https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#general

Self hosted needs to be 24.4.2 or up to support all feedback functionality.

[AdrienFromToulouse]

Hey, sorry about both of these, the docs were not yet fully updated, but should be correct now:

For user feedback, the docs have been updated to show the new APIs, sorry again for the confusion: https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#general

Self hosted needs to be 24.4.2 or up to support all feedback functionality.

Hi,

Many thanks for the update! However I think you where using another version? the show() for instance does not exist so here what works for me (missing async also in the example snippet)

onClick={async () => {
        const form = await feedback.createForm({});
        form.appendToDom();
        form.open();
      }}

Genuine question, was it mandatory to "complexify" the API? i.e before feedback.openDialog() was great! why not doing something like await feedback.openDialog({}) with the same config override as optional? the arg is required in the createForm should be made optional no?

By the way awesome feature that is the possibility to add screenshot 👍

Cheers,

[ryan953]

@AdrienFromToulouse i'll double check the docs around show(), and config override args to createForm or anything should be optional, so i'll look into that too. It might be a typescript hint problem. Thanks for testing it out to quick! I'll followup with what I find.

One of the big drivers for making the api more complex is that we wanted to code-split the form code from the main SDK to save bundle size whenever the page loads but users don't click to interact with the button. So I wanted to make the "await load dialog" part separate from the "show dialog" call, incase the network is down, or things are slow and you wanna have that control. It's been a tradeoff for sure, and a it was a huge change from the beta code too... but we're hopeing it'll payoff because it allows us a little more flexibility to add features without numbers on bundlephobia getting out of control!