Configuration
Learn about the User Feedback Widget configuration options.
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can use your own UI.
The following options can be configured for the integration in feedbackIntegration({}) or passed in the FeedbackForm component props:
| Key | Type | Default | Description |
|---|---|---|---|
showBranding | boolean | true | Displays the Sentry logo inside of the form. |
showName | boolean | true | Displays the name field on the feedback form. |
showEmail | boolean | true | Displays the email field on the feedback form. |
enableScreenshot | boolean | false | Allows the user to send a screenshot attachment with their feedback. |
isNameRequired | boolean | false | Requires the name field on the feedback form to be filled in. |
isEmailRequired | boolean | false | Requires the email field on the feedback form to be filled in. |
shouldValidateEmail | boolean | true | If set the email is validated with the following regular expression "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/" |
useSentryUser | Record<string, string> | { email: 'email', name: 'username'} | Sets the default values for the email and name fields. |
All the text that you see in the Feedback widget can be customized.
The following options can be configured for the integration in feedbackIntegration({}) or passed in the FeedbackForm component props:
| Key | Default | Description |
|---|---|---|
formTitle | "Report a Bug" | The title at the top of the feedback form. |
submitButtonLabel | "Send Bug Report" | The label of the submit button used in the feedback form. |
cancelButtonLabel | "Cancel" | The label of cancel buttons used in the feedback form. |
addScreenshotButtonLabel | "Add a screenshot" | The label of the button to add a screenshot to the form. |
removeScreenshotButtonLabel | "Remove screenshot" | The label of the button to remove the screenshot from the form. |
nameLabel | "Name" | The label of the name input field. |
namePlaceholder | "Your Name" | The placeholder for the name input field. |
emailLabel | "Email" | The label of the email input field. |
emailPlaceholder | "your.email@example.org" | The placeholder for the email input field. |
isRequiredLabel | "(required)" | The label shown next to an input field that is required. |
messageLabel | "Description" | The label for the feedback description input field. |
messagePlaceholder | "What's the bug? What did you expect?" | The placeholder for the feedback description input field. |
successMessageText | "Thank you for your report!" | The message displayed after a successful feedback submission. |
errorTitle | "Error" | The title of the error message dialog. |
formError | "Please fill out all required fields." | Form validation error message. |
emailError | "Please enter a valid email address." | Email validation error mesage. |
genericError | "Unable to send feedback due to an unexpected error." | The generic error message. |
Example of customization:
feedbackIntegration({
buttonLabel: "Feedback",
submitButtonLabel: "Send Feedback",
formTitle: "Send Feedback",
});
You can customize placement of the feedback components on the widget, as well as the fonts and colors.
The example below shows how to customize the submit button background color and border radius with the feedbackIntegration.
import * as Sentry from "@sentry/react-native";
Sentry.feedbackIntegration({
styles: {
submitButton: {
backgroundColor: "#6a1b9a",
borderRadius: 5,
},
},
});
Sentry.showFeedbackForm();
The same can be achived by passing the styles prop to the FeedbackForm component:
import { FeedbackForm } from "@sentry/react-native";
<FeedbackForm
styles={{
submitButton: {
backgroundColor: "#6a1b9a",
borderRadius: 5,
},
}}
/>;
The following styles are available for customisation.
| Style | Type | Description |
|---|---|---|
container | ViewStyle | The form container style. |
title | TextStyle | The title text style. |
label | TextStyle | The label text style (name, email). |
input | TextStyle | The input field text style (name, email). |
textArea | TextStyle | The message text style. |
submitButton | ViewStyle | The submit button style. |
submitText | TextStyle | The submit button text style. |
cancelButton | ViewStyle | The cancel button style. |
cancelText | TextStyle | The cancel button text style. |
screenshotButton | ViewStyle | the screenshot button style. |
screenshotText | TextStyle | The screenshot button text style. |
titleContainer | ViewStyle | The title container style. |
sentryLogo | ImageStyle | The Sentry branding logo style. |
modalBackground | ViewStyle | The Modal backround style applicable when using the showFeedbackForm method. |
The following callbacks can be configured for the integration in feedbackIntegration({}) or passed in the FeedbackForm component props:
| Callback | Parameters | Default behavior | Description |
|---|---|---|---|
onFormOpen | Callback when form is opened. | ||
onFormClose | The form is unmounted. | Callback when form is closed and not submitted. | |
onSubmitSuccess | data: FeedbackFormData | Callback when feedback is successfully submitted. | |
onSubmitError | error: Error | Callback when feedback is unsuccessfully submitted. | |
onFormSubmitted | The form is unmounted. | Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed. | |
onAddScreenshot | attachFile: (filename: string, data: Uint8Array) => void | Callback when a screenshot is added. |
To attach a screenshot to the feedback form, you should implement the onAddScreenshot callback. The callback receives a filename and a Uint8Array of the image data.
An example of how to attach a screenshot using the react-native-image-picker and the react-native-quick-base64 libraries is the following:
import * as Sentry from '@sentry/react-native';
import { toByteArray } from 'react-native-quick-base64';
import { launchImageLibrary } from 'react-native-image-picker';
const handleChooseImage = (attachFile: (filename: string, data: Uint8Array) => void): void => {
launchImageLibrary({ mediaType: 'photo', includeBase64: true }, (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.errorCode) {
console.log('ImagePicker Error: ', response.errorMessage);
} else if (response.assets && response.assets.length > 0) {
const filename = response.assets[0].fileName;
const base64String = response.assets[0].base64;
const screenShotUint8Array = toByteArray(base64String);
if (filename && screenShotUint8Array) {
attachFile(filename, screenShotUint8Array);
}
}
});
};
Sentry.feedbackIntegration({
onAddScreenshot={handleChooseImage}
});
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").