FEATURE REQUEST: User Feedback

[export-mike]

Platform:

• [x] iOS
• [x] 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":"[email protected]","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": "[email protected]"
}

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: https://github.com/getsentry/react-native-sentry/issues/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: '[email protected]',
  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: '[email protected]',
  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!

[Vadorequest]

Also interested for a react app.

It seems to exist in the https://www.npmjs.com/package/@sentry/browser package, but it doesn't play nicely with Next.js which is a universal app (browser + node) and requires to apply some dirty tricks like https://github.com/zeit/next.js/blob/canary/examples/with-sentry-simple/next.config.js to use Sentry universally. But even with that I wasn't able to make User Feedback work in Next.

I don't know if react-native has this kind of issues though, may be unrelated. But looking forward a universal Sentry SDK for JS.

[nihp]

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

I am getting error as Sentry.lastEventId() is not a function.

Anyone get user feedback successfully by using the above api for react-native apps(ios and android)

[roth-j]

Any update on the added function?

Also where do i find the slugs to satisfy the request?

[sammysium]

i am a little confused; is this feature implemented? Is there a complete or close to complete example please?

[jennmueng]

@sammysium No the feature has not been officially implemented yet, but it shouldn't be difficult to manually implement it per app.

As other commenters have pointed out, you can send a POST request to our API endpoint: https://docs.sentry.io/api/projects/submit-user-feedback/

You can get the slugs from opening your project settings, which should have a URL like this:

https://sentry.io/settings/{your_organization_slug}/projects/{your_project_slug}/

you can access this by going to Settings -> Projects -> {Project}.

The API request will need an authentication header: 'Authorization: DSN {your_dsn}'

[bruno-garcia]

We added User Feedback to Android and iOS. To add here now we just need to write an envelope item of type User Feedback. I marked it as up-for-grabs if someone wants to try to add it. The TypeScript API can be done directly here for now. To go on the JavaScript SDK it will require sending it via the JS transport, which we don't use here. Once the API is added to JS, we can remove the one here in favor of that one.

The docs for the feature is here: https://develop.sentry.dev/sdk/features/#user-feedback

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[flogy]

Would be great to not put this to stale, as there seems to be quite some interest in this feature by many people.

[bruno-garcia]

We plan to tackle this one soon

[marandaneto]

Currently blocked because of https://github.com/getsentry/sentry-javascript/issues/4240 See related comment: https://github.com/getsentry/sentry-react-native/issues/1327#issuecomment-1012334184

[stevecode21]

I would like to add another Idea to this feature request, and it has to do with implementing a way to attach images and videos by the user as Instabug makes. That would be nice, since sometimes we can use these resources for better debugging.

[mklsk]

Expressing interest in this feature as well!

[robertherber]

This would be nice. My current workaround is to send it directly to the API endpoint as described here - which works but is of course not optimal.