New Relic SPA監視設定ガイド - モダンWebアプリケーションの監視最適化 ​

Single Page Application（SPA）は現代のWebアプリケーション開発において主流となっていますが、従来のページ単位の監視手法では適切な性能測定ができません。New Relic Browser AgentのSPA監視機能は、クライアントサイドルーティングやAjax通信が中心となるモダンなアプリケーションアーキテクチャに特化した監視ソリューションを提供します。

SPAの監視における課題 ​

従来のWebアプリケーション監視では、ページ遷移がブラウザのナビゲーションイベントとして発生するため、自動的にパフォーマンス測定が行われていました。しかし、SPAでは根本的に異なる動作パターンが監視の複雑さを生み出しています。

技術的な違いの理解 ​

従来のWebアプリケーションでは、ユーザーがリンクをクリックするたびにサーバーから新しいHTMLページが返され、ブラウザのwindow.onloadイベントが発生します。この明確な境界により、ページ単位のパフォーマンス測定が自然に行えます。

SPAアプリケーションでは、初回ページ読み込み後の画面遷移はJavaScriptによるDOM操作で実現され、URLの変更はHistory APIを使用して行われます。この結果、従来の測定方法では「ページ遷移」を正確に検知できなくなります。

具体的な監視課題 ​

ルート変更の検知において、クライアントサイドルーティングによる画面遷移を自動検知するためには、フレームワーク固有のルーターイベントとの統合が必要です。

非同期データ読み込みでは、画面表示後にAjax通信でデータを取得する際の「完了タイミング」の定義が曖昧になり、ユーザー体験の測定が困難になります。

パフォーマンス指標の再定義が必要となり、従来の「ページ読み込み時間」に代わる、SPA特有のパフォーマンス指標を設計する必要があります。

SPA監視の有効化 ​

New Relic Browser AgentでSPA監視を開始するには、設定の更新と必要に応じたカスタマイズが必要です。

基本的な有効化手順 ​

まず、New RelicのBrowserアプリケーション設定画面でSPA監視を有効にします。この設定により、Browser AgentがSPAモードで動作し、ルート変更とAjax通信を自動的に追跡するようになります。

次に、アプリケーションのHTMLテンプレートにBrowser Agentスクリプトが適切に配置されていることを確認します。SPAの場合、通常は<head>セクションの早い段階での配置が推奨されます。

設定例とカスタマイズ ​

javascript
// SPA監視の詳細設定
window.NREUM.loader_config = {
  spa: {
    enabled: true,
    harvestTimeSeconds: 10,
    generic_events: true
  },
  
  // Ajax通信の監視設定
  ajax: {
    deny_list: ["bam.nr-data.net"],
    block_internal: false,
    enabled: true
  },
  
  // プライバシーとセキュリティ設定
  privacy: {
    cookies_enabled: true,
    distributed_tracing: {
      enabled: true,
      cors_use_newrelic_header: true
    }
  }
};

ルート変更の自動検知 ​

SPA監視の核心は、クライアントサイドルーティングによる画面遷移を正確に追跡することです。

History API監視 ​

Browser Agentは、ブラウザのHistory API（pushState、replaceState、popstate）を監視して、URLの変更を自動検知します。この機能により、ユーザーがブラウザの戻る・進むボタンを使用した場合や、プログラムによるナビゲーションも正確に追跡されます。

Hash変更監視 ​

ハッシュベースのルーティングを使用するアプリケーションでは、hashchangeイベントの監視により、ルート変更を検知します。この方法は、主に古いブラウザサポートが必要なアプリケーションで使用されます。

フレームワーク統合 ​

React Router、Vue Router、Angular Routerなどの主要なルーティングライブラリとの統合により、より詳細なルート情報を収集できます。

javascript
// カスタムルート変更通知の例
function notifyRouteChange(previousRoute, currentRoute) {
  if (typeof newrelic !== 'undefined') {
    newrelic.addPageAction('spa_route_change', {
      from: previousRoute,
      to: currentRoute,
      timestamp: Date.now(),
      userId: getCurrentUserId()
    });
  }
}

Ajax通信とページアクションの追跡 ​

