FEATURE REQUEST: User Feedback

[export-mike]

Platform:

• iOS
• Android

RavenJS has a useful user-feedback feature to capture more information on how the error occured. This is super useful for internal testing for testers to use as and when errors happen.

expect a new function to be added to render UI to capture details from the user in a text field.

[voxpelli]

This would be very helpful.

Being able to collect feedback from an app when the user runs across something that they believe to be a bug, getting interesting state data, a screenshot, maybe even annotated screenshot – that would be very nice

[export-mike]

All very possible from the react-native side too.

[saadq]

In the mean time, I had been looking at going for an alternative solution which was to call the user feedback API endpoint directly like so:

curl 'https://sentry.io/api/0/projects/saad-quadri/test/user-feedback/' --request 'POST' --header 'Authorization: Bearer <my-auth-token>' --header 'Content-Type: application/json' --data '{"comments":"there is an issue with the app","email":"johnsmith@gmail.com","event_id":"1234abcd","name":"John Smith"}'

I thought it had worked because it returned a JSON response like so:

{
 "eventID": "1234abcd",
 "name": "John Smith",
 "event": { "eventID": "1234abcd", "id": null },
 "user": null,
 "dateCreated": "2018-12-26T22:01:40.883Z",
 "issue": null,
 "id": "443876",
 "comments": "there is an issue with the app",
 "email": "johnsmith@gmail.com"
}

But it doesn't seem to actually get added to the user feedback :(

I'm sure that it's pointing to the right project and the details are right because error reporting does work:

Not sure if I'm missing something...

[naytun]

@saadq, The reason feedback is not showing in the dashboard is because you need to give actual event_id of an error event in the Sentry, not user defined id. And that event has to be in unresolved status. When I add actual event_id it shows up in me dashboard.

The question becomes how can we get actual event_id?

[saadq]

Hey @naytun, thanks for bringing this up. I actually did realize that at some point awhile back, but I forgot to update here. There is a Sentry.lastEventId() method that you should be able to call in order to get the last event_id, but it hadn't been working for me (it always returned null).

I opened an issue here for that: #527

I got a reply from one of the maintainers on the proper way to do it, but I hadn't tried it out. If that doesn't work out for you, I can give you the alternative method I used to get it to work, although it was pretty hacky.

[naytun]

@saadq, Thank you for the quick feedback and also for the tip. I'll try lastEventId() see I could get it working.

[naytun]

@saadq, I can successfully get eventID like this.

 //=== Create feedback event in Sentry and get eventID
 Sentry.captureMessage("User Feedback... ");
 Sentry.setEventSentSuccessfully(event => {
 const eventID = Sentry.lastEventId();
 });

Thank you for your tip!

[saadq]

Awesome, glad to see it works!

[export-mike]

submit a PR @saadq to report these changes via a new API method?

it's a start. I doubt many people will be keen to have a sentry looking UI feedback form in their apps anyway.

[Psiiirus]

Hi @saadq, so u did a mix of native fetch() and Sentry-js to get it to work?

[saadq]

Hey @MM-Psiiirus,

So to get this to work, you basically need to do a POST request to https://sentry.io/api/0/projects/{your_organization_slug}/{your_project_slug}/user-feedback/. You need to pass in a few strings in your request body – the event_id, a user's name, a user's email, and the comments provided by the user.

Something like:

let endpoint = 'https://sentry.io/api/0/projects/{your_organization_slug}/{your_project_slug}/user-feedback/'

let params = {
 event_id: ...,
 name: 'John Smith',
 email: 'johnsmith@example.com',
 comments: 'This app sucks'
}

try {
 await fetch(endpoint, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(params)
 })
 console.log('Feedback submitted!')
} catch (error) {
 console.error(error)
}

You will basically need to use react-native-sentry to capture a message or exception, and then pass the event_id of that captured message/exception to the params object above. To get that event_id, look at the comments above. Hope that helps!

---

@export-mike Not exactly sure what you meant by that PR, just to check what exactly are you proposing? Right now with the way I described above, you would just have your own custom form that takes in name, email, and comments as inputs and then pass that data to the user-feedback endpoint as request params.

[export-mike]

@saadq add the following:

function submitFeedback(params){
 let endpoint = 'https://sentry.io/api/0/projects/{your_organization_slug}/{your_project_slug}/user-feedback/'

 return fetch(endpoint, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(params)
 })
 }
}
let params = {
 event_id: ...,
 name: 'John Smith',
 email: 'johnsmith@example.com',
 comments: 'This app sucks'
}
Sentry.submitFeedback(params);

as a new JS function to Sentry

[jordoh]

Thanks for the code @saadq - that worked great, but I did need to add an authorization header (using DSN auth, so no secrets are required):

"Authorization": `DSN ${ SENTRY_DSN }`

[pybuche]

Hi! Any update on this? Is this feature will someday be ported to the React Native version?
Thx!