NerdGraph チュートリアル: ブラウザーエージェントの監視の例

以下に、GraphQL を使用して作成できるさまざまなブラウザー構成の例をいくつか示します。

新しいブラウザアプリケーションを作成する

UI を使用する代わりに、NerdGraph API を使用してブラウザーアプリケーションを作成できます。これの利点は、ブラウザアプリケーションを New Relic で計測するときに、JavaScript スニペットをプログラムで作成および取得して、ブラウザアプリにコピーアンドペーストできることです。

npmを使った設定方法については複数のアプリケーションについては、「 npm を使用して複数のアプリをインストルメントする」を参照してください。

デフォルト設定で新しいブラウザアプリケーションを作成するミューテーションの例を次に示します。

突然変異：

mutation CreateExampleBrowserApplication(
  $accountId: Int!
  $name: String!
  $settings: AgentApplicationBrowserSettingsInput
) {
  agentApplicationCreateBrowser(
    accountId: $accountId
    name: $name
    settings: $settings
  ) {
    guid
    name
    settings {
      cookiesEnabled
      distributedTracingEnabled
      loaderScript
      loaderType
    }
  }
}

変数:

{
  "accountId": Int!,
  "name": String!,
  "settings": {
    "cookiesEnabled": Boolean,
    "distributedTracingEnabled": Boolean,
    "loaderType": AgentApplicationBrowserLoader
  }
}

JavaScript スニペットを取得する

JavaScript スニペットを取得して、アプリケーションにコピー/ペーストできます。返されるスニペットは JSON でエンコードされた文字列であり、コピー/ペーストする前に解析する必要があることに注意してください。

クエリ:

query FetchBrowserJavaScriptSnippet($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsLoaderScript
        }
      }
    }
  }
}

変数:

{
  "guid": EntityGuid!
}

ブラウザ監視の構成例

ブラウザ設定は NerdGraph を通じて構成できます。以下は、アプリケーションのapdexを変更する突然変異の例です。

突然変異：

mutation UpdateBrowserApdexTarget(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

変数:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    }
  }
}

NerdGraph 経由で更新できるブラウザ設定の詳細については、次の変更を参照してください。各フィールドのドキュメントは、 NerdGraph エクスプローラーで見つけることができます。

突然変異：

mutation UpdateBrowserSettingsExample($guid: EntityGuid!, settings: AgentApplicationSettingsUpdateInput!) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
      browserMonitoring {
        ajax {
          denyList
        }
        distributedTracing {
          allowedOrigins
          corsEnabled
          corsUseNewrelicHeader
          corsUseTracecontextHeaders
          enabled
          excludeNewrelicHeader
        }
        loader
        privacy {
          cookiesEnabled
        }
      }
      dataManagement {
        sendTransactionEventsToInternalStream
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

変数:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    },
    "browserMonitoring": {
      "ajax": {
        "denyList": [String!]
      },
      "distributedTracing": {
        "allowedOrigins": [String!],
        "corsEnabled": Boolean,
        "corsUseNewrelicHeader": Boolean,
        "corsUseTracecontextHeaders": Boolean,
        "enabled": Boolean,
        "excludeNewrelicHeader": Boolean
      }
      "loader": AgentApplicationSettingsBrowserLoaderInput,
      "privacy": {
        "cookiesEnabled": Boolean
      }
    }
    "dataManagement": {
      "sendTransactionEventsToInternalStream": Boolean
    }
  }
}

アプリケーション構成を取得する

npm パッケージのインストール方法で使用するブラウザアプリケーション構成を取得できます。ニーズに応じて、構成は 2 つの異なる形式で返されます。

ウェブページのhead要素に挿入するための JSON エンコード文字列。
アプリケーションのソースコード内でそのまま使用できるオブジェクト。

クエリ:

query FetchBrowserConfiguration($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
          jsConfigScript
        }
      }
    }
  }
}

変数:

{
  "guid": EntityGuid!
}

データをブラウザセグメントでグループ化する

ブラウザ監視結果をブラウザセグメントごとにグループ化して、より意味のあるデータを取得できます。これを UIで行う代わりに、GraphQL を使用して行うことができます。

リストセグメント

既存のセグメントをリストすることから始めます。

{
  actor {
    entity(guid: "YOUR_GUID") {
      ... on BrowserApplicationEntity {
        segmentAllowListAggregate {
          segments
        }
      }
    }
  }
}

応答は次のとおりです。

"data": {
    "actor": {
      "entity": {
        "segmentAllowListAggregate": {
          "segments": [
            "urlsegment1",
            "urlsegment2"
          ]
        }
      }
    }
  }
 "data": {
    "actor": {
      "entity": {
        "segmentAllowListAggregate": {
          "segments": [
            "urlsegment1",
            "urlsegment2"
          ]
        }
      }
    }
  }

セグメントの作成

agentApplicationSegmentsReplaceAllBrowserSegmentAllowList ミューテーションを使用してブラウザセグメントを作成します。

mutation {
  agentApplicationSegmentsReplaceAllBrowserSegmentAllowList(
    entityGuid: "YOUR_GUID"
    allowList: { segments: ["urlsegment1", "urlsegment2", "urlsegment3"] }
  ) {
    segments
  }
}

