最近、家の近くに某チェーンの唐揚げ専門店ができ、ランチの選択に困ることがなくなってきた伊藤です。
今回は、フロントエンドのバグ管理ツール（Sentry.io）の導入の話しをさせて頂こうかと思います。
導入背景
様々なバグ通知があるなかで、下記の観点からSentry.ioの導入を行いました。
フロントエンドのバグ通知に特化している。
ユーザの使用環境をトレースできる。
ユーザのUI動作を追える機能がある。
導入観点の詳細
順を追って説明します。
1. フロントエンドのバグ通知に特化している。
様々なバグ通知サービスがある中で、フロントエンドのバグ通知に特化していることによって、フロントエンド側の導入コストを最小限に抑えることができます。 実際、キーの発行とライブラリを記載するぐらいで導入することができました。
2. ユーザの使用環境をトレースできる。
フロントエンドは、サーバサイドに比べるとユーザに近いため、ユーザが使用する環境に大きく左右されます。 例えば、使用するデバイス（PCやタブレット及びiPhoneやAndroid）やブラウザ（IEやFireFox、Chromeなど）など様々な環境があり、バグの原因を特定するためにはサーバサイドとは異なる情報が必要となります。 下記の画像は、バグが発生した際のSentry.ioの画面です。 ブラウザやOSそれらバージョンが細かく記述さているため、ユーザの使用環境を確認することができます。
3. ユーザのUI動作を追える。
当時の調査ではSentryでのみこの機能が確認でき、導入の決め手になった機能です。 フロントエンドでバグの発生原因を特定する（再現する）ためには、ユーザの操作・動作も情報として取得する必要があります。 例えば、クリックした要素（リンクやテキストなどのエレメント）やどの順番でクリックしたのかなど、再現するための手順を確認することができます。
まとめ
昨今フロントエンドのバグ通知ツールが多くリリースされています。 今回は、1導入事例として挙げさせていただきます。
参考
- エラーを迅速に解決するための5つのベストプラクティス https://pagerduty.digitalstacks.net/blog/5-best-practices-resolve-errors-sentry/
