Sentryのドキュメントに気になるものを見つけたので試してみました。

User Feedback

どうやらエラーが起きたときに、ユーザーがレポートするためのモーダルをSDKで提供してくれる（らしい）です。

When a user experiences an error, Sentry provides the ability to collect additional feedback. This type of feedback is useful when you may typically render a plain error page (the classic 500.html).

https://docs.sentry.io/platforms/javascript/enriching-events/user-feedback/

組み込んでみた

やることはシンプルで、Sentry.initのオプションでbeforeSendを利用してSentry.showReportDialogを実行するだけです。

        Sentry.init({
            beforeSend(event) {
                if (event.exception) {
                  Sentry.showReportDialog({ eventId: event.event_id });
                }

動かしてみた結果

あとはアプリをデプロイしてエラーに遭遇するのを待つだけです。今回は別のホスティングサービスへの移行テストをしている際に遭遇することができました。

エラーが発生すると、全画面でレポートフォームが表示されます。しかも（おそらく）ブラウザの設定言語あたりで判別して言語も切り替えてくれる様子です。

フィードバックを送信すると、Thanksメッセージが表示されます。この後「閉じる」で2つのモーダルを消すと、元のアプリに戻れます。

Sentry側でもこのようにレポートが表示されました。

ちなみに一応オプションで色々プロパティを設定できるみたいです。

/**
 * All properties the report dialog supports
 */
export interface ReportDialogOptions {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    [key: string]: any;
    eventId?: string;
    dsn?: DsnLike;
    user?: {
      email?: string;
      name?: string;
    };
    lang?: string;
    title?: string;
    subtitle?: string;
    subtitle2?: string;
    labelName?: string;
    labelEmail?: string;
    labelComments?: string;
    labelClose?: string;
    labelSubmit?: string;
    errorGeneric?: string;
    errorFormEntry?: string;
    successMessage?: string;
    /** Callback after reportDialog showed up */
    onLoad?(): void;
  }

モーダルのサイズなどは指定できない様子ですので、見た目についてはCSSで頑張ることになりそうです。