NerdGraph チュートリアル: npm と NerdGraph を使用して複数のアプリを設計する

NerdGraph API を使用して、新しいブラウザーアプリケーションを作成し、構成値を取得できます。これをブラウザーエージェント npm パッケージと組み合わせて、アプリケーションビルドプロセスの一部としてブラウザーエージェントの構成を組み込んだり、アプリケーション内のエージェントの実装からエージェントの構成を分離したりできます。

NerdGraph を使用してブラウザーアプリケーションを作成または構成したことがない場合は、まずこの NerdGraph チュートリアルをお読みください。

エージェントを設定する

プロジェクトのルートまたはフロントエンドの依存関係が管理されている場所で、IDE とターミナルを開きます。これは、 npm install --save @newrelic/browser-agent を実行して npm パッケージをインストールする場所です。インストールしたら、Web サイトのメインエントリポイントファイルを見つけます。これは <project_root>/src/index.js または <project_root>/src/index.ts の可能性がありますが、アプリケーションでは異なる場合があります。複数のエントリポイントがある場合は、ブラウザで最も早く読み込まれ、できれば async または defer スクリプト要素属性を使用していないエントリポイントを選択してください。

ブラウザーエージェントを追加する場所を見つけたら、このコードスニペットをそのファイルに追加します。

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// Populate using values from NerdGraph
const options = {
  init: { ... },
  info: { ... },
  loader_config: { ...}
}

// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)

// Remaining code

ブラウザエージェントの import ステートメントは、ソースファイルの最初にある必要があります。残りの import ステートメントの後、すぐにブラウザーエージェントをインスタンス化して構成します。ブラウザーエージェントができるだけ早くデータを読み込んでキャプチャできるように、他のコードよりも前にこれを実行してください。

構成を取得する

前のスニペットの options オブジェクトには、New Relic のブラウザアプリケーションに関する構成情報を入力する必要があります。このチュートリアルでは、New Relic UI を既存のブラウザーアプリケーションと NerdGraph Explorer で使用して、API 呼び出しを完了します。

ブラウザアプリケーションエンティティ GUID を取得する

NerdGraph API を使用するには、インストルメント化するブラウザーアプリケーションのエンティティ GUID を取得する必要があります。

ブラウザアプリケーションの構成を取得する

api.newrelic.com/graphiql で NerdGraph エクスプローラーを開きます。以下のクエリを使用して、ブラウザアプリケーションの構成値を取得します。New Relic アカウントで EU データセンターを使用している場合は、 api.eu.newrelic.com/graphiqlにアクセスしてください。

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
        }
      }
    }
  }
}

クエリの <guid> 部分を、以前に取得したエンティティ GUID に置き換えます。クエリを実行すると、次のような出力が表示されます。

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfig": {
            "info": {
              "applicationID": 1234567,
              "beacon": "bam.nr-data.net",
              "errorBeacon": "bam.nr-data.net",
              "licenseKey": 123456789,
              "sa": 1
            },
            "init": {
              "ajax": {
                "deny_list": [
                  "bam-cell.nr-data.net"
                ]
              },
              "distributed_tracing": {
                "allowed_origins": [],
                "cors_enabled": false,
                "cors_use_newrelic_header": false,
                "cors_use_tracecontext_headers": false,
                "enabled": true,
                "exclude_newrelic_header": false
              },
              "privacy": {
                "cookies_enabled": true
              }
            },
            "loader_config": {
              "accountID": <redacted>,
              "agentID": <redacted>,
              "applicationID": <redacted>,
              "licenseKey": "<redacted>",
              "trustKey": 1672072
            }
          }
        }
      }
    }
  }
}

ヒント

NerdGraph の使用に関する詳細情報が必要ですか? NerdGraph の紹介を参照してください。

構成をインストールする

jsConfig プロパティの内容をコピーし、ソースファイルの options オブジェクトの内容を置き換えます。

npmパッケージを使用してデプロイする

npm パッケージをインストールして適切に構成したら、ブラウザーアプリケーションをビルドしてデプロイできます。Web サイトをブラウザにロードし、構成から beacon URI に対してネットワーク呼び出しが行われていることを確認します。

ブラウザアプリケーションの構成を HTML に挿入する

ブラウザーアプリケーションの構成をソースコードに配置する代わりに、構成を Web サイトの HTML に挿入することもできます。これは、ソースコードが複数の Web サイトで再利用される場合に特に便利です。

ソースコードスニペットを変更する

ソースコードの最初のスニペットを import に変更し、パラメータなしで BrowserAgent クラスをインスタンス化します。

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// The agent loader code executes immediately on instantiation.
new BrowserAgent()

// Remaining code

NerdGraph クエリを変更する

NerdGraph クエリを変更して、ブラウザアプリケーションの構成を JSON でエンコードされたスクリプト文字列として取得します。 <guid> を以前に取得したブラウザーアプリケーションエンティティ GUID に置き換えることを忘れないで、新しいクエリを実行します。

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfigScript
        }
      }
    }
  }
}

これにより、次のような結果が返されます。

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfigScript": "<script type=\"text/javascript\">\n;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:[\"bam-cell.nr-data.net\"]}};\n\n;NREUM.loader_config={accountID:\"<redacted>\",trustKey:\"<redacted>\",agentID:\"<redacted>\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\"};\n;NREUM.info={beacon:\"bam.nr-data.net\",errorBeacon:\"bam.nr-data.net\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\",sa:1};\n</script>\n"
        }
      }
    }
  }
}

構成をインストールする

jsConfigScript プロパティの内容をコピーします。結果を JSON パーサーで実行するか、 \" の値を "に置き換える必要があります。結果は、すべてのブラウザーアプリケーション構成情報を含む <script> 要素を含む文字列になります。 <script> 要素を、ウェブサイトの HTML の <head> 要素の上部に配置しますが、 <meta> 要素よりも下に配置します。

次のステップ

このチュートリアルは、NerdGraph API とブラウザーエージェント npm パッケージの使用方法のほんの一部にすぎません。次のステップのアイデア:

ブラウザーエージェントを Web サイトビルダーアプリケーションに統合し、NerdGraph を使用して、顧客が管理ダッシュボード内で New Relic の監視を有効にすると、各顧客のブラウザーアプリケーション構成を取得します。
組織のコンポーネントライブラリに共有ブラウザエージェントコンポーネントを作成し、NerdGraph を呼び出す CDN エッジ関数を使用して、構成を HTML に自動的に挿入します。
CI/CD パイプラインを変更して、デプロイ先の環境に基づいて、NerdGraph からのさまざまなブラウザーアプリケーション構成をソースコードに取り込みます。

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

NerdGraph チュートリアル: npm と NerdGraph を使用して複数のアプリを設計する

エージェントを設定する .css-21sua1{background:none;border:none;width:0;padding:0;}

構成を取得する

ブラウザ アプリケーション エンティティ GUID を取得する

ブラウザ アプリケーションの構成を取得する

ヒント

構成をインストールする

npmパッケージを使用してデプロイする

ブラウザ アプリケーションの構成を HTML に挿入する

ソース コード スニペットを変更する

NerdGraph クエリを変更する

構成をインストールする

次のステップ

エージェントを設定する

ブラウザアプリケーションエンティティ GUID を取得する

ブラウザアプリケーションの構成を取得する

ブラウザアプリケーションの構成を HTML に挿入する

ソースコードスニペットを変更する