Issue

I built a custom 404 or 500 page in my Next.js app. I want users to contact my team with Sentry User Feedback instead of email. I tried Sentry.showReportDialog({ eventId }) and I need a working client-side sample.

Applies To

All SaaS Customers and Self-Hosted Users
Next.js SDK
User Feedback

Resolution

Use the Crash-Report Modal when an error already exists. Use the User Feedback widget when there is no error, such as a 404. Both APIs run in a Client Component.

Add feedbackIntegration in your client Sentry.init if you use the widget. See Set Up User Feedback.

If you have a 500 page or error.tsx:

Capture the error, then open showReportDialog with that event ID:

"use client";import { useEffect, useState } from "react";
import * as Sentry from "@sentry/nextjs";export default function Error({ error }) {
  const [eventId, setEventId] = useState();  useEffect(() => {
    setEventId(Sentry.captureException(error));
  }, [error]);  return (
    <button
      type="button"
      onClick={() => {
        if (eventId) {
          Sentry.showReportDialog({ eventId });
        }
      }}
    >
      Send Error Report
    </button>
  );
}

error.tsx intercepts rendering errors, so you must call captureException yourself. See Capturing Errors.

If you have a 404 or a custom button and no error:

Do not call captureException to invent an event. Open the User Feedback form from getFeedback().

Read getFeedback on the client only, so you avoid hydration errors:

"use client";import { useEffect, useState } from "react";
import * as Sentry from "@sentry/nextjs";export default function FeedbackButton() {
  const [feedback, setFeedback] = useState();  useEffect(() => {
    setFeedback(Sentry.getFeedback());
  }, []);  if (!feedback) {
    return null;
  }  return (
    <button
      type="button"
      onClick={async () => {
        const form = await feedback.createForm();
        form.appendToDom();
        form.open();
      }}
    >
      Send Feedback
    </button>
  );
}

Set autoInject: false on feedbackIntegration if you do not want the default widget. See Bring Your Own Button.

If you self-host Sentry:

The User Feedback widget needs self-hosted version 24.4.2 or higher.

[Next.js] How do I add User Feedback on a custom error page?