Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

24,156 views

Published on

LINE エンジニアインターンシップ 2017 成果発表

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Webアプリケーション上で 起きている問題の可視化
  2. 2. Webトラッキングシステムが あることをご存知ですか?
  3. 3. Webトラッキングシステム「torimochi」 • フロントエンドで使われているエラー検知、ログ収集システム。 • 取得できるデータはPVやセッション数の他に…
  4. 4. 背景 • 取得したデータはkibana上で確認しているが、日常的に確認してい る開発者は限られている。 • エラーログからどこで問題が起きているのか推測するのが難しい。
  5. 5. 目標 • torimochiのデータを活用したプロダクトが増えること。 • リリース直後などに起きた問題を素早く解決できること。 • 見やすいこと。
  6. 6. mochigome • torimochi専用ダッシュボード • 一覧性が担保されており、エラー発生率の高いサービスを俯瞰して 把握できる • 少ないステップで自分のサービスまでたどり着ける • 問題が発生してしまった時に、どんな問題で、どんな環境で起きてい るのかがわかる
  7. 7. #機能1 プロダクトで起きている問題を 俯瞰して把握できるView
  8. 8. #機能2 プロダクトの詳細を 素早く確認できるOverview
  9. 9. #機能3 プロダクトで起きているエラーを 確認できるErrorListView
  10. 10. #機能4 起きているエラーの該当箇所を ハイライトしてくれるFileView
  11. 11. #機能5 エラー発生率が閾値を超えた際に 通知してくれるLINE Notify
  12. 12. デモ
  13. 13. アーキテクチャ express(NodeJS) elasticsearch mochigome(web) :Nuxt.js mochigome(backend) API server Websocket server elastic query(x6)
  14. 14. 作ってみて • 機能要件は一通り満たしたので、満足。 • しかし、このツールが果たして使われるのか? • 自分が使ってないのに人にすすめることなんてできない!! LINE newstabに送ったプルリクがマージされました
  15. 15. 結果 • 当初27.12%のエラー発生率だったnewstabが0.55%まで改善
  16. 16. 結果 • ピーク時に起きている1777429件のエラーが0件になりました
  17. 17. 🎉
  18. 18. 感想 • LINEのログを生で見ることができ良い体験になりました。 • JavaScriptやElasticSearchの知見を沢山得ることができました。 • ServerSideRenderingはつらい。
  19. 19. 最後に • UIT室でディスプレイしてもら いました!
  20. 20. ご清聴ありがとうございました。

×