Beta SDK

User Feedback Widget

The User Feedback Widget offers many customization options, and if the available options are insufficient, you can use your own UI. The following image shows which elements are customizable. The configuration keys on the left of the image correspond to text customization, while the ones on the right side are for theme customizations.

General

The following options can be configured for the integration in feedbackIntegration({}):

User and Form

By default, the Feedback integration will attempt to fill in the name and email fields if you've set a user context via Sentry.setUser(). The email and name fields are expected to be email and username. Below is an example configuration with non-default user fields:

Sentry.setUser({
  email: 'foo@example.com',
  fullName: 'Jane Doe',
});

feedbackIntegration({
  useSentryUser: {
    email: 'email',
    name: 'fullName',
  },
});

Text Customization

Most text that you see in the default Feedback widget can be customized.

Example of customization:

feedbackIntegration({
  buttonLabel: 'Feedback',
  submitButtonLabel: 'Send Feedback',
  formTitle: 'Send Feedback',
});

Theme Customization

Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property id="sentry-feedback, meaning you can use the #sentry-feedback selector to define CSS variables to override.

Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration:

feedbackIntegration({
  themeLight: {
    background: '#cccccc',
  },
});

Or the same example as above, but using the CSS variables method instead:

#sentry-feedback {
  --background: #cccccc;
}

Additional UI Customization

These are additional CSS variables that can be overridden, similar to the theme customization above. They're not supported in the constructor.

Event Callbacks

Because it’s sometimes useful to know when a user started interacting with the feedback form, we've made it possible for you to add custom logging, or start and stop background timers on the page that tell you when the user is done.

Pass these callbacks when you initialize the Feedback integration:

feedbackIntegration({
  onFormOpen: () => {},
  onFormClose: () => {},
  onSubmitSuccess: () => {},
  onSubmitError: () => {},
});

Bring Your Own Button

You can use your own button instead of the default injected button to trigger the form being displayed, by calling feedback.attachTo() to have the SDK attach a click listener to your button. You can also supply the same customization options that the constructor accepts (for example, for text labels and colors).

const feedback = feedbackIntegration({
  // Disable injecting the default widget
  autoInject: false,
});

feedback.attachTo(document.querySelector('#your-button'), {
  formTitle: 'Report a Bug!',
});

Alternatively, you can call feedback.openDialog():

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={() => feedback.openDialog()}>
      Give me feedback
    </button>
  );
}

Bring Your Own Widget

You can also use your own UI components to gather feedback and pass the feedback data object to the sendFeedback() function. The sendFeedback function accepts two parameters:

• A JavaScript object with a required message property and also optional name and email properties, or a FormData instance with the same properties.
• An optional "options" object.

Sentry.sendFeedback(
  {
    name: 'Jane Doe', // optional
    email: 'email@example.org', // optional
    message: 'This is an example feedback', // required
  },
  {
    includeReplay: true, // optional
  }
);

Here's a simple example:

<form id="my-feedback-form">
  <input name="name" />
  <input name="email" />
  <textarea name="message" placeholder="What's the issue?" />
</form>

Crash-Report Modal

You can customize the Crash-Report modal to your organization's needs, for example, for localization purposes. All options can be passed through the Sentry.showReportDialog call.

The optional callback onLoad will be called when users see the widget. You can use this to run custom logic, for example to log an analytics event:

Sentry.showReportDialog({
  // ...
  onLoad() {
    // Log an event to amplitude when the report dialog opens
    amplitude.logEvent('report_dialog_seen');
  },
});

The optional callback onClose will be called when users close the widget. You can use this to run custom logic, for example to reload the page:

Requires JS SDK version v7.82.0 or higher.

Sentry.showReportDialog({
  // ...
  onClose() {
    // Refresh the page after the user closes the report dialog
    location.reload();
  },
});