Sentryで超簡単!楽々エラー監視-Sentry登録からアプリへの導入方法のすべて-

はじめに

アプリを運用していくにあたって、エラーの監視は避けては通れませんよね。
サーバーサイドのエラー監視については導入しているアプリケーションも多いと思いますが、フロントのエラー監視に関しては、正直監視していないことも多いのでは…?
そんな今回は、Sentryというフロントエラーの監視ツールが便利で超簡単に導入できるので、ぜひ紹介したいと思います。

Sentryってどんなツールなの?など、初歩的な説明から、実際の導入方法まで。
こちらを読んでもらえば、Sentryの導入もラクラクにできるはず。

では、さっそく!レッツトライ!!

Sentryとは?

フロントエラーの監視ツール。
公式サイトはこちら
https://sentry.io/welcome/

今回の説明は、 Developerライセンス(無料版)のSentry導入の説明となります。
ライセンスプランの違いに関しては、後ほど下でまとめてます。

検証環境について

今回検証環境として用意した、Reactを使用した簡単なアプリケーションの構成は以下です。
・npm
・node.js
・React

Sentryの概要

まず初めにSentryの仕組みを簡単に説明します。
フロントサイドのアプリケーション(※今回はReact)でエラーが発生するたびに、Sentryへエラーが送信され、エラー情報が蓄積されます。
Sentryの管理画面ではこんな感じで見ることができます。

Sentry管理画面エラー一覧

詳細画面では、エラーログや日時、ユーザーの情報、ブラウザや端末の情報など、さまざまな蓄積している情報を確認することができます。

Sentryエラー詳細画面1

Sentryエラー詳細画面2

Sentryへ送信する情報はカスタマイズ可能で、ユーザー情報やその他付加情報をSentryに送ることができます。
どんなカスタマイズができるかについては後ほど詳しく書きますネ。
そのほかにも、ブラウザ毎にエラーをまとめてくれたり、指定した条件でエラーの検索を行えたりといった機能もあり、起きたエラーに関してチケット管理もできます。

ざっくりまとめると、そんなツールです。

Sentryの対応プラットフォームが豊富すぎる

公式サイトによるとSentryが対応している言語は、ブログ投稿時点では12種類となってます。
フレームワークは22種類となってます。
数か月前に確認した時よりも、対応フレームワーク増えてますね…!

Sentry対応言語フレームワーク

Sentryライセンスの違い

Sentryには、計3つのライセンス体系があります。

ライセンス体系

  • Developer (無料)
  • Team(有料)
  • Business ( 有料 )
    それぞれの金額はこんな感じ。
    ※この記事を書いているときの料金となります。以前見たときはもう少し高かったような…

Sentry料金プラン

詳しくは公式サイトに載ってます。
https://sentry.io/pricing/

大きな違いとしては以下4点であるかと思います。

  1. 1ヵ月当たりにトラッキングできるエラーの件数
    ・Developer:5,000件
    ・Team、 Business :10万件
  2. ユーザー数
    ・Developer :1ユーザー
    ・Team、 Business :無制限
  3. 管理できるエラーの保持期間
    ・Developer :30日間
    ・Team、 Business :90日間
  4. エラーのフィルター機能、分析機能、セキュリティ、サポート
    料金が高いプランほど充実しています。
    特にTeam、 Businessライセンスの大きな違いは、この機能が充実しているか否か、ですね。
    Developer でも最低限の機能は付与されているので、全然使える印象です。

Developerライセンスでも不自由なく使えますが、エラー件数が5,000件に制限されてしまうこと、ユーザーが1人しか登録できないこと等に問題がある場合には Team、 Businessライセンス を選ぶべきと思います。

Sentryを実際に導入してみよう!

Sentryについて大まかに理解できたところで、次はいよいよ実際に導入してみましょう。
本当に簡単です。

