こんにちは、辻 @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）が比較的活用しているようです。
JSはサードパーティライブラリ（Google Mapとか）のエラーも検知してしまったり、webpackががっちゃんこしてくれてる依存関係のライブラリで起こるエラーがあったりで、現状は結構ファルスポジティブ側に寄ってます。誤検知は言い過ぎか。
bugsnag.jsはエラー通知を飛ばすタイミングにコールバックを仕込めるので、そこでごにょごにょすればログレベルを変えたりできるので、その辺はJSポリスが調整している感じです。
入れてみてどうなの
意外と変なエラーって出てるんだなと思いました。古い端末とかね。
あとポリフィル必要なのかなーって議論もしたりとか、自分が持ってない知見も触れる機会になったりしていい感じです。
サーバサイドはちゃんとエラーをモニタリングしてるけど、クライアントサイドはなんもしてないわ、ってプロジェクトの方はちょっと試してみてもいいかもですね。
Ristaでは4人目のエンジニアを募集してます
株式会社リスタではたらいてみませんか。
はやくしないとVue.jsとかが入っちゃうかもよ。今なら一緒に議論して導入とか設計もやれるよ。
AndroidやiOSアプリもあるよ。出したばっかりなのでまだまだ裁量もってやれる範囲が大きいよ。
気になったら気軽にお話を聞きに来てね！
