Nuxt.jsインテグレーション

Nuxt.jsダッシュボードを使用すると、アプリケーションエラー率、初期ページ読み込み平均、ルート変更、スループット、JavaScriptエラーのあるページビューを簡単に追跡できます。当社の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ファイルを作成します。
bash
```
$touch <FILENAME>.js
```
新しく作成されたJavaScriptファイルに関数を作成して、生成済みスクリプトを関数内に追加します。
```
function FUNCTION_NAME() {
  // GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
}
FUNCTION_NAME();
```

以下のコードスニペットをコピーし、nuxt.config.jsファイルのHEADER tagに貼り付け、関数名とファイル名を更新します。

__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 クエリの作成とダッシュボードの生成の詳細については、次のドキュメントをご覧ください。

基本的なクエリと高度なクエリを作成するためのクエリビルダーの概要。
ダッシュボードをカスタマイズしてさまざまなアクションを実行するためのダッシュボードの概要。
ダッシュボードの管理で
表示モードを調整したり、ダッシュボードにコンテンツを追加したりできます。