Sentryユーザー登録、初期設定

  1. 公式サイトにアクセス
    https://sentry.io/welcome/
  2. 「GET STARTED」からアカウント登録(必要情報を入力)
    Sentryアカウント登録
  3. 認証を行う
    登録したメールアドレス宛に認証用メールが届くので、アクセス
    Sentry認証メール
    (こんな感じのメールが届きます。)
  4. Sentryでアプリケーションの言語を選択、プロジェクトを作成
    Sentryプロジェクト作成
  5. SentrySDKのインストール方法の確認
    選択した言語にあったSDKインストール方法(アプリケーションへのSentry読み込みの方法)が表示されます。
    Sentry導入方法説明
    丁寧に書かれてます、確認しましょう。

以上でSentryへの登録は完了。
次はアプリケーションへの導入方法を説明します。

アプリケーションへのSentry導入方法

実際に作成したアプリケーションのエラー検知をSentryへ送信する設定をしていきます。
Sentryの読み込みと、dsnコードを設置します。
※設定方法については前段の『5.SentrySDKのインストール方法の確認』に書いてあるので、
その手順に従って設定を行っていけば問題ありません。
dsnコードはSentryの管理画面から確認することができます。

Sentry管理画面dsnコード

取得した dsnコード を用いてSentryの設定を行います。

Sentry読み込み

これでSentryでエラー検知を行うための設定は完了となります。
(この画像の場合は、Reactを選択した場合の例です。ほかの言語やフレームワークへの導入も同じ感じでできるみたい。)

実際にエラーを起こしてみるとこうなるよ

実際にアプリケーションを動かし、意図的にエラーを起こしてみます。
アプリケーションとしては、身長と体重を入れるとBMI値を計算し、肥満度を判定するものとなっています。

Sentryエラー用コード

ボタンをクリックすると、意図的にエラーになるような仕組みです。

Sentry検証アプリ画面エラー

想定通り、エラーが発生しました。
さて…!Sentryにはどのように登録されているでしょうか。
Sentry管理画面をのぞいてみます。
こんな感じです。

Sentryエラー一覧検証

一番上に先ほど発生させたエラーが表示されているのが分かります。
詳細を見てみると、こんな感じでした。

Sentryエラー詳細検証1

Sentryエラー詳細検証2

(個人情報部分にモザイク入れてるので分かりにくいかもしれませんが)
日時やブラウザの情報とエラーの情報と行動履歴と…
ちゃんと確認できますネ。

Sentryのエラー情報のカスタマイズ

Sentryに送るエラー情報の一部はカスタマイズすることができます。
カスタマイズ用のオプションについては、公式サイトにももちろん載ってます。
https://docs.sentry.io/clients/javascript/config/#optional-settings
(上記は例として、Javascript用の情報となります。)

これを見ると、結構色々なカスタマイズができますね~。
例えば、一部例をあげると

  • setUserContext:Sentryを導入したアプリケーション内で使用しているユーザー情報(ログイン情報など)をセットできる
  • ignoreErrors:指定した文字列のエラーが発生した場合は無視
  • maxMessageLength:エラーログのMaxLengthを指定できる
  • ignoreUrls:指定した正規表現のパターンや文字列に一致するURL全体からのエラーは無視
    などなど。

アプリケーション内で使用しているユーザー情報、ログイン情報なんかは特に、付加情報としてSentryに送ることができたら
エラー検索する際にも、さらに便利になりますネ。

まとめ

サーバー側のエラー検知はしっかりしているけどフロント側は…という方も多いかもしれません。
まず導入が簡単なこと、そしてSentryの管理画面が見やすく管理しやすい(シンプルで十分な情報がトラッキングされてる)と感じます。
例えば、自分自身の環境では起きないけどある特定ユーザーの場合に起こる環境要因のフロントエラーなども、
Sentryでユーザーを指定して検索すればエラーの情報やユーザー情報、行動、ブラウザ情報も追うことができます。
そういった点でも、Sentryは便利なツールと言えますネ。

チケット管理機能も付いているので、「解決」ボタンをクリックすれば、エラー一覧画面からは削除されたり、
管理していく上での機能も、備わっている印象です。

手順を説明した通り登録も導入も簡単なので、まずは無料版をトライアルで使ってみてもいいかもしれません。

以上、ありがとうございました。