Set Up User Feedback

The User Feedback feature allows you to collect user feedback from anywhere inside your application, without requiring an error event to occur. This requires a minimum SDK version of 7.85.0. The Crash-Report Modal feature still exists to handle user feedback associated with an error event.

User Feedback Widget

The embeddable JavaScript widget allows users to submit feedback from anywhere inside your application. The Crash-Report Modal collects reactive feedback tied to an error event.

Pre-requisites

For the User Feedback integration to work, you must have the Sentry browser SDK package, or an equivalent framework SDK (for example, @sentry/react) installed. The minimum version required for the SDK is 7.85.0. If you're on an older version of the SDK, please check this migration document.

User Feedback requires browsers that support Shadow DOM.

Installation

npm install --save @sentry/electron

Set Up

To set up the integration, add the following to your Sentry initialization. There are many options you can pass to the integration constructor. See the configuration documentation for more details.

Session Replay

The User Feedback Widget integrates easily with Session Replay. First, make sure that the Session Replay integration is configured correctly and that replaysOnErrorSampleRate is greater than 0. When this is done, the Replay SDK will buffer up to 30 seconds worth of events until the user opens the User Feedback Widget. If the user submits feedback, you'll be able to view the Feedback (including the replay), inside of Sentry's web application.

import * as Sentry from "@sentry/electron/renderer";

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

  integrations: [
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
  ],
});

By default, this will insert the widget into the bottom right corner of your website. You're free to customize nearly every aspect of the widget, including replacing it completely with your own UI.

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.

Requires JS SDK version v7.47.0 or higher.

import * as Sentry from "@sentry/browser";

const eventId = Sentry.captureMessage("User Feedback");
// OR: const eventId = Sentry.lastEventId();

const userFeedback = {
  event_id: eventId,
  name: "John Doe",
  email: "john@doe.com",
  comments: "I really like your App, thanks!",
};
Sentry.captureUserFeedback(userFeedback);

You could also collect feedback and send it when an error occurs via the SDK's beforeSend callback:

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  beforeSend: event => {
    const userFeedback = collectYourUserFeedback();
    const feedback = {
      ...userFeedback,
      event_id: event.event_id,
    }
    Sentry.captureUserFeedback(feedback);
    return event;
  }
})

Alternatively, you can use the User Feedback API endpoint directly.

Crash-Report Modal

Our embeddable, JavaScript-based, Crash-Report modal is useful when you would typically render a plain error page (the classic 500.html) on your website.

To collect feedback, the Crash-Report modal requests and collects the user's name, email address, and a description of what occurred. When feedback is provided, Sentry pairs the feedback with the original event, giving you additional insights into issues.

The screenshot below provides an example of the Crash-Report modal, though yours may differ depending on your customization:

Integration

The modal authenticates with your public DSN, then passes in the Event ID that was generated on your backend.

const { init, showReportDialog } = require("@sentry/electron");

init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  beforeSend(event) {
    // Check if it is an exception, if so, show the report dialog
    // Note that this only will work in the renderer process, it's a noop on the main process
    if (event.exception && event.event_id) {
      showReportDialog({ eventId: event_id });
    }
    return event;
  },
});