New Relic Browser Monitoring について

Transcript

1. New Relic Browser Monitoring について 初登壇 フロントエラー調査を改善した話 株式会社じげん 山本 憲 2024年11月19日
2. アジェンダ 自己紹介 フロントエラー検知改善の経緯 いざ実装 New Relicの改善をやってみて 1. 2. 3. 4.
3. 山本 憲 株式会社じげんの新卒1年目。 ライフサポート事業部で「リショップナビ」の開発チームに所属。 現在はフロントエンド開発が中心。 大学時代は不動産ITベンチャーで3年間エンジニアとしてインターンシ ップ、アルバイトを経験。 ニックネームはケニー。 自己紹介
4. Cloud Watch見ても 長いし見にくい New Relicどこ見るの フロントエラー検知改善の経緯 元々調査タスクをあまりやったことがない、かつフロントエンドもあまり詳しくない中で、 エラーの調査をするのにすごく時間かかってしまっていた フロントエンドのエラー調査頼まれたけど、よくわからない、 、 、 ここをしっかりとれるようにすればもっと簡単になるんじゃないか？？ と考えた NewRelicにBrowserっていうのがあるけどErrorなにも取れてない
5. フロントエラー検知改善の経緯 Session Replay を導入できたらエラーが起きた時のユーザーの行動が確認できて かなり良さそう、 、 、！ セッションリプレイは、Web アプリでユーザーのインタラクションを再生し、その他のテ レメトリーデータをマッピングして、ユーザーの行動を理解するのに役立ちます。 （公式ドキュメントより） 調べると色々出てきて可能性を感じた 改善導入案を提案させていただき、相談の結果、ゴールとして ・Browser Errorを取得できるようにする ・エラー発生時のリプレイを取得できるようにする を目標に改善を始めることになった。 上司に相談してNewRelic改善を提案 Session Replay画面例 Browser Errors 画面例
6. いざ実装 公式ドキュメントを読み込んでそれ通りに既存処理を改修 https://newrelic.com/blog/how-to-relic/how-to-monitor-app-based-router- nextjs-application 主にやったこととしては ・NewRelicバージョンアップ (11.20.0 -> 12.3.0) ・error.tsxに下記を追加 ・layout.tsxでスニペットの位置を修正
7. いざ実装 実際動かしてみると、 、 、 Browser Errorは取得できるようになった！ リプレイはエラー発生時のみ取得したかったので、サンプルレート0, エラーレ ート100に設定しエラーのみ取得できるよう試みたが、取得できなかった、 、 、 　=> リリース後や取得したいエラーが頻発しているときにサンプルレートをあげ 　　 ることで対応することに
8. New Relicの改善をやってみて 入社して初めて上長に提案をし、要件をまとめて実現まで至った初めての タスクだったので、とにかくやりがいがあり、かつ自分の業務もグッと楽 になった 取得できるようになったフロントエンドエラーを解決していく体制をチー ムで整えたい 今後のNew Relicのアップデートに注目して、導入できそうなものがあれ ばチームで共有して使ってみたい
9. ご清聴ありがとうございました。 Xのエンジニアアカウントのフォローお願いします 🥹 @_kennyjp