応答は次のとおりです。

"data": {
    "agentApplicationSegmentsReplaceAllBrowserSegmentAllowList": {
      "segments": [
        "urlsegment3",
        "urlsegment2",
        "urlsegment1"
      ]
    }
  }

ブラウザエージェントのバージョン固定

New Relic の GraphQL API は、New Relic Browser エージェントの特定のバージョンを「固定」する方法を提供し、プラットフォーム内での一貫性を確保します。バージョンを固定すると、予期しない変更や動作が発生する可能性のある自動更新を防ぐことができます。この機能の主な利点は次のとおりです。

制御: 更新をいつどのように適用するかについての自律性を維持します。
信頼性: テストおよび承認されたバージョンのエージェントが常に実行されていることを確認します。
テスト容易性: 更新を決定する前に、隔離された環境で新しいバージョンを簡単にテストできます。
安定性: 予期しない中断を最小限に抑え、アプリケーションの一貫した動作を維持します。
効率: 導入時間を短縮し、導入の問題を軽減します。

ここでは、ブラウザエージェントバージョン固定 API の使用方法の概要を示します。

この NerdGraph クエリを使用して、ブラウザアプリケーションが使用するエージェントタイプと、特定のバージョンがすでに固定されているかどうかを判断します。

query FetchBrowserMonitoringAgentSettings {
  actor {
    entity(guid: "YOUR_BROWSER_APP_GUID") {
      ... on BrowserApplicationEntity {
        guid
        name
        browserSettings {
          browserMonitoring {
            loader
            pinnedVersion
          }
        }
      }
    }
  }
}

上記のクエリに対する応答の例:

{
  "data": {
    "actor": {
      "entity": {
        "browserSettings": {
          "browserMonitoring": {
            "loader": "SPA",
            "pinnedVersion": null
          }
        },
        "guid": "YOUR_BROWSER_APP_GUID",
        "name": "Example Single Page App"
      }
    }
  }
}

この例では、 loaderはSPAタイプで、 pinnedVersionはnullです。これは、固定されたバージョンがないことを示しています。

このクエリはいつでも実行して、ローダーと固定バージョンの組み合わせを確認できます。

固定するバージョンを特定したら、次の GraphQL ミューテーションを使用してそれを設定します。

ヒント

アプリで使用するブラウザエージェントのセマンティックバージョンを必ず使用してください。最新バージョンを使用するには、これを空白のままにしておきます。バージョン範囲内の最新リリースを表すには、数字の代わりに'x'を使用します (例: '1.x.x' )。

mutation {
  agentApplicationSettingsUpdate(
    guid: "YOUR_BROWSER_APP_GUID"
    settings: { browserMonitoring: { pinnedVersion: "1.229.0" } }
  ) {
    browserProperties {
      jsLoaderScript
    }
    browserSettings {
      browserMonitoring {
        loader
        pinnedVersion
      }
    }
  }
}

このミューテーションの戻りフィールドには、更新されたpinnedVersion値と更新されたjsLoaderScriptが含まれることに注意してください。

loader値をNONEに変更すると、固定されたセマンティックバージョンが削除されます。

コピー/ペースト方法を使用するアプリケーションの場合は、既存の JavaScript スニペットを新しいデコードされた<script>に置き換えます。次に、アプリケーションを再デプロイします。

バックエンドにインストールされたエージェント (Ruby、Python など) を介してブラウザーを監視するアプリケーションの場合、新しい値を取得するためにエージェントを再起動する必要があります。

どちらの場合でも、次回アプリケーションがブラウザページを提供するときは、固定されたエージェントのバージョンを使用して New Relic アカウントにデータを報告する必要があります。

最初のステップでクエリを使用すると、固定されたバージョンとローダーのタイプを確認できることに注意してください。

この機械翻訳は、参考として提供されています。

NerdGraph チュートリアル: ブラウザーエージェントの監視の例

新しいブラウザアプリケーションを作成する

JavaScript スニペットを取得する

ブラウザ監視の構成例

アプリケーション構成を取得する

データをブラウザセグメントでグループ化する

リストセグメント

セグメントの作成

ブラウザエージェントのバージョン固定

ステップ 1. 現在固定されているバージョンを取得する

ステップ 2. 利用可能なバージョンを確認する

ステップ 3. 目的のバージョンを固定する

ヒント

ステップ 4. アプリケーションを再デプロイするか、エージェントを再起動します

この機械翻訳は、参考として提供されています。

NerdGraph チュートリアル: ブラウザー エージェントの監視の例

新しいブラウザ アプリケーションを作成する .css-21sua1{background:none;border:none;width:0;padding:0;}

JavaScript スニペットを取得する

ブラウザ監視の構成例

アプリケーション構成を取得する

データをブラウザセグメントでグループ化する

リストセグメント

セグメントの作成

ブラウザエージェントのバージョン固定

ステップ 2. 利用可能なバージョンを確認する

ステップ 3. 目的のバージョンを固定する

ステップ 4. アプリケーションを再デプロイするか、エージェントを再起動します

NerdGraph チュートリアル: ブラウザーエージェントの監視の例

新しいブラウザアプリケーションを作成する