How can I implement Custom User Feedback in Next.js?

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.