New Relic Browser Agent設定リファレンス - 完全設定ガイド

New Relic Browser Agentは、豊富な設定オプションを提供しており、アプリケーションの要件に応じて詳細なカスタマイズが可能です。本リファレンスでは、すべての設定パラメータとその使用方法、ベストプラクティスを包括的に解説します。

基本設定構造

Browser Agentの設定は、window.NREUM.loader_configオブジェクトを通じて行います。以下が基本的な設定構造です。

javascript

window.NREUM.loader_config = {
  // エージェント基本設定
  agent: {
    // エージェント動作の基本パラメータ
  },
  
  // プライバシーとセキュリティ設定
  privacy: {
    // データ収集とプライバシー保護の設定
  },
  
  // SPA監視設定
  spa: {
    // Single Page Application固有の設定
  },
  
  // Ajax監視設定
  ajax: {
    // Ajax通信の監視設定
  },
  
  // エラー監視設定
  jserrors: {
    // JavaScriptエラーの収集設定
  },
  
  // セッションリプレイ設定（Enterprise機能）
  session_replay: {
    // ユーザーセッションの記録設定
  },
  
  // パフォーマンス監視設定
  page_view_timing: {
    // ページビューとタイミングの設定
  },
  
  // 初期化設定
  init: {
    // エージェント初期化時の設定
  }
};

エージェント基本設定（agent）

エージェントの基本動作を制御する設定群です。

javascript

agent: {
  // デバッグモードの有効化
  debug: false,
  
  // ライセンスキー（通常は自動設定）
  licenseKey: 'YOUR_LICENSE_KEY',
  
  // アプリケーションID（通常は自動設定）
  applicationID: 'YOUR_APP_ID',
  
  // エージェントのバージョン
  agentVersion: '1.0.0',
  
  // 収集間隔（秒）
  harvestTimeSeconds: 60,
  
  // 最大イベント数
  maxEventsPerHarvest: 1000,
  
  // エージェント実行の遅延（ミリ秒）
  startupDelay: 0,
  
  // タイムアウト設定（秒）
  timeout: 30
}

設定項目の詳細

debug: 開発環境での詳細ログ出力を制御します。本番環境ではfalseに設定してください。

harvestTimeSeconds: データ送信の間隔を秒単位で指定します。短いほどリアルタイム性が向上しますが、ネットワーク負荷が増加します。

maxEventsPerHarvest: 一回の送信で含める最大イベント数です。大量のイベントが発生する環境では調整が必要です。

プライバシーとセキュリティ設定（privacy）

データ収集とプライバシー保護に関する重要な設定群です。

javascript

privacy: {
  // クッキーの使用許可
  cookies_enabled: true,
  
  // 分散トレーシング設定
  distributed_tracing: {
    enabled: true,
    cors_use_newrelic_header: true,
    cors_use_tracecontext_headers: true,
    cors_use_b3_headers: false
  },
  
  // データマスキング設定
  obfuscate: {
    // 自動データマスキングの有効化
    auto_instrument: true,
    
    // マスク対象要素のセレクタ
    block_selector: '[data-private]',
    
    // マスク対象属性
    mask_input_options: {
      color: false,
      date: true,
      'datetime-local': true,
      email: true,
      month: true,
      number: false,
      password: true,
      range: false,
      search: false,
      tel: true,
      text: true,
      time: true,
      url: true,
      week: true
    }
  },
  
  // IP アドレスの収集制御
  capture_ip: true,
  
  // リファラー情報の制御
  capture_referrer: true
}

データマスキングの詳細設定

javascript

// 高度なデータマスキング
privacy: {
  obfuscate: {
    // カスタムマスキング関数
    custom_mask_function: function(value, element) {
      // クレジットカード番号のマスキング
      if (element.type === 'text' && /^\d{4}\s?\d{4}\s?\d{4}\s?\d{4}$/.test(value)) {
        return '**** **** **** ' + value.slice(-4);
      }
      
      // 社会保障番号のマスキング
      if (/^\d{3}-\d{2}-\d{4}$/.test(value)) {
        return '***-**-' + value.slice(-4);
      }
      
      return value;
    },
    
    // 特定のテキストパターンのブロック
    text_masking_patterns: [
      {
        pattern: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
        replacement: '[EMAIL]'
      },
      {
        pattern: /\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g,
        replacement: '[CARD]'
      }
    ]
  }
}

