「フロントエンド・オブザーバビリティ Meetup」に参加してきました

• 2024/8/28
• https://uzabase-tech.connpass.com/event/324317/

感想

• 発表はフロントエンド固有じゃない話も多かったけど、参加者で取り組みが進んでる人の話を聞けたのが学びでした
• 自分のところでも何ができると嬉しいのか考えてやれることからやってみようと思った

フロントエンドエンジニアとして、オブザーバビリティにコミットすること

• イイダ ユカコさん

オブサーバビリティ

• 不具合発生時に何が起きてるかわからない
• ユーザ体験に問題があるかどうかわからない

ClassiにおけるSentry活用事例

• lacolacoさん

SentryとObservability

• エラーモニタリング
  • ブラウザ上でのエラーを収集して可視化してくれる
• パフォーマンスのトレーシング
• セッションリプレイ
  • どういう操作をしてエラーにたどり着いたか画面として再現できる
  • DOMの流れを見られる
• web vitalsの計測

Sentryの活用

• エラー監視
  • 定期的なモニタリング
    • 週次レポート
    • エラー増減の原因が特定できてるかどうか
• パフォーマンス分析
  • web vitals見てどこに伸びしろがあるか
  • どのページから手をつけるか
• セキュリティ強化
  • ContentSecurityPolicy
  • レポートの送り先にSentryを使ってる

observabilityを支える要素技術

• sadnessOjisanさん

フロントエンドのo11y

• インフラのモニタリング
  • 計測するやつが収集先に送ってそれを見る
• ブラウザのモニタリング
  • Lighthouse
  • 人の環境で実行する
    • Real User Monitering
    • ヒートマップ
  • ブラウザのAPIでパフォーマンスとれるのでそれを収集
• OpenTelemetry
  • トレーシングとかメトリクスをとるもの
  • ライブラリを入れるだけで動かせる
    • よく使われるライブラリの特定の関数が呼ばれたときに処理をはさむ
    • それだけだと足りないので手動で追加する方がいい
      • 大変だだし計測のコードで汚れていく

こつこつ育てる SLO

• ニッシーさん

SLOとオブサーバビリティ

• SLOがあることで今やるべきことを判断できる
  • 開発するべきか改善するべきか
• SLOにオブサーバビリティのデータを使うことでデバッグ容易な値を定められる
  • SLOを改善することがユーザへの価値につながる
• SLOの継続見直し
  • 月次でチェックしてる