Nuxt 統合

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

Nuxt インテグレーションをセットアップした後、Nuxt Web アプリメトリクス用のダッシュボードを提供します。

インストール

オプション: インフラストラクチャエージェントをインストールする

インフラストラクチャエージェントのインストールはオプションですが、これを行うと、アプリが実行されているホストに関する重要なメトリックが取得されます。

これを行うには、インフラストラクチャエージェントのインストール手順に従います。

Nuxtブラウザ監視をインストールする

one.newrelic.comから+ Integrations & Agentsページに移動します。
Nuxtを検索します。(注: Nuxt タイルはブラウザーコレクションやモバイルコレクションにはないため、検索機能を使用する必要があります。)
検索結果に表示されたNuxtタイルをクリックし、指示に従って JavaScript コードスニペットを生成します。

統合を構成する

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

Nuxt アプリケーションのpublicフォルダーに JavaScript ファイルを作成します。
bash
```
$touch public/<FILENAME>.js
```
Browserエージェントスニペットを、 <script>タグなしで新しい JavaScript ファイルにコピーして貼り付けます（スニペット自体のみで、定義する関数はありません）。
```
// PASTE THE GENERATED BROWSER AGENT SNIPPET HERE WITHOUT <script> TAGS
```

nuxt.config.js (またはnuxt.config.ts) ファイルを開き、 app.headセクションにスクリプトを追加します。

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  app: {
    head: {
      script: [
        {
          src: "/<FILENAME>.js"
        },
      ],
    },
  },
})

アプリケーションを再起動します。
数分以内に、アプリケーションはメトリクスを one.newrelic.comに送信します。

アプリケーションを監視する

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

SELECT firstPaint
FROM PageView

次は何ですか？

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

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

この機械翻訳は、参考として提供されています。