JavaScript

Sentryの`showReportDialog`を使ってエラーレポートモーダルを出す

Sentryのドキュメントに気になるものを見つけたので試してみました。 User Feedback どうやらエラーが起きたときに、ユーザーがレポートするためのモーダルをSDKで提供してくれる(らしい)です。 When a […]

広告ここから
広告ここまで

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で頑張ることになりそうです。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts