Gatsbyで作ったブログにSentryを入れ

はじめに

業務で、エラー監視ツールである Sentry を、触ることになりそうだったので調べていました。Sentry は、無料でも試すことができ、様々な言語の SDK が用意されていました。数ある SDK の中に Gatsby も準備されているかつ、記事を読むだけでは理解が深まらなかったので、実際に自分の Gatsby で作っているブログに導入してみました。習うより慣れろの精神です！

導入

アカウント作成

まず、公式ページからアカウント作成します。Developer Planを選択し、アカウント作成を行いました。ただ、自分が作成した後に Sentry の管理画面を見たところ、Business Trialになっていました（14 日間使えるみたいでした）。

画像にある、Manage Subscription→Cancel Subscriptionをクリックしたところ、解約すると契約終了時にダウングレードされますと書いていました。おそらく、最初はBusiness Trialで期間が終了すると自動でDeveloper Planにダウングレードされるのかな？と思います。今回のアカウント作成時に、カードなどの入力もしておらず、勝手に課金はされることはないと思っているので一旦放置で進めています。

Cancelling your subscription will downgrade your account to a free plan at the end of your contract on 二週間後の日付.

Gatsby の設定

Sentry の Gatsby プラグインをインストールします。自分は npm で管理しているので npm でインストールしました。

npm install --save @sentry/gatsby

次に DSN の設定をします。DSN はデータソースネームらしいです（DSN という単語を初めて知りました）。

 {
      resolve: "@sentry/gatsby",
      options: {
        // ここに設定した自分のプロジェクトにDSNを入れます
        // 自分は環境変数から読取るように設定しました
        dsn: `${process.env.SENTRY_DSN}`,
        sampleRate: 0.7,
      },
 },

もし、環境変数から読取りたい方は、.envファイルをプロジェクト直下に作って DSN を設定して下さい。.gitignoreの設定もお忘れなきように…

SENTRY_DSN=ここにDSN

sampleRateというパラメータがあるかと思いますが、ここは0 ~ 1の値で設定します。起こったエラーの内、何パーセントを送るかを設定します。0が0%で、1が100%です。自分は、チュートリアルに載っていた、0.7（70%）で送るようにしています。初期設定時の検証では、1にした方が良いかもしれません。

実際にわざと例外を起こして、エラーを送信できるかチェックします。自分は普段 TypeScript を全く書かず、例外処理の送り方が分からなかったので、この記事を参考に送りました。

// 省略
  const ThrowError = ():JSX.Element => {
  throw new Error ('Page3Child Throw Error')
}

// 省略

return (
    {/* 省略*/ }
    <ThrowError />
)

手元で、gatsby developし、エラーが送信できていることを確認します。

最後に

Gatsby に Sentry を導入してみました。導入した感想としては、簡単にエラーログを送ることができ、凄いと思いました。今回はsampleRateのみを設定しましたが、他にも色々な設定項目があり、送りたくない情報の設定や、逆に追加で送りたい情報の設定もできるみたいでした。自分はどんなものか分かればいいや程度だったので基本設定に留めました。

ドキュメントを読んで、初めて知ったのですが、正しいエラーを、たくさん送ることはいいのは知っていましたが、送るエラー量が適度であることが大事なのは初めて知りました。確かになーと思いました。何でも送ると、逆にエラー情報が見づらくなったり、本当に重要なエラーが埋もれたりするからなのかな、と自分は解釈しました。

今回学んだサンプルレートの考えは、Sentry に限らず他にも応用できるなと思いました。自分は普段モバイル開発をしているので、Firebase Crashlytics にも似たような設定があるか見てみたいなと思いました。

参考サイト

• Sentry Pricing
• [Gatsby]環境変数を使う
• Sampling
• Gatsby