Errbitでサイト上のJavascriptエラーを検知して知らせる

こんにちは佐々木です。

今回はErrbitを使い、Webサイトを運営していく上で起こりうるエラーの検知を、今時のスタイルで把握できるようにしたいと思います。

例えば・・・、大規模なサイトになってくると、思わぬ所でJSエラーが出っぱなしという事ありますよね。

それでは、Errbitを利用し、JavascriptのエラーをSlack通知したり、メール通知したりする方法をご紹介します！

Errbitをインストールする

まず、Errbitはフリーで利用できますので安心してください。

インストールする前に、ErrbitはRuby on Railsで作られているため、Rubyが必要になります。
また、MongoDBというものが必要になります。

下記が必要なソフトです。
・MongoDB
・Ruby
・Errbit
・nginxやApache等

Centosのインストールは下記のブログ等が参考になるかと思います
ErrbitをCentOS6.5にインストール – QiitaQiita

当方はApache+Passengerで動作させて使用しています。

※ErrbitはAirbrakeのオープンソース版ですので、インストールができない環境の場合にはAirbrakeのサービスを利用しても同様の事が可能です。
お金がかかるのが難点ですが・・・。

下記が有料のサービスAirbrakeのWebサイトです
Airbrake – The best bug tracker and error tracking software.

Errbitの設定

Errbitがインストールできたら、「Add a New App」で新規作成します。

名前はサービス名等で良いと思います。
今回はテスト用に「テスト」としました。

下部にある「NOTIFICATION SERVICE」の中からSlack等を選択すると、エラー発生時にSlackに通知してくれるようになります。

「ADD APP」で登録が完了すると、
「config.host」と「config.project_id」、「config.project_key」という値が出てきます。
上記を、各エラー検知したいサービスやソースコードに利用します。

Javascriptのエラーを検知してみる

Javascriptの検知は簡単で、下記のようにします。
追加する場所はheadタグ内のJavascriptを呼び出すscriptタグの一番最初に配置しましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/0.6.0/client.min.js"></script>
<script>
var airbrake = new airbrakeJs.Client({
  projectId: '{{config.project_id}}',
  projectKey: '{{config.project_key}}',
  reporter: 'xhr',
  host: '{{config.host}}'
});
</script>

{{config.project_id}}、{{config.project_key}}、{{config.host}}の値を変更し忘れないようにしてください。

設定が完了したら、下記のようにエラーをわざと発生させてみてください。

<script>
error_ga_deruyo();
</script>

エラーを検知すると、Errbitの画面に下記のように表示されます。

解決をしたら「Reloved」を押しましょう。
不要であればチェックをして「Delete」ですね。

メールの通知先を設定する

「watch」を押すとエラー発生時にメール通知されるようになります。
※メールの通知先は画面右上のEdit Profileからメールアドレスを変更してください。

いかがでしたでしょうか。
見落としがちなJavascriptのエラー発見できるので有効ですよね。

実はErrbit様々なエラーを検知できますので
PHPやRuby on Rails、Perl等様々に対応していますので是非活用していきたいですね。