• English日本語한국어
  • ログイン今すぐ開始

この機械翻訳は参考用に提供されます。

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、 を参照してください。

問題を作成する

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 呼び出しを完了します。

Step 1 of 3

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

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

Step 2 of 3

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

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

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

クエリの <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 の紹介 を参照してください。

Step 3 of 3

構成をインストールする

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

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

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

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

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

Step 1 of 3

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

ソース コードの最初のスニペットを 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
Step 2 of 3

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"
}
}
}
}
}
Step 3 of 3

構成をインストールする

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

次のステップ

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

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.