I can't see the submitted user feedback in my project

I am using ReactJS to set up the user feedback for Sentry.

I initialize it with:

import Raven from 'raven-js';

Raven.config(https://#########@sentry.io/#######, {
  environment: "development",
}).install();

And used the componentDidCatch in ErrorBoundary(https://reactjs.org/docs/error-boundaries.html) concept to show the report dialog.

componentDidCatch(error, info) {
    this.setState({ hasError: true });
    Raven.captureException(error, { extra: info });
    Raven.showReportDialog();
}

When I submit the dialog, the network shows me a POST request with a 200 Response and a confirmation dialog that it was successful. However, the body is empty and the submitted form can’t be seen in the user feedback section of my project on my sentry account.

The behavior looks as seen on this site: https://wiggly-power.glitch.me/

[kamilogorek]

@kerwin-personalyze there are 2 issues with the code.

1. You are using the development version of React, which has known “issue” (they say it’s feature, but plenty of people think of it as unexpected behavior), which rethrows all errors, even those caught by error boundaries, to the global error handler.

2. Because of this, you are calling showReportDialog with incorrect eventId, as it’s getting overridden by the second react error (which is not sent to Sentry, as it’s a duplicate, and we dedup exactly same errors)

Captured event:

Dialog call:

If you’ll use production bundle, it’ll fix itself.

You are also calling showReportDialog() in one place and captureException in other. It can make it use incorrect eventId if any error happens in between. It’s better to store an eventId that you want and pass it directly.

Raven.captureException(new Error('boom'));
var eventId = Raven.lastEventId();

...

Raven.showReportDialog({ eventId: eventId });

Keep in mind that your componentDidCatch is called second, not first (hello again react), so eventId that you see being sent to Sentry in network tab actually comes from global error handler.

[nabeelsuspg]

@kamilogorek I am having the same issue. In my case sentry API in the browser network tab has the correct event id but my componentDidCatch method gives me the wrong eventID. Following is my code:

componentDidCatch(error, errorInfo) {
    // eslint-disable-next-line no-console
    console.log({ error, errorInfo });
    Sentry.withScope((scope) => {
      scope.setExtras(errorInfo);
      const event = Sentry.captureException(error);
      const eventId = Sentry.lastEventId();
      console.log("Sentry.lastEventId()", eventId, event)
      this.setState({ eventId, errorInfo });
    });
  }

Please suggest a way forward.