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

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

Nuxt.jsダッシュボードを使用すると、アプリケーションエラー率、初期ページ読み込み平均、ルート変更、スループット、JavaScriptエラーのあるページビューを簡単に追跡できます。Nuxt.jsダッシュボードは、当社のInfrastructureエージェントとVueブラウザモニタリングで構築されており、1か所で重要な情報をすべて表示できます。

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

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

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

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ファイルを作成します。

    bash
    $
    touch <FILENAME>.js
  2. 新しく作成されたJavaScriptファイルに関数を作成して、生成済みスクリプトを関数内に追加します。

    function FUNCTION_NAME() {
    // GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
    }
    FUNCTION_NAME();
  3. 以下のコードスニペットをコピーし、nuxt.config.jsファイルのHEADER tagに貼り付け、関数名とファイル名を更新します。

    __dangerouslyDisableSanitizers: ["script"],
    script: [
    {
    hid: "<FUNCTION_NAME>",
    src: "/<FILENAME>.js",
    defer: true,
    type: "text/javascript",
    charset: "utf-8",
    },
    ],
  4. アプリケーションを再起動します。

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

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

SELECT firstPaint
FROM PageView

次のステップ

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

Copyright © 2023 New Relic Inc.

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