Sentry-javascript: Add support for custom feedback form

[remcohaszing]

I’d like to use the Sentry feedback API, but using a custom feedback form.

The feedback form makes the following request

POST https://sentry.io/api/embed/error-page/?eventId=myEventId&dsn=myDsn HTTP/1.1
Content-Type: multipart/form-data; boundary=----boundary

------boundary
Content-Disposition: form-data; name="comments"

User comments
------boundary
Content-Disposition: form-data; name="email"

User email
------boundary
Content-Disposition: form-data; name="name"

User name
------boundary--

The user feedback docs state that if I want to use my own form, I need to use the API endpoint described here. However, this endpoint requires more information that’s not required when using the Sentry feedback form. The following additional fields are required:

• Sentry hostname (this is different from the DSN)
• organization_slug
• project_slug

I would like to see a function in the JavaScript SDK that can be used for submitting user feedback.

[kamilogorek]

Thanks for the feedback. In the meantime, you can use @sentry/utils to parse out your DSN and grab the necessary data for the API request - https://github.com/getsentry/sentry-javascript/blob/928e96a6eee041f95e0a3c0da6bcc6f9ca2e885b/packages/utils/src/dsn.ts#L12

[dimaqq]

I'm interested in this too.

For the time being I'm thinking to grab an event id† or just calls xx.ingest.sentry.io/api/xx explicitly, then POST to sentry.io/api/embed manually.

† IIRC I need to pass the last event id, and that event it must already exist on sentry, right?

[kamilogorek]

† IIRC I need to pass the last event id, and that event it must already exist on sentry, right?

Correct. You can use Sentry.lastEventId() for that or read one from const eventId = Sentry.captureException(e) calls.

You can find more detailed documentation here:
https://develop.sentry.dev/sdk/features/#user-feedback
https://develop.sentry.dev/sdk/envelopes/#user-feedback
https://docs.sentry.io/api/projects/submit-user-feedback/

[dimaqq]

I'm sorry if my concern was not clear.
I'd need ensure that the event id has already reached sentry server (not merely buffered), wouldn't I?

[remcohaszing]

FWIW I use the following working code to submit user feedback:

import { captureMessage, Severity } from '@sentry/browser';
import axios from 'axios';

const comments = 'Oh noez!';
const email = '[email protected]';
const name = 'Me';

const form = new FormData();
form.set('comments', comments);
form.set('email', email);
form.set('name', name);
await axios.post('https://sentry.io/api/embed/error-page/', form, {
  params: {
    dsn,
    eventId: captureMessage('Feedback', Severity.Info),
  },
});

[kamilogorek]

I'd need ensure that the event id has already reached sentry server (not merely buffered), wouldn't I?

No, they can be processed separately, in any order.