0
# User Feedback
1

2
User feedback collection system with modal widgets and programmatic APIs for gathering user reports on errors and general feedback.
3

4
## Capabilities
5

6
### Report Dialog
7

8
Show user report dialog for error feedback.
9

10
```typescript { .api }
11
/**
12
 * Present the user with a report dialog
13
 * @param options - Dialog configuration options
14
 */
15
function showReportDialog(options?: ReportDialogOptions): void;
16
```
17

18
**Usage Example:**
19

20
```typescript
21
import { showReportDialog, lastEventId } from "@sentry/browser";
22

23
// Show dialog for last error
24
showReportDialog({
25
  eventId: lastEventId(),
26
  title: "It looks like we're having issues.",
27
  subtitle: "Our team has been notified. If you'd like to help, tell us what happened below.",
28
  onLoad: () => console.log("Dialog loaded"),
29
  onClose: () => console.log("Dialog closed"),
30
});
31
```
32

33
### Feedback APIs
34

35
Programmatic feedback collection.
36

37
```typescript { .api }
38
/**
39
 * Get the current feedback widget instance
40
 * @returns Feedback widget or null
41
 */
42
function getFeedback(): FeedbackWidget | null;
43

44
/**
45
 * Send feedback programmatically
46
 * @param feedback - User feedback data
47
 */
48
function sendFeedback(feedback: UserFeedback): void;
49

50
/**
51
 * Capture feedback as an event
52
 * @param feedback - Feedback event data
53
 * @param hint - Event hint
54
 * @returns Event ID
55
 */
56
function captureFeedback(feedback: FeedbackEvent, hint?: EventHint): string;
57
```
58

59
### Feedback Integrations
60

61
Feedback widget integrations.
62

63
```typescript { .api }
64
/**
65
 * Asynchronous feedback widget
66
 * @param options - Async feedback options
67
 * @returns Async feedback integration
68
 */
69
function feedbackAsyncIntegration(options?: FeedbackAsyncOptions): Integration;
70

71
/**
72
 * Synchronous feedback widget  
73
 * @param options - Sync feedback options
74
 * @returns Sync feedback integration
75
 */
76
function feedbackSyncIntegration(options?: FeedbackSyncOptions): Integration;
77

78
/**
79
 * Alias for feedbackSyncIntegration
80
 */
81
const feedbackIntegration = feedbackSyncIntegration;
82
```
83

84
## Types
85

86
### Report Dialog Options
87

88
```typescript { .api }
89
interface ReportDialogOptions {
90
  /** Event ID to associate with the report */
91
  eventId?: string;
92
  
93
  /** DSN override */
94
  dsn?: string;
95
  
96
  /** User information */
97
  user?: User;
98
  
99
  /** Dialog title */
100
  title?: string;
101
  
102
  /** Dialog subtitle */
103
  subtitle?: string;
104
  
105
  /** Secondary subtitle */
106
  subtitle2?: string;
107
  
108
  /** Name field label */
109
  labelName?: string;
110
  
111
  /** Email field label */
112
  labelEmail?: string;
113
  
114
  /** Comments field label */
115
  labelComments?: string;
116
  
117
  /** Close button label */
118
  labelClose?: string;
119
  
120
  /** Submit button label */
121
  labelSubmit?: string;
122
  
123
  /** Generic error message */
124
  errorGeneric?: string;
125
  
126
  /** Form validation error message */
127
  errorFormEntry?: string;
128
  
129
  /** Success message */
130
  successMessage?: string;
131
  
132
  /** Callback when dialog loads */
133
  onLoad?: () => void;
134
  
135
  /** Callback when dialog closes */
136
  onClose?: () => void;
137
}
138
```
139

140
### Feedback Types
141

142
```typescript { .api }
143
interface UserFeedback {
144
  /** User's name */
145
  name?: string;
146
  
147
  /** User's email */
148
  email?: string;
149
  
150
  /** Feedback message */
151
  message: string;
152
  
153
  /** Associated event ID */
154
  event_id?: string;
155
}
156

157
interface FeedbackEvent {
158
  /** User's name */
159
  name?: string;
160
  
161
  /** User's email */
162
  email?: string;
163
  
164
  /** Feedback message */
165
  message: string;
166
  
167
  /** Associated event ID */
168
  event_id?: string;
169
  
170
  /** URL where feedback was given */
171
  url?: string;
172
  
173
  /** User information */
174
  user?: User;
175
  
176
  /** Additional tags */
177
  tags?: { [key: string]: Primitive };
178
}
179

180
interface FeedbackWidget {
181
  /** Open the feedback widget */
182
  open(): void;
183
  
184
  /** Close the feedback widget */
185
  close(): void;
186
  
187
  /** Check if widget is open */
188
  isOpen(): boolean;
189
  
190
  /** Remove the widget */
191
  remove(): void;
192
}
193
```
194

195
### User Feedback Envelope
196

197
```typescript { .api }
198
/**
199
 * Create user feedback envelope for transport
200
 * @param feedback - User feedback data
201
 * @param options - Envelope options
202
 * @returns Feedback envelope
203
 */
204
function createUserFeedbackEnvelope(
205
  feedback: UserFeedback,
206
  options?: { tunnel?: string; dsn?: DsnComponents }
207
): Envelope;
208
```
209

210
## Feedback Integration Examples
211

212
### Basic Feedback Widget
213

214
```typescript
215
import { feedbackIntegration } from "@sentry/browser";
216

217
Sentry.init({
218
  dsn: "YOUR_DSN",
219
  integrations: [
220
    feedbackIntegration({
221
      // Widget appears as floating button
222
      buttonLabel: "Report Bug",
223
      submitButtonLabel: "Send Bug Report",
224
      formTitle: "Bug Report",
225
      
226
      // Styling
227
      colorScheme: "dark",
228
      showBranding: false,
229
      
230
      // Auto-inject on errors
231
      autoInject: false,
232
      showOnError: true,
233
    }),
234
  ],
235
});
236
```
237

238
### Programmatic Feedback
239

240
```typescript
241
import { sendFeedback, captureFeedback } from "@sentry/browser";
242

243
// Send feedback directly
244
sendFeedback({
245
  name: "John Doe",
246
  email: "john@example.com", 
247
  message: "The checkout button doesn't work on mobile",
248
});
249

250
// Capture feedback as event with context
251
captureFeedback({
252
  name: "Jane Smith",
253
  email: "jane@example.com",
254
  message: "Love the new design!",
255
  tags: { feature: "ui_redesign", sentiment: "positive" },
256
});
257
```