SPA監視設定（spa）

Single Page Applicationの監視に特化した設定群です。

javascript

spa: {
  // SPA監視の有効化
  enabled: true,
  
  // データ収集間隔（秒）
  harvestTimeSeconds: 10,
  
  // 汎用イベントの収集
  generic_events: true,
  
  // ルート変更の自動検知
  auto_route_change: true,
  
  // Ajax完了待機時間（ミリ秒）
  ajax_wait_time: 1000,
  
  // 最大Ajax追跡数
  max_ajax_requests: 50,
  
  // ページアクションの最大記録時間（秒）
  max_page_action_time: 30,
  
  // カスタムルート変更ハンドラー
  route_change_handler: function(oldRoute, newRoute) {
    // カスタムロジックの実装
    console.log('Route changed from', oldRoute, 'to', newRoute);
  }
}

SPA固有のイベント設定

javascript

spa: {
  // カスタムSPAイベント
  custom_events: {
    // ルート変更前のフック
    before_route_change: function(route) {
      // ルート変更前の処理
      return true; // false を返すと変更をキャンセル
    },
    
    // ルート変更後のフック
    after_route_change: function(route) {
      // ルート変更後の処理
    },
    
    // Ajax開始時のフック
    before_ajax: function(config) {
      // Ajax開始前の処理
    },
    
    // Ajax完了時のフック
    after_ajax: function(response) {
      // Ajax完了後の処理
    }
  }
}

Ajax監視設定（ajax）

Ajax通信の監視とフィルタリングに関する設定群です。

javascript

ajax: {
  // Ajax監視の有効化
  enabled: true,
  
  // 拒否リスト（監視しないURL）
  deny_list: [
    'bam.nr-data.net',
    'js-agent.newrelic.com',
    'analytics.google.com'
  ],
  
  // 許可リスト（監視するURL、設定時は他はすべて拒否）
  allow_list: [
    'api.myapp.com',
    'backend.myapp.com'
  ],
  
  // 内部通信のブロック
  block_internal: false,
  
  // CORS設定
  cors_enabled: true,
  
  // タイムアウト設定（ミリ秒）
  timeout: 30000,
  
  // リクエストボディの収集
  capture_request_body: false,
  
  // レスポンスボディの収集
  capture_response_body: false,
  
  // 最大ボディサイズ（バイト）
  max_body_size: 1024,
  
  // カスタムヘッダーの収集
  capture_custom_headers: ['X-Request-ID', 'X-Correlation-ID'],
  
  // リクエスト変換関数
  request_transformer: function(request) {
    // リクエストデータの変換
    return request;
  },
  
  // レスポンス変換関数
  response_transformer: function(response) {
    // レスポンスデータの変換
    return response;
  }
}

エラー監視設定（jserrors）

JavaScriptエラーの収集と処理に関する設定群です。

javascript

jserrors: {
  // JavaScriptエラー監視の有効化
  enabled: true,
  
  // データ収集間隔（秒）
  harvestTimeSeconds: 10,
  
  // 最大エラー数
  max_events_per_harvest: 1000,
  
  // エラー詳細の収集レベル
  capture_level: 'all', // 'all', 'uncaught', 'none'
  
  // スタックトレースの最大行数
  max_stack_trace_lines: 50,
  
  // エラーメッセージの最大長
  max_error_message_length: 1024,
  
  // 無視するエラーパターン
  ignore_errors: [
    /Script error/,
    /Non-Error promise rejection captured/,
    /ChunkLoadError/
  ],
  
  // 無視するURLパターン
  ignore_urls: [
    /extensions\//,
    /^chrome:\/\//,
    /^moz-extension:\/\//
  ],
  
  // カスタムエラーハンドラー
  error_handler: function(error, context) {
    // カスタムエラー処理
    console.log('Custom error handler:', error);
    return true; // false を返すとエラーを無視
  },
  
  // エラー分類関数
  error_classifier: function(error) {
    if (error.name === 'TypeError') {
      return 'type_error';
    }
    if (error.name === 'ReferenceError') {
      return 'reference_error';
    }
    return 'unknown_error';
  }
}