SPAでは、ページ遷移後のデータ取得がユーザー体験に大きく影響するため、Ajax通信の監視が特に重要です。

自動Ajax監視 ​

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

リクエスト詳細として、URL、HTTPメソッド、送信データサイズを記録します。レスポンス情報では、ステータスコード、レスポンスサイズ、レスポンス時間を測定します。エラー分析により、タイムアウト、ネットワークエラー、HTTPエラーを分類して追跡します。

カスタムページアクション ​

ユーザーインタラクションとビジネスロジックを関連付けるため、カスタムページアクションを定義できます。

javascript
// ビジネス固有のイベント追跡例
function trackUserAction(actionType, details) {
  if (typeof newrelic !== 'undefined') {
    newrelic.addPageAction(actionType, {
      userId: details.userId,
      feature: details.feature,
      duration: details.duration,
      success: details.success,
      errorMessage: details.errorMessage
    });
  }
}

// 使用例
trackUserAction('product_search', {
  userId: '12345',
  feature: 'auto_complete',
  duration: 245,
  success: true
});

パフォーマンス測定の最適化 ​

SPAにおけるパフォーマンス測定では、従来の指標に加えて、SPA特有の指標を定義する必要があります。

SPA固有の測定指標 ​

ルート変更時間では、ルート変更の開始から新しいコンテンツの表示完了までの時間を測定します。インタラクティブまでの時間は、ページ遷移後にユーザーが操作可能になるまでの時間を追跡します。Ajax完了時間により、画面表示に必要なAPIコールがすべて完了するまでの時間を測定します。

Core Web Vitalsの適用 ​

SPA環境でもCore Web Vitalsは重要な指標となりますが、測定方法を調整する必要があります。

**LCP（Largest Contentful Paint）**は、ルート変更後の最大コンテンツ描画時間として測定されます。**INP（Interaction to Next Paint）**は、ページ遷移後のすべてのユーザーインタラクションの応答時間を追跡します。**CLS（Cumulative Layout Shift）**では、Ajax データ読み込みによるレイアウト変更を監視します。

実装のベストプラクティス ​

効果的なSPA監視を実現するための推奨事項を以下にまとめます。

データ収集の最適化 ​

選択的データ収集により、ビジネスに重要なページとユーザーアクションに焦点を当てて監視範囲を設定します。カスタム属性の活用では、ユーザーセグメント、実験グループ、機能フラグなどのコンテキスト情報を追加して、より詳細な分析を可能にします。

パフォーマンス影響の最小化 ​

非同期データ送信により、ユーザーインタラクションをブロックしないよう、データの送信タイミングを最適化します。サンプリング設定では、トラフィック量に応じて適切なサンプリング率を設定し、システムへの負荷を管理します。

エラー処理の強化 ​

Promise rejection監視により、非同期処理のエラーを確実にキャプチャします。カスタムエラー分類では、ビジネスロジックに応じたエラーカテゴリを定義し、問題の優先順位付けを支援します。

トラブルシューティング ​

SPA監視で一般的に発生する問題と解決方法を紹介します。

データが表示されない場合 ​

ルート変更が検知されない場合は、フレームワークのルーターとBrowser Agentの統合設定を確認します。Ajax通信が追跡されない場合は、CORS設定とプライバシー設定を見直します。

パフォーマンス測定の精度向上 ​

測定タイミングの調整により、アプリケーション固有の「完了状態」定義に合わせてカスタムタイミングを実装します。フィルタリング設定では、不要なリクエストやイベントを除外して、重要な指標に焦点を当てます。

まとめ ​

New RelicのSPA監視機能は、モダンなWebアプリケーションの複雑な動作パターンに対応した包括的な監視ソリューションです。適切な設定とカスタマイズにより、従来の監視手法では見えなかったユーザー体験を詳細に分析できるようになります。

次のステップでは、React、Vue.js、AngularなどのフレームワークごとのBrowser Agent統合方法について詳しく解説します。フレームワーク固有の最適化手法と実装のベストプラクティスを学んでいきましょう。

関連記事: React統合ガイド関連記事: Browser Agent概要