New Relic SPA監視設定ガイド - シングルページアプリケーションの監視 ​

Single Page Application（SPA）は、ページ全体を再読み込みすることなく、JavaScriptでコンテンツを動的に更新するWebアプリケーションです。React、Vue.js、Angularなどのモダンなフレームワークで構築されることが多く、従来のページ監視とは異なるアプローチが必要です。New Relic Browser AgentのSPA監視機能は、こうしたアプリケーションの特徴に対応した監視を実現します。

SPA監視の特徴と課題 ​

従来のWebページでは、リンクをクリックするとブラウザが新しいページを読み込み、明確な「ページ読み込み完了」のタイミングがありました。しかしSPAでは、ページ遷移時にブラウザが新しいHTMLを読み込むのではなく、JavaScriptがDOMを更新し、必要に応じてAPIからデータを取得します。

このため、SPAでは以下のような監視課題があります。

主な監視課題 ​

ページ遷移の検知が困難で、URLが変わってもブラウザのページ読み込みイベントが発生しないため、従来の監視ツールでは適切に計測できません。

APIコールの完了タイミングが曖昧で、ページが表示されてからAPIからデータを取得して表示を完成させるまでの時間が、ユーザーの体験上重要な指標になります。

SPA監視の有効化 ​

New RelicでSPA監視を開始する手順はシンプルです。

基本設定 ​

  1. New RelicのBrowserアプリケーション設定で「SPA監視」を有効にします
  2. HTMLテンプレートの<head>セクションにBrowser Agentスクリプトを配置します

これだけで、Browser Agentが自動的にルート変更やAjax通信を検知し、SPAのパフォーマンスを計測し始めます。

必要に応じて、詳細な設定をカスタマイズできます。

javascript
// SPA監視のカスタム設定例
window.NREUM.loader_config = {
  spa: {
    enabled: true,
    harvestTimeSeconds: 10  // データ送信間隔
  }
};

ルート変更の自動検知 ​

New Relic Browser AgentはSPAアプリケーションのルート変更を自動的に検知します。

自動検知の仕組み ​

History API監視: ブラウザのpushState、replaceState、popstateイベントを監視して、URL変更を検知します。これにより、ブラウザの戻る・進むボタンでのナビゲーションも追跡されます。

Hash変更監視: ハッシュベースルーティングを使用するアプリケーションでは、hashchangeイベントを監視してルート変更を追跡します。

カスタムルート追跡 ​

より詳細なルート情報を収集したい場合は、カスタムイベントを送信できます。

javascript
// ルート変更のカスタム追跡
function trackRoute(routeName) {
  if (window.newrelic) {
    newrelic.addPageAction('route_change', {
      route: routeName
    });
  }
}

Ajax通信の自動監視 ​

SPAではAPIコールがユーザー体験に大きく影響するため、Ajax通信の監視が重要です。

自動監視機能 ​

Browser Agentは、XMLHttpRequestとfetch APIを自動的に監視し、以下の情報を収集します。

  • リクエストURLとHTTPメソッド
  • レスポンス時間とステータスコード
  • エラーの種別（タイムアウト、ネットワークエラー等）

これらの情報は自動的に収集され、New Relicのダッシュボードで確認できます。

カスタムイベントの活用 ​

APIコールに関連するビジネス情報を追加したい場合は、カスタムイベントを使用します。

javascript
// APIコールの追跡例
function trackApiCall(apiName, success) {
  if (window.newrelic) {
    newrelic.addPageAction('api_call', {
      api: apiName,
      success: success
    });
  }
}

SPA特有のパフォーマンス指標 ​

SPAでは従来のページ読み込み時間とは異なる指標が重要になります。

主な測定指標 ​

ルート変更時間: URLが変わってから新しいコンテンツが表示されるまでの時間。これはSPAにおける「ページ読み込み時間」に相当します。

Ajax完了時間: ページ遷移後、必要なデータをAPIから取得して表示が完了するまでの時間。

インタラクティブまでの時間: ユーザーがページで操作できるようになるまでの時間。

Core Web VitalsのSPA適用 ​

SPA環境でもGoogleのCore Web Vitalsは重要です。New Relicはこれらの指標をSPA特有の環境に合わせて測定します。

  • LCP: ルート変更後の最大コンテンツ描画時間
  • INP: ユーザーインタラクションの応答時間
  • CLS: データ読み込みによるレイアウトのズレ

実装のポイント ​

SPA監視を効果的に活用するためのポイントをまとめます。

段階的な導入 ​

最初は基本設定でSPA監視を有効にし、自動監視機能でアプリケーションの基本的なパフォーマンスを把握しましょう。その後、必要に応じてカスタムイベントや詳細設定を追加していきます。

データの確認 ​

開発環境ではブラウザのデベロッパーツールでNew Relicへのデータ送信を確認できます。Networkタブで「bam.nr-data.net」へのリクエストが送信されているかチェックしましょう。

パフォーマンスへの影響を最小限に ​

監視コード自体がアプリケーションのパフォーマンスに影響を与えないよう、必要最小限の監視から始め、段階的に拡張していくことが大切です。

まとめ ​

New RelicのSPA監視機能は、モダンなWebアプリケーションの特徴に対応した監視ソリューションです。基本設定で自動監視を開始し、必要に応じてカスタムイベントを追加することで、アプリケーションのパフォーマンスとユーザー体験を網羅的に把握できます。

関連記事: React統合ガイド
関連記事: Vue.js統合ガイド