New Relic Browser Agent概要 - リアルユーザーモニタリングの基本
New Relic Browser Agentは、WebサイトやWebアプリケーションのパフォーマンスを実際のユーザーの視点から監視するためのツールです。この記事では、Browser Agentの基本概念、主要機能、導入方法について解説します。
Browser Agentの概要
Browser Agentは、Webページに組み込むJavaScriptコードで、ユーザーのブラウザで直接動作します。このエージェントは、ユーザーが実際に体験しているパフォーマンスデータを自動的に収集し、New Relicに送信します。
Browser Agentの特徴
Browser Agentは、以下の特徴でフロントエンド監視を実現します。
リアルユーザーデータの収集により、実際のユーザーが体験しているページ読み込み時間や操作レスポンスを測定できます。
自動監視機能では、コードの追加なしでページパフォーマンスやエラーの自動収集が可能です。
軽量設計により、ウェブページのパフォーマンスに影響を与えず、独立して動作します。
主要な監視機能
Browser Agentは、多様なフロントエンドの活動を自動的に監視します。
ページパフォーマンス
ページ読み込み時間、DOMの構築完了時間、画像の読み込み状況など、Webページのパフォーマンスを包括的に測定します。
Ajax・フェッチ監視
ページから送信されるAPIリクエストのレスポンス時間、ステータスコード、エラー状況を自動監視し、APIのパフォーマンスを評価できます。
JavaScriptエラー
ページで発生したJavaScriptエラー、未処理の例外、Promiseのリジェクションなどを自動キャッチし、エラーの頻度や影響範囲を把握できます。
Core Web Vitals
Googleが定義したユーザーエクスペリエンスの品質指標（LCP、INP、CLS）を自動測定し、SEOとユーザー体験の改善に必要なデータを提供します。
セッション監視
ユーザーのサイト内での行動、滞在時間、ページ遷移パターンなどを追跡し、サイトの使いやすさを分析できます。
導入方法
Browser Agentの導入には、2つの主要な方法があります。
APMとの連携導入
既にNew RelicのAPM（Application Performance Monitoring）エージェントをサーバーサイドで使用している場合、自動的にBrowser AgentコードをWebページに注入できます。これにより、フロントエンドとバックエンドのデータが連携した分析が可能になります。
手動スニペット導入
APMエージェントを使用していない場合や、静的サイトでは、HTMLページに直接JavaScriptスニペットを追加します。New Relic管理画面から取得できるコードをヘッダー部分に貼り付けるだけで導入できます。
パフォーマンスへの配慮
Browser Agentは、Webページのパフォーマンスに影響を与えないよう設計されています。
軽量なコード
スクリプトサイズは小さく、ページの読み込みや表示をブロックしません。非同期で動作するため、ユーザーの操作を妨げることもありません。
アダプティブなデータ送信
ネットワークの状況やデバイスのパフォーマンスに応じて、データ送信の頻度や量を自動調整します。
まとめ
New Relic Browser Agentは、WebサイトやWebアプリケーションのフロントエンドパフォーマンスを実ユーザーの視点から監視するための強力なツールです。
主な機能は以下の通りです：
- ページ読み込みパフォーマンスの測定
- Ajax・API通信の監視
- JavaScriptエラーの自動収集
- Core Web Vitalsの計測
- ユーザーセッションの分析
Browser Agentは軽量で高速であり、既存のWebサイトに簡単に組み込むことができます。収集されたデータはNew Relicプラットフォームで詳細に分析でき、Webサイトのパフォーマンス改善やユーザーエクスペリエンス向上に役立てられます。
次のステップとして、具体的な統合方法や高度な監視設定について学習を進めてみましょう。
関連記事: SPA監視設定ガイド関連記事: Core Web Vitals監視設定