Skip to content

Commit 9da81b4

Browse files
denrasebitsandfoxes
denrase
authored and
bitsandfoxes
committed
flutter(docs): Update SentryFeedbackWidget documentation (#13898)
## DESCRIBE YOUR PR Update docs with new feedback widget functionality. ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) ## EXTRA RESOURCES - [SentryFeedbackWidget Improvements](https://github.com/getsentry/sentry-dart/pull/2964/files)
1 parent 43f773b commit 9da81b4

File tree

2 files changed

+76
-21
lines changed

2 files changed

+76
-21
lines changed

‎docs/platforms/dart/guides/flutter/user-feedback/img/flutter_sentry_feedback_widget.png

23 KB
Loading

‎docs/platforms/dart/guides/flutter/user-feedback/index.mdx

Lines changed: 76 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,97 @@ The user feedback API allows you to collect user feedback while utilizing your o
2121

2222
Use the `SentryFeedbackWidget` to let users send feedback data to Sentry.
2323

24-
The widget requests and collects the user's name, email address, and a description of what occurred. When an event identifier is provided, Sentry pairs the feedback with the original event, giving you additional insights into issues. Additionally, you can provide a screenshot that will be sent to Sentry. Learn more about how to enable screenshots in our <PlatformLink to="/enriching-events/screenshots/">Screenshots documentation</PlatformLink>.
24+
The widget requests and collects the user's name, email address, and a description of what occurred. When an event identifier is provided, Sentry pairs the feedback with the original event, giving you additional insights into issues.
25+
26+
Users can also take a screenshot of their app's UI. Additionally, you can provide a screenshot in code. Learn more about how to enable screenshots in our <PlatformLink to="/enriching-events/screenshots/">Screenshots documentation</PlatformLink>.
2527

2628
The image below provides an example of the widget, though yours may differ depending on your customization:
2729

2830
![SentryFeedbackWidget](./img/flutter_sentry_feedback_widget.png)
2931

3032
### Integration
3133

32-
One possible use for the `SentryFeedbackWidget` is to listen for specific Sentry events in the `beforeSend` callback and show the widget to users.
34+
One possible use for the `SentryFeedbackWidget` is to listen for specific Sentry events in the `beforeSend` callback and show the widget to users. Users also can take a screenshot from their app's UI if the `SentryWidget` is wrapped around the main app widget.
3335

3436
```dart
3537
// The example uses the `NavigatorState` to present the widget. Adapt as needed to your navigation stack.
3638
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
3739
3840
...
3941
40-
await SentryFlutter.init((options) {
41-
options.beforeSend = (event, hint) async {
42-
// Filter here what kind of events you want users to give you feedback.
43-
44-
final screenshot = await SentryFlutter.captureScreenshot();
45-
46-
final context = navigatorKey.currentContext;
47-
if (context == null) return;
48-
if (context.mounted) {
49-
Navigator.push(
50-
context,
51-
MaterialPageRoute(
52-
builder: (context) => SentryFeedbackWidget(
42+
Future<void> main() async {
43+
await SentryFlutter.init(
44+
(options) {
45+
options.navigatorKey = navigatorKey; // Needed so the widget can be presented.
46+
options.beforeSend = (event, hint) async {
47+
// Filter here what kind of events you want users to give you feedback.
48+
49+
final screenshot = await SentryFlutter.captureScreenshot();
50+
51+
final context = navigatorKey.currentContext;
52+
if (context != null && context.mounted) {
53+
SentryFeedbackWidget.show(
54+
context,
5355
associatedEventId: event.eventId,
5456
screenshot: screenshot,
55-
),
56-
fullscreenDialog: true,
57-
),
58-
);
59-
}
60-
};
57+
);
58+
}
59+
};
60+
},
61+
appRunner: () => runApp(
62+
SentryWidget(
63+
child: MyApp(),
64+
),
65+
),
66+
);
67+
}
68+
```
69+
70+
### Customization
71+
72+
You can customize the `SentryFeedbackWidget` to your needs by modifying the `SentryFeedbackOptions` class, which is provided by the `SentryFlutter.init` options.
73+
74+
```dart
75+
SentryFlutter.init((options) {
76+
options.feedback.title = 'Report a Bug';
77+
options.feedback.isNameRequired = false;
78+
options.feedback.showName = true;
79+
options.feedback.isEmailRequired = false;
80+
options.feedback.showEmail = true;
81+
options.feedback.useSentryUser = true;
82+
options.feedback.showBranding = true;
6183
});
6284
```
85+
86+
The following table lists all the options you can customize to change behavior of the `SentryFeedbackWidget`.
87+
88+
| Option | Type | Default | Description |
89+
| - | - | - | - |
90+
| title | String | 'Report a Bug' | The title of the feedback form. |
91+
| isNameRequired | Bool | false | Requires the name field on the feedback form to be filled in. |
92+
| showName | Bool | true | Displays the name field on the feedback form. Ignored if isNameRequired is true. |
93+
| isEmailRequired | Bool | false | Requires the email field on the feedback form to be filled in. |
94+
| showEmail | Bool | true | Displays the email field on the feedback form. Ignored if isEmailRequired is true. |
95+
| useSentryUser | Bool | true | Sets the email and name fields to the corresponding Sentry SDK user fields that were called with SentrySDK.setUser. |
96+
| showBranding | Bool | true | Displays the Sentry logo inside the form. |
97+
| showCaptureScreenshot | Bool | true | Displays the capture screenshot button on the feedback form. |
98+
99+
You can also provide differnt labels or localization for the feedback widget:
100+
101+
| Option | Type | Default | Description |
102+
| - | - | - | - |
103+
| formTitle | String | 'Report a Bug' | The title of the feedback form. |
104+
| messageLabel | String | 'Description' | The label of the feedback description input field. |
105+
| messagePlaceholder | String | 'What's the bug? What did you expect?' | The placeholder in the feedback description input field. |
106+
| isRequiredLabel | String | ' (Required)' | The text to attach to the title label for a required field. |
107+
| successMessageText | String | 'Thank you for your report!' | The message displayed after a successful feedback submission. |
108+
| nameLabel | String | 'Name' | The label next to the name input field. |
109+
| namePlaceholder | String | 'Your Name' | The placeholder in the name input field. |
110+
| emailLabel | String | 'Email' | The label next to the email input field. |
111+
| emailPlaceholder | String | 'your.email@example.org' | The placeholder in the email input field. |
112+
| submitButtonLabel | String | 'Send Bug Report' | The label of the submit button. |
113+
| cancelButtonLabel | String | 'Cancel' | The label of the cancel button. |
114+
| validationErrorLabel | String | 'Can't be empty' | The label of the validation error message. |
115+
| captureScreenshotButtonLabel | String | 'Capture a screenshot' | The label of the capture screenshot button. |
116+
| removeScreenshotButtonLabel | String | 'Remove screenshot' | The label of the remove screenshot button. |
117+
| takeScreenshotButtonLabel | String | 'Take Screenshot' | The label of the take screenshot button shown outside of the feedback widget. |

0 commit comments

Comments
 (0)