sentry/react feedback example for "Bring Your Own Button" doesn't compile

[chdsbd]

Core or SDK?

Platform/SDK

Which part? Which one?

React User Feedback Configuration

Description

In this code example, @sentry/react doesn't export Feedback in the latest SDK.

import { BrowserClient, Feedback, getClient } from "@sentry/react";

function MyFeedbackButton() {
  const client = getClient<BrowserClient>();
  const feedback = client?.getIntegration(Feedback);

  // Don't render custom feedback button if Feedback integration isn't installed
  if (!feedback) {
    return null;
  }

  return (
    <button
      type="button"
      onClick={async () => {
        const form = await feedback.createForm();
        form.appendToDom();
        form.open();
      }}
    >
      Give me feedback
    </button>
  );
}

Suggested Solution

import { BrowserClient, feedbackIntegration, getClient } from "@sentry/react";

type FeedbackIntegration = ReturnType<typeof feedbackIntegration>

function MyFeedbackButton() {
  const client = getClient<BrowserClient>();
  const feedback = client?.getIntegrationByName<FeedbackIntegration>('Feedback');

  // Don't render custom feedback button if Feedback integration isn't installed
  if (!feedback) {
    return null;
  }

  return (
    <button
      type="button"
      onClick={async () => {
        const form = await feedback.createForm();
        form.appendToDom();
        form.open();
      }}
    >
      Give me feedback
    </button>
  );
}

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[Stanzilla]

That results in this, which seems a bit wrong? But yes the current example just doesn't work.

[SheetalParanjpeKodiak]

Is there an update on this issue? I have had to use the workaround for custom UI as well.

[mydea]

The docs for this have been updated in the meanwhile, so I am closing this issue - please re-open if you still encounter this somewhere!