【要約】続・インフラしかわからん民がフロントエンドアプリにコピペでエージェント導入するお試しアプリを用意してみた!やってみて!! [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
システムの複雑化により、サーバーのリソースだけではユーザー体験の低下原因を特定できない事態が生じている。フロントエンドの挙動を把握したいが、以下の課題に直面する場合がある。
- ・サーバーのメトリクスだけでは、ユーザーの操作感やフロントエンドの不具合を把握できない。
- ・フロントエンドのコードを直接編集・ビルドするスキルや権限が不足している。
- ・ビルド済みの静的ファイルしか扱えない環境では、npmによるエージェント導入が困難である。
// Approach
インフラエンジニアでも導入しやすいよう、JSスニペットをHTMLに直接埋め込む手法を採用する。具体的な手順は以下の通りである。
1.New Relicポータルから、Browser monitoring用のJavaScriptスニペットを取得する。
2.取得したスニペットを、フロントエンドアプリの
index.html内の<head>タグ直下に貼り付ける。3.スニペットは、他のスクリプトよりも先に実行されるよう配置し、計測精度を高める。
4.NGINX等のWebサーバーを用いて、修正したHTMLを配信する環境を構築する。
// Result
フロントエンドの挙動を可視化し、ユーザーの操作ログを詳細に把握できるようになった。導入により以下の成果が得られる。
- ・Session Replay機能により、ユーザーのマウスの動きや画面遷移を動画のように再現できる。
- ・フロントエンド特有の事象を、インフラの視点から分析可能になる。
- ・最小限の手間で、フロントエンドのオブザーバビリティを向上させられる。
Senior Engineer Insight
> 本手法は、ビルドへの介入が困難な環境や、フロントエンド開発リソースが不足する現場で、実用的な回避策となる。Session Replayによるユーザー行動の可視化は、UX改善において強力な武器だ。ただし、スニペットの挿入位置や読み込み順序が、ページのレンダリング性能に与える影響は無視できない。大規模トラフィック環境では、エージェントのオーバーヘッドを慎重に評価すべきである。