Nuxt.jsダッシュボードを使用すると、アプリケーションエラー率、初期ページ読み込み平均、ルート変更、スループット、JavaScriptエラーのあるページビューを簡単に追跡できます。Nuxt.jsダッシュボードは、当社のInfrastructureエージェントとVueブラウザモニタリングで構築されており、1か所で重要な情報をすべて表示できます。
1. Infrastructureエージェントのインストール
New Relicにデータを取り込む前に、まずInfrastructureエージェントをインストールする必要があります(インストール済みの場合は、この手順をスキップできます)。これにより、New Relicはデータを収集し、アプリケーションエラー率、スループット、JavaScriptエラーのあるページビューをダッシュボードに表示できます。この手順はオプションですが、すべてのホストとブラウザモニタリングデータを表示するには、Infrastructureエージェントをインストールすることを強くお勧めします。
Infrastructureエージェントをインストールするには、次の2つの方法があります。
- ガイド付きインストールに従って、Infrastructureエージェントを使用してシステムをインストゥルメントします。
- コマンドラインを使用してInfrastructureエージェントをインストールします。
2. Vueブラウザモニタリングのインストール
Infrastructureエージェントをインストールしたら、次はブラウザモニターをインストールします。one.newrelic.comから:
- Add dataをクリックします
- Browser & mobileをクリックします
- ここからVueをクリックします。指示に従って、手順3で使用したJavaScriptコードスニペットを生成します。ブラウザモニタリングエージェントとVueインテグレーションは基本的に同じサービスを提供しますが、VueインテグレーションはJavaScript(Nuxt.jsのフレームワーク)に固有のものです。JavaScriptに固有ではない他のサービスを監視する場合は、ブラウザモニタリングエージェントを使用する必要があります。
3. インテグレーションの設定
Nuxt.jsアプリケーションにJavaScriptスニペットを追加するには:
nuxt.jsアプリケーションの
static
フォルダーにJavaScriptファイルを作成します。touch <FILENAME>.js新しく作成されたJavaScriptファイルに関数を作成して、生成済みスクリプトを実行します。
nano <FILENAME>.jsfunction <FUNCTION_NAME>() {<GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>}FUNCTION_NAME();作成したJavaScriptファイルを
nuxt.config.js
という名前のnuxt設定ファイルに追加します。nano nuxt.config.js次のスニペットを
nuxt.config.js
ファイルに追加します。__dangerouslyDisableSanitizers: ["script"],script: [{hid: "<FUNCTION_NAME>",src: "/<FILENAME>.js",defer: true,type: "text/javascript",charset: "utf-8",},],アプリケーションを再起動します。
4. one.newrelic.comでのアプリケーションの監視
ナビゲーションバーからブラウザを選択して、one.newrelic.comでアプリケーションを表示できるようになりました。アプリケーションを選択すると、one.newrelic.com プラットフォームでキャプチャされたすべてのメトリクスが表示されます。次のクエリを使用して、NRQLでデータを表示することもできます。
SELECT firstPaint FROM PageView
次のステップ
NRQLクエリの作成とダッシュボード生成の詳細については、以下のドキュメントを参照してください。
- 基本的なクエリと高度なクエリを作成するためのクエリビルダーの概要。
- ダッシュボードをカスタマイズし、さまざまなアクションを実行するためのダッシュボードの概要。
- ダッシュボードの表示モードを調整したり、ダッシュボードにコンテンツを追加したりするダッシュボードの管理。