Rista Tech Blog

株式会社リスタの技術?ブログ

bugsnag.jsでJSのエラーを監視するようにしたらJSポリスの仕事が捗るようになった

こんにちは、辻 @dim0627です。

最近はそうですね、ずっとお腹が空いてます。成長期かもしれません。

今日はbugsnag.jsについて書きますね。

bugsnag

エラーモニタリングツールです。

Error reporting, monitoring, and resolution with Bugsnag

弊社ではGemを入れてサーバサイドの監視をしていたのですが、

bugsnag/bugsnag-ruby: Bugsnag error monitoring for rails, sinatra, rack and ruby

先日のES6移行を契機にクライアントサイド側で起こるJSエラーもモニタリングする設定にしました。

bugsnag.js

先程のサーバサイドのものとちがって、JSのエラーを検知するJSのライブラリです。

CDNも用意されていて、data attributesをうまくやるだけで設定できちゃう優れもの。

ですがHTTPリクエストは気軽に増やしたくないので、弊社ではyarnで入れたものをwebpackで梱包して利用しています。

{
  "license": "MIT",
  "dependencies": {
    "@rails/webpacker": "^3.0.1",
    :
    "bugsnag-js": "^3.2.2",
    :
  },
  "devDependencies": {
    :
    "webpack-dev-server": "^2.8.1"
    :
  }
}

環境情報を設定したいのと、API_KEYを分散させたくないので、弊社の設定ではjs.erbを使って一度ERBとしてロードさせています。

require('bugsnag-js');

Bugsnag.apiKey = "<%= Bugsnag.configuration.api_key %>";
Bugsnag.releaseStage = "<%= Rails.env %>";
Bugsnag.notifyReleaseStages = ["production"];

この辺くそみたいに気持ち悪いので、いい方法あれば教えてください。

Source Mapも読んでくれるよ

JSはMinifyしてあっても、Source Mapがバンドルされていればbugsnagのダッシュボードではそっちからエラーした箇所を表示してくれます。

webpackerは標準でSource Mapを作る設定になっているので、何もしなくてもうまいことやってくれます。 Source Map、本番じゃいらないんじゃね?みたいな議論もしたんですが、このために現状は作る設定を維持しています。

JSポリスのしごと

ぶっちゃけ僕は導入しようぜって言っただけでほとんど何もしてないのですが、弊社のJSポリス(望月 @c5meru)が比較的活用しているようです。

f:id:dim0627:20171102084807p:plain

JSはサードパーティライブラリ(Google Mapとか)のエラーも検知してしまったり、webpackががっちゃんこしてくれてる依存関係のライブラリで起こるエラーがあったりで、現状は結構ファルスポジティブ側に寄ってます。誤検知は言い過ぎか。

bugsnag.jsはエラー通知を飛ばすタイミングにコールバックを仕込めるので、そこでごにょごにょすればログレベルを変えたりできるので、その辺はJSポリスが調整している感じです。

入れてみてどうなの

意外と変なエラーって出てるんだなと思いました。古い端末とかね。

あとポリフィル必要なのかなーって議論もしたりとか、自分が持ってない知見も触れる機会になったりしていい感じです。

サーバサイドはちゃんとエラーをモニタリングしてるけど、クライアントサイドはなんもしてないわ、ってプロジェクトの方はちょっと試してみてもいいかもですね。

Ristaでは4人目のエンジニアを募集してます

株式会社リスタではたらいてみませんか。

はやくしないとVue.jsとかが入っちゃうかもよ。今なら一緒に議論して導入とか設計もやれるよ。

AndroidやiOSアプリもあるよ。出したばっかりなのでまだまだ裁量もってやれる範囲が大きいよ。

気になったら気軽にお話を聞きに来てね!

株式会社リスタの採用/求人一覧 - Wantedly