Set Up User Feedback

The User Feedback feature allows you to collect user feedback from anywhere inside your application at any time, without needing an error event to occur first.

Note that if you're using a self-hosted Sentry instance, you'll need to be on version 24.4.2 or higher in order to use the full functionality of the User Feedback feature. Lower versions may have limited functionality.

User Feedback Widget

The user feedback widget allows users to submit feedback from anywhere inside your application.

To collect user feedback from inside your application use the showFeedbackForm method.

import * as Sentry from "@sentry/react-native";

Sentry.showFeedbackForm();

To configure the form you can use the Sentry.feedbackIntegration({}) or add it to your Sentry initialization.

import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  integrations: [
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      styles: {
        submitButton: {
          backgroundColor: "#6a1b9a",
        },
      },
      namePlaceholder: "Fullname",
    }),
  ],
});

There are many options you can pass to the integration constructor. See the configuration documentation for more details.

Feedback Form Component

You can also integrate the FeedbackForm component manually in your app.

import { FeedbackForm } from "@sentry/react-native";

<FeedbackForm />;

For the full set of options you can pass to the FeedbackForm component see the configuration documentation.

User Feedback API

The user feedback API allows you to collect user feedback while utilizing your own UI. You can use the same programming language you have in your app to send user feedback. In this case, the SDK creates the HTTP request so you don't have to deal with posting data via HTTP.

Sentry pairs the feedback with the original event, giving you additional insight into issues. Sentry needs the eventId to be able to associate the user feedback to the corresponding event. For example, to get the eventId, you can use beforeSendor the return value of the method capturing an event.

import * as Sentry from "@sentry/react-native";
import { SendFeedbackParams } from "@sentry/react-native";

const sentryId = Sentry.captureMessage("My Message");
// OR: const sentryId = Sentry.lastEventId();

const userFeedback: SendFeedbackParams = {
  name: "John Doe",
  email: "john@doe.com",
  message: "Hello World!",
  associatedEventId: eventId, // Optional
};

Sentry.captureFeedback(userFeedback);

You can also attach further data to the feedback event by passing a hint as a second argument. This is similar to other capture methods:

Sentry.captureFeedback(
  { message: "I really like your App, thanks!" },
  {
    captureContext: {
      tags: { key: "value" },
    },
    attachments: [
      {
        filename: "hello.txt",
        data: "Hello, World!",
      },
    ],
  },
);