Webアプリケーション上で起きている問題の可視化

Webアプリケーション上で
起きている問題の可視化

Webトラッキングシステムが
あることをご存知ですか？

Webトラッキングシステム「torimochi」
• フロントエンドで使われているエラー検知、ログ収集システム。
• 取得できるデータはPVやセッション数の他に…

背景
• 取得したデータはkibana上で確認しているが、日常的に確認してい
る開発者は限られている。
• エラーログからどこで問題が起きているのか推測するのが難しい。

目標
• torimochiのデータを活用したプロダクトが増えること。
• リリース直後などに起きた問題を素早く解決できること。
• 見やすいこと。

Webアプリケーション上で起きている問題の可視化

mochigome
• torimochi専用ダッシュボード
• 一覧性が担保されており、エラー発生率の高いサービスを俯瞰して
把握できる
• 少ないステップで自分のサービスまでたどり着ける
• 問題が発生してしまった時に、どんな問題で、どんな環境で起きてい
るのかがわかる

#機能1 プロダクトで起きている問題を
俯瞰して把握できるView

#機能2 プロダクトの詳細を
素早く確認できるOverview

#機能3 プロダクトで起きているエラーを
確認できるErrorListView

#機能4 起きているエラーの該当箇所を
ハイライトしてくれるFileView

#機能5
エラー発生率が閾値を超えた際に
通知してくれるLINE Notify

アーキテクチャ
express(NodeJS)
elasticsearch
mochigome(web)
:Nuxt.js
mochigome(backend)
API server
Websocket server
elastic query(x6)

作ってみて
• 機能要件は一通り満たしたので、満足。
• しかし、このツールが果たして使われるのか？
• 自分が使ってないのに人にすすめることなんてできない！！
LINE newstabに送ったプルリクがマージされました

結果
• 当初27.12%のエラー発生率だったnewstabが0.55%まで改善

結果
• ピーク時に起きている1777429件のエラーが0件になりました

感想
• LINEのログを生で見ることができ良い体験になりました。
• JavaScriptやElasticSearchの知見を沢山得ることができました。
• ServerSideRenderingはつらい。

最後に
• UIT室でディスプレイしてもら
いました！

ご清聴ありがとうございました。

More Related Content