Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
New Relic Browser Monitoring について
Search
Ken Yamamoto
November 20, 2024
Programming
0
130
New Relic Browser Monitoring について
Ken Yamamoto
November 20, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
画像コンペでのベースラインモデルの育て方
tattaka
3
1.2k
階層化自動テストで開発に機動力を
ickx
1
470
あのころの iPod を どうにか再生させたい
orumin
2
260
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
AIのメモリー
watany
12
1.3k
ワープロって実は計算機で
pepepper
1
810
Vibe coding コードレビュー
kinopeee
0
410
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
440
Infer入門
riru
2
380
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
240
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Building an army of robots
kneath
306
45k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Transcript
New Relic Browser Monitoring について 初登壇 フロントエラー調査を改善した話 株式会社じげん 山本 憲
2024年11月19日
アジェンダ 自己紹介 フロントエラー検知改善の経緯 いざ実装 New Relicの改善をやってみて 1. 2. 3. 4.
山本 憲 株式会社じげんの新卒1年目。 ライフサポート事業部で「リショップナビ」の開発チームに所属。 現在はフロントエンド開発が中心。 大学時代は不動産ITベンチャーで3年間エンジニアとしてインターンシ ップ、アルバイトを経験。 ニックネームはケニー。 自己紹介
Cloud Watch見ても 長いし見にくい New Relicどこ見るの フロントエラー検知改善の経緯 元々調査タスクをあまりやったことがない、かつフロントエンドもあまり詳しくない中で、 エラーの調査をするのにすごく時間かかってしまっていた フロントエンドのエラー調査頼まれたけど、よくわからない、 、
、 ここをしっかりとれるようにすればもっと簡単になるんじゃないか?? と考えた NewRelicにBrowserっていうのがあるけどErrorなにも取れてない
フロントエラー検知改善の経緯 Session Replay を導入できたらエラーが起きた時のユーザーの行動が確認できて かなり良さそう、 、 、! セッションリプレイは、Web アプリでユーザーのインタラクションを再生し、その他のテ レメトリーデータをマッピングして、ユーザーの行動を理解するのに役立ちます。
(公式ドキュメントより) 調べると色々出てきて可能性を感じた 改善導入案を提案させていただき、相談の結果、ゴールとして ・Browser Errorを取得できるようにする ・エラー発生時のリプレイを取得できるようにする を目標に改善を始めることになった。 上司に相談してNewRelic改善を提案 Session Replay画面例 Browser Errors 画面例
いざ実装 公式ドキュメントを読み込んでそれ通りに既存処理を改修 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でスニペットの位置を修正
いざ実装 実際動かしてみると、 、 、 Browser Errorは取得できるようになった! リプレイはエラー発生時のみ取得したかったので、サンプルレート0, エラーレ ート100に設定しエラーのみ取得できるよう試みたが、取得できなかった、 、
、 => リリース後や取得したいエラーが頻発しているときにサンプルレートをあげ ることで対応することに
New Relicの改善をやってみて 入社して初めて上長に提案をし、要件をまとめて実現まで至った初めての タスクだったので、とにかくやりがいがあり、かつ自分の業務もグッと楽 になった 取得できるようになったフロントエンドエラーを解決していく体制をチー ムで整えたい 今後のNew Relicのアップデートに注目して、導入できそうなものがあれ ばチームで共有して使ってみたい
ご清聴ありがとうございました。 Xのエンジニアアカウントのフォローお願いします 🥹 @_kennyjp