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

Nuxt.js ダッシュボードを使用すると、アプリケーションのエラー率、初期ページ読み込み平均、ルートの変更、スループット、JavaScript エラーのあるページビューを簡単に追跡できます。当社のインフラストラクチャエージェントと Vue を使用して構築された Nuxt.js ダッシュボードを使用すると、重要な情報を 1 か所で表示できます。

1. Infrastructureエージェントのインストール

New Relicにデータを取り込む前に、まずInfrastructureエージェントをインストールする必要があります（インストール済みの場合は、この手順をスキップできます）。これにより、New Relicはデータを収集し、アプリケーションエラー率、スループット、JavaScriptエラーのあるページビューをダッシュボードに表示できます。この手順はオプションですが、すべてのホストとブラウザモニタリングデータを表示するには、Infrastructureエージェントをインストールすることを強くお勧めします。

Infrastructureエージェントをインストールするには、次の2つの方法があります。

ガイド付きインストールに従って、Infrastructureエージェントを使用してシステムをインストゥルメントします。
コマンドラインを使用してInfrastructureエージェントをインストールします。

2. Vueブラウザモニタリングのインストール

インフラストラクチャエージェントをインストールしたら、次のステップはbrowserをインストールすることです。 one.newrelic.comより:

クリック
Integrations & Agents
クリック
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でのアプリケーションの監視

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

SELECT firstPaint 
FROM PageView

次は何ですか？

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

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