食べログフロントエンドのエラー管理方法

Sentry LTイベントの発表資料

イベント詳細:
Sentry本国のエンジニア登壇！Sentry 活用できてる？利用企業から学ぶエラー管理LT
https://findy.connpass.com/event/292659/

発表者:
株式会社カカクコム 食べログ フロントエンドチーム 遠藤司樹

Transcript

1. ⾷べログフロントエンドの エラー管理⽅法 2023. 08. 30 Endo Shiki
2. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ⾃⼰紹介🍜 • 遠藤 司樹 (@shikky0331) • 2021年 株式会社カカクコム⼊社 • ⾷べログフロントエンドチーム • jQuery から Reactへのリプレース, Webpack バージョンアップ • 愛⽝⼤好き（名前はういちゃん）
3. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ⽬次 1. ⾷べログの現状 2. エラーの切り分け⽅法 3. エラーを確認するタイミング 4. まとめ
4. １. ⾷べログの現状
5. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ⾷べログには⼤量アクセス ※月間利用者数の計測方法について： サイトを訪れた人をブラウザベースで数えた利用者数です（特定のブラウザ、OS等によっては一定期間経過後に再訪した利用者を重複計測する場合があります）。モバイル端末のウェブページ 高速表示に伴う利用者数の重複や、第三者による自動収集プログラムなどの機械的なアクセスについては可能な限り排除して計測しています。なお、食べログにおいては、2022年２月をもって AMP（Accelerated Mobile Pages）対応を終了いたしました。 https://corporate.kakaku.com/company/service
6. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ⾷べログには様々なブラウザからアクセスがくる
7. Copyright (c) Kakaku.com, Inc. All Rights Reserved. エラーを⼤きく2つに分けて考える 対応したいエラーとそうでないエラーが混在！ l サポート内のブラウザ・OSで発⽣ l ⾃分達が書いたコードに起因 l サポート外のブラウザ・OSで発⽣ l 通信環境が不安定 l スクレイピング ⾷べログコードのエラー ユーザーの環境依存のエラー 優先 対応
8. Copyright (c) Kakaku.com, Inc. All Rights Reserved. 環境依存エラーと⾷べログコードのエラーが混在！ ブラウザのプラグインのエラー メモリ⾜りないエラー サポート外のブラウザ・OSのエラー 通信が不安定だったエラー スクレイピングっぽい何かのエラー サポート内のブラウザ・OSの中で起こってる ⾃分達が書いたコードのエラー！！
9. 2. エラーの切り分け⽅法
10. Copyright (c) Kakaku.com, Inc. All Rights Reserved. 多くのユーザーで発⽣しているエラーを⾒つけて当たりをつける
11. Copyright (c) Kakaku.com, Inc. All Rights Reserved. エラー詳細の⾒ているポイント
12. Copyright (c) Kakaku.com, Inc. All Rights Reserved. エラー詳細の⾒ているポイント
13. 3. エラーを確認するタイミング
14. Copyright (c) Kakaku.com, Inc. All Rights Reserved. エラーを確認するタイミングを3つ ① アラート通知 ② 毎日の新規エラーチェック ③⽉次の既存エラーチェック
15. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ①アラート通知
16. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ②毎⽇の新規エラーチェック
17. Copyright (c) Kakaku.com, Inc. All Rights Reserved. ③⽉次の既存エラーチェック
18. 4. まとめ
19. Copyright (c) Kakaku.com, Inc. All Rights Reserved. まとめ q 食べログでは様々な環境から大量のアクセスがある q 環境依存によるエラーが混在する多くのエラーの中から、優先して対応すべきエ ラーとそうでないエラーを切り分けるのが難しいが運用でカバーしている q 多くのユーザーに影響を与えているエラーを見つけて当たりをつけ、エラー詳細の項目を見て総合的 に分析することでエラーを切り分けている q アラート通知・毎日の新規エラーチェック・月次の既存エラーチェックの3つのタイミングでエラー を確認することで漏れがなくエラーを検知している q 対応すべきエラーをいち早く見つけ、ユーザーによりよりサービスを提供できる 状態になっている
20. Copyright (c) Kakaku.com, Inc. All Rights Reserved. 今後の Sentry でやりたいこと n エラーを送信するブラウザを User Agent で制限しているが、それでもサポート外 のブラウザからエラーが届いているので、他の⽅法も使って制限したい n 現状は Sentry の活⽤法がフロントエンドのエラートラッキングなのでパフォーマ ンスや他の機能も活⽤したい
21. Copyright (c) Kakaku.com, Inc. All Rights Reserved. さいごに① n ブログやってます!!!! n フロントエンド以外の記事もあります n https://tech-blog.tabelog.com/
22. Copyright (c) Kakaku.com, Inc. All Rights Reserved. さいごに② n We are hiring!!!! n ⼀緒に⼤規模システムに⽴ち向かいませんか？ n フロントエンド以外の職種も募集中です🍜 n https://hrmos.co/pages/kakakucom/jobs/1011030