Issue
I have implemented a custom 404 and 500 error page in my NextJS app. But instead of allowing the user to send an email to my support address I would like allow my users to contact my team by launching the User Feedback dialog with Sentry.showReportDialog({ eventId }). Where can I get a sample implementation of a custom showReportDialog in NextJS?
Applies To
Customers using the Next.js SDK
Customers using the React SDK
Resolution
Please see a sample implementation below:
import * as Sentry from '@sentry/nextjs';
<button
onClick={() => {
const eventId =
Sentry.lastEventId() ||
// Fallback in case Sentry didn't capture an error before the user clicked the button
Sentry.captureException(new Error('Custom Error Report'));
Sentry.showReportDialog({
eventId: eventId,
});
}}
>
Send Error Report
</button>;
This approach first checks for the last captured event using Sentry.lastEventId(). If no event was previously captured, it creates a fallback by capturing a new custom error. The showReportDialog method is then triggered with the relevant eventId.