セッションリプレイ設定（session_replay）

Enterprise機能のセッションリプレイに関する設定群です。

javascript

session_replay: {
  // セッションリプレイの有効化
  enabled: false,
  
  // サンプリング率（0.0 - 1.0）
  sampling_rate: 0.1,
  
  // エラー時のサンプリング率
  error_sampling_rate: 0.5,
  
  // 録画品質設定
  quality: 'medium', // 'low', 'medium', 'high'
  
  // 最大セッション時間（秒）
  max_session_duration: 14400, // 4時間
  
  // すべての入力をマスク
  mask_all_inputs: true,
  
  // 入力マスクオプション
  mask_input_options: {
    password: true,
    credit_card: true,
    ssn: true,
    email: false,
    tel: true
  },
  
  // マスクするセレクタ
  mask_selectors: [
    '[data-sensitive]',
    '.sensitive-data',
    '#personal-info'
  ],
  
  // ブロックするセレクタ（録画から除外）
  block_selectors: [
    '[data-private]',
    '.no-replay'
  ],
  
  // 録画開始条件
  start_conditions: {
    // エラー発生時に開始
    on_error: true,
    
    // 特定のページで開始
    on_pages: ['/checkout', '/payment'],
    
    // カスタム条件
    custom_condition: function() {
      return window.location.pathname.includes('/admin');
    }
  }
}

パフォーマンス監視設定（page_view_timing）

ページビューとパフォーマンス指標の監視設定です。

javascript

page_view_timing: {
  // ページビューイベントの有効化
  enabled: true,
  
  // データ収集間隔（秒）
  harvestTimeSeconds: 30,
  
  // Core Web Vitals の自動収集
  core_web_vitals: true,
  
  // Paint タイミングの収集
  paint_timing: true,
  
  // ナビゲーションタイミングの収集
  navigation_timing: true,
  
  // リソースタイミングの収集
  resource_timing: true,
  
  // カスタムタイミングマーク
  custom_timing_marks: [
    'custom-start',
    'custom-end',
    'api-call-complete'
  ],
  
  // パフォーマンス予算の設定
  performance_budgets: {
    lcp: 2500,  // LCP予算（ミリ秒）
    inp: 200,   // INP予算（ミリ秒）
    cls: 0.1,   // CLS予算
    ttfb: 800   // TTFB予算（ミリ秒）
  },
  
  // 予算超過時のコールバック
  budget_exceeded_callback: function(metric, value, budget) {
    console.warn(`Performance budget exceeded: ${metric} = ${value}, budget = ${budget}`);
  }
}

初期化設定（init）

エージェント初期化時の詳細設定です。

javascript

init: {
  // 初期化遅延（ミリ秒）
  startup_delay: 0,
  
  // 条件付き初期化
  conditional_init: function() {
    // 初期化条件をチェック
    return !window.doNotTrack;
  },
  
  // カスタム初期化処理
  custom_init: function() {
    // カスタム初期化ロジック
    console.log('New Relic Browser Agent initialized');
  },
  
  // エージェント準備完了コールバック
  ready_callback: function() {
    // エージェント準備完了時の処理
    window.newrelic.setCustomAttribute('init_time', Date.now());
  },
  
  // 機能の動的有効化
  feature_flags: {
    spa_monitoring: true,
    ajax_monitoring: true,
    error_monitoring: true,
    session_replay: false
  }
}

環境別設定の実装

開発、ステージング、本番環境での設定分岐の実装例です。

javascript

