フロントエンドアプリケーションへのSentry導入のススメ

Sentryはさまざまな言語に対応しているイベントログ収集ツールです。
サーバサイドのエラー検知にも大変便利に働くのですがやはりなかなか検知と詳細の把握が難しかったフロントエンドで最大の価値を発揮します。
エラーの発生デバイスやブラウザ、ユーザーの操作フローなどかなり詳細に追うことができるのでエラー検知ができていなかったところに対して対応ができるだけではなく、デバッグスピードも格段に早くなること間違いなしのツールです。

Sentry | Error Tracking Software — JavaScript, Python, PHP, Ruby, more

下記はSentryの管理画面です。
かなりわかりやすくエラーをまとめてくれます。

こちらはbundleされてminifyされたjsのエラーですがstacktraceがめちゃくちゃわかりやすいですね。

さらにシステムの動作とユーザーの操作フローを時系列にまとめて表示してくれる。
どこのDOMをクリックして発生したかもわかりやすいです。

他にもUser-AgentやIPアドレス、ユーザーのデバイスやOSとそのバージョン、ブラウザも完璧にわかります。

Slack連携も可能なのでエラーが発生したら即座に検知でき、詳細をSentryの管理画面から確認して爆速対応が可能になります。
もう導入するしかないぐらいのレベルですね。

こちらの記事で実際にreact-reduxのプロジェクトにSentryを導入する流れをまとめています。
keyama.hatenablog.com