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

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から：

1. Add dataをクリックします
2. Browser & mobileをクリックします
3. ここからVueをクリックします。指示に従って、手順3で使用したJavaScriptコードスニペットを生成します。ブラウザモニタリングエージェントとVueインテグレーションは基本的に同じサービスを提供しますが、VueインテグレーションはJavaScript（Nuxt.jsのフレームワーク）に固有のものです。JavaScriptに固有ではない他のサービスを監視する場合は、ブラウザモニタリングエージェントを使用する必要があります。

3. インテグレーションの設定

Nuxt.jsアプリケーションにJavaScriptスニペットを追加するには：

1. nuxt.jsアプリケーションのstaticフォルダーにJavaScriptファイルを作成します。

   touch <FILENAME>.js

   コピー

2. 新しく作成されたJavaScriptファイルに関数を作成して、生成済みスクリプトを実行します。

   nano <FILENAME>.js

   コピー

   function <FUNCTION_NAME>() {
   <GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
   }
   FUNCTION_NAME();

   コピー

3. 作成したJavaScriptファイルをnuxt.config.jsという名前のnuxt設定ファイルに追加します。

   nano nuxt.config.js

   コピー

4. 次のスニペットをnuxt.config.jsファイルに追加します。

   __dangerouslyDisableSanitizers: ["script"],
    script: [
      {
        hid: "<FUNCTION_NAME>",
        src: "/<FILENAME>.js",
        defer: true,
        type: "text/javascript",
        charset: "utf-8",
      },
    ],

   コピー

5. アプリケーションを再起動します。

4. one.newrelic.comでのアプリケーションの監視

ナビゲーションバーからブラウザを選択して、one.newrelic.comでアプリケーションを表示できるようになりました。アプリケーションを選択すると、one.newrelic.com プラットフォームでキャプチャされたすべてのメトリクスが表示されます。次のクエリを使用して、NRQLでデータを表示することもできます。

SELECT firstPaint 
FROM PageView

次のステップ

NRQLクエリの作成とダッシュボード生成の詳細については、以下のドキュメントを参照してください。

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