// 環境別設定の実装
function getEnvironmentConfig() {
  const hostname = window.location.hostname;
  const isProduction = hostname.includes('production.com');
  const isStaging = hostname.includes('staging.com');
  const isDevelopment = hostname.includes('localhost') || hostname.includes('dev.');
  
  const baseConfig = {
    agent: {
      debug: !isProduction,
      harvestTimeSeconds: isProduction ? 60 : 30
    },
    privacy: {
      cookies_enabled: true,
      distributed_tracing: {
        enabled: true
      }
    },
    spa: {
      enabled: true
    },
    ajax: {
      enabled: true
    },
    jserrors: {
      enabled: true
    }
  };
  
  if (isProduction) {
    return {
      ...baseConfig,
      session_replay: {
        enabled: true,
        sampling_rate: 0.05
      },
      jserrors: {
        ...baseConfig.jserrors,
        max_events_per_harvest: 500
      }
    };
  }
  
  if (isStaging) {
    return {
      ...baseConfig,
      session_replay: {
        enabled: true,
        sampling_rate: 0.3
      },
      agent: {
        ...baseConfig.agent,
        debug: true
      }
    };
  }
  
  // Development
  return {
    ...baseConfig,
    agent: {
      ...baseConfig.agent,
      debug: true,
      harvestTimeSeconds: 10
    },
    session_replay: {
      enabled: false
    }
  };
}

// 設定の適用
window.NREUM.loader_config = getEnvironmentConfig();

設定のベストプラクティス

効果的な設定を行うための推奨事項をまとめます。

セキュリティ最優先

機密データの保護では、プライバシー設定を適切に構成し、個人情報や機密データの収集を防止します。データマスキングにより、入力フィールドやテキストの自動マスキングを実装します。

パフォーマンス最適化

サンプリング率の調整により、トラフィック量に応じて適切なサンプリング率を設定し、システム負荷を管理します。データ収集の選択では、必要な監視機能のみを有効化し、不要なオーバーヘッドを避けます。

運用効率化

環境別設定により、開発、ステージング、本番環境で異なる設定を使用し、適切な監視レベルを維持します。段階的展開では、新機能を段階的に展開し、影響を最小限に抑えます。

まとめ

New Relic Browser Agentの詳細な設定により、アプリケーションの要件に最適化された監視システムを構築できます。セキュリティ、パフォーマンス、運用効率のバランスを考慮した設定により、効果的なフロントエンド監視を実現しましょう。

この設定リファレンスを参考に、あなたのアプリケーションに最適な監視環境を構築してください。継続的な改善と最適化により、ユーザーエクスペリエンスの向上とシステムの安定性を実現できます。

関連記事: Browser Agent概要関連記事: Core Web Vitals監視設定

New Relic Browser Agent設定リファレンス - 完全設定ガイド ​

基本設定構造 ​

エージェント基本設定（agent） ​

設定項目の詳細 ​

プライバシーとセキュリティ設定（privacy） ​

データマスキングの詳細設定 ​

SPA監視設定（spa） ​

SPA固有のイベント設定 ​

Ajax監視設定（ajax） ​

エラー監視設定（jserrors） ​

セッションリプレイ設定（session_replay） ​

パフォーマンス監視設定（page_view_timing） ​

初期化設定（init） ​

環境別設定の実装 ​

設定のベストプラクティス ​

セキュリティ最優先 ​

パフォーマンス最適化 ​

運用効率化 ​

まとめ ​

New Relic Browser Agent設定リファレンス - 完全設定ガイド

基本設定構造

エージェント基本設定（agent）

設定項目の詳細

プライバシーとセキュリティ設定（privacy）

データマスキングの詳細設定

SPA監視設定（spa）

SPA固有のイベント設定

Ajax監視設定（ajax）

エラー監視設定（jserrors）

セッションリプレイ設定（session_replay）

パフォーマンス監視設定（page_view_timing）

初期化設定（init）

環境別設定の実装

設定のベストプラクティス

セキュリティ最優先

パフォーマンス最適化

運用効率化

まとめ