CODEWITHSUNDEEP
ember.jssentry
Luke
Luke

Reputation: 11

How to fix Sentry User Feedback Error - Cannot read property 'showReportDialog' of undefined

I've been trying to get a User Feedback dialog to show when I click on a certain button, but I've had some trouble. I successfully got it to work when I make a call my API and end up getting an error shown first.

However I created a button that would trigger a call to Sentry.showReportDialog, but I get a 'Cannot read property 'showReportDialog' of undefined' error. I've tried using Sentry.capture Message/Exception/Error to generate an eventId, but I still got the same error. This is my current code that's failing, but I've modified it a decent amount and was still getting the same undefined error for showReportDialog, even when I tried the method that worked with my API call. This web application is running using Ember.js v3.5.1 and in my package.json the dependency for sentry is "@sentry/browser": "^4.5.3"

// works
try {
    $('.ember-application').addClass('request-loading');
    this.model.setProperties(properties);
    return yield this.model.save();
} catch (err) {
    // Get feedback from user through sentry
    Sentry.init({
        dsn:'https://[email protected]/1369772',
        beforeSend(event) {
            if (event.exception) {
            Sentry.showReportDialog({ eventId: event.event_id });
        }
        return event;
    },
});

}

// does not work
try {
    throw new Error();
} catch (e) {
    var eventId = yield Sentry.captureException(e, function(sendErr, eventId) {
        // This callback fires once the report has been sent to Sentry
        if (sendErr) {
            console.error('Failed to send captured exception to Sentry');
        } else {
            console.log('Captured exception and send to Sentry successfully');
            console.log(eventId);
        }
    });
    console.log(eventId);
    Sentry.showReportDialog({ eventId: eventId });
}

Upvotes: 0

Views: 1890

Answers (2)

Jon Musselwhite
Jon Musselwhite

Reputation: 1821

Answer for 2022

If anyone stumbles on this question looking for the answer, please don't use the other answer with yield and everything else. You don't need to generate and catch a fake error just to submit a report to Sentry, but you do need an eventId. You can get that from the return value of Sentry.captureMessage(...) like this:

const eventId = Sentry.captureMessage(`User has some feedback`);
Sentry.showReportDialog({
  eventId,
  title: 'Want to share some feedback?',
  subtitle: 'Great!',
  subtitle2: `If not, just click 'close' below.`,
  labelComments: 'What would you like us to know?',
  labelSubmit: 'Submit Feedback'
});

Obviously, this has to be after you've already called Sentry.init(...) however you do it. You can set the labels however you want and read more about it in the documentation.

If you do it like this, the message "User has some feedback" (or whatever message you use) will appear in your Issues list in Sentry with a blue mark next to it instead of the orangish-red exceptions. That's helps to distinguish it.

Upvotes: 1

Luke
Luke

Reputation: 11

The following code ended up working for me

try {
        throw new Error();
    } catch (e) {
        Sentry.init({
            dsn: 'https://[email protected]/1369772',
            beforeSend(event) {
                return event;
            },
        });
        var eventId = yield Sentry.captureException(e, function() {});
        Sentry.showReportDialog({
            eventId: eventId,
    });
}

Upvotes: 0

Related Questions