LCLの開発者ブログ2017-01-31JavaScriptのエラーをBugsnagで監視していますフロントエンドフロントエンドエンジニアの岡田です。先日、夜行バス比較なびを一部React+ES2015化しましたが、これに備えて、LCLでは昨年11月頃からBugsnagでJavaScriptのエラー監視を開始していました。今回は、Bugsnagについて、簡単な説明と導入方法をまとめました。BugsnagとはBugsnagは、アプリケーションのエラーを監視して報告してくれるツールです。Rails)のエラーを監視していましたが、そこにJavaScriptのエラー監視も入れました。Bugsnag管理画面の使い方Bugsnagの管理画面は以下のようになっています。以下の画面はすでに解消したエラーの実際のレポートです。(件数が多いのは、レポートを受けた時点で実機確認をして動作に問題がなかったので、対応が後回しになったためです)LCLではYoutrackを使っていますが、連携すると「!」ボタンを押すだけでissueが作成されるので便利です。他にもGithubやJIRAなどとも連携できるようです。docs.bugsnag.com画面左側のTrendやSummariesを見ながら、以下のようなエラーは優先的に対応をするようにしています。最近急増したエラースマホのエラー(夜行バス比較なびでは約8割がスマホユーザーのため)BREADCRUMBSでは、ユーザーがどのような操作をしたときにエラーが起きたのかが見えるので、自分の手元の環境で再現するかどうかを確かめる時に役立ちます。設定方法LCLではすでにRailsの監視を行っていたため、JSの監視のために必要なのは以下のファイルを読み込むだけでした。data-releasestage="production"></script>上記は本番(production)の例です。ステージ名はRailsで判定して出力しています。Bugsnag管理画面では以下のように表示され、どの環境で起きたエラーなのかがわかります。設定についての詳細は以下のページに載っています。日々のエラーはChatworkへ通知するようにしています。リリース後で新たなエラーが起きた場合はすぐにチェックしますが、そうでないものは、1日2回程度、軽くチェックしています。便利なツールですが、課題もあります。Bugsnag管理画面のスレッドの分け方がよくわかりません。違うエラーメッセージでもまとまっていたり、同じようにみえるものも別れたりします。これは私がわかっていないだけかもしれません。手元の環境では再現しないバグも多く、原因がわからないままのものがあります。エラーの確認に時間がかかります。レアなバグでも問題ないと判定するまでに少し時間がかかるので、優先度の低いものはあまり深追いしないようにしていきたいと思います。23:30JavaScriptのエラーをBugsnagで監視していますTweet関連記事2019-01-10Node.jsを10.13.0へバージョンアップしましたフロントエンドエンジニアの岡田です。今年の私のブログの目標...2018-12-27JOBのログ出力をちょっと便利にした話Webエンジニアの横塚です。LCLでは、JOB管理にクックパッド社...2018-05-27がんばるタイム、止めましたフロントエンドエンジニアの岡田です。Hubotを利用してデプロイをしていましたが...2018-03-28Bugsnagでエラーが多すぎる時に設定する3つの項目フロントエンドエンジニアの岡田です。(1)執筆者リストid:kavis777id:ktx_kuid:yamshtaid:ytkr0813id:shymstid:kasei_sanid:lcl-engineer月別アーカイブ検索はてなブログをはじめよう!lcl-engineerさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。