New Relic を使用して App Router Next.js アプリケーションを監視する方法-jsチュートリアル-php.cn

Next.js は、開発と実行時の両方で最適化された速度とパフォーマンスを提供する強力な JavaScript フレームワークです。 Next.js 13 のリリースにより、App Router が Next.js アプリケーションでルーティングを処理する推奨方法になりました。この新しいルーターは、サーバーコンポーネントやストリーミングなどの React の最新機能を活用して、Web アプリケーションを構築するためのより現代的で効率的なアプローチを提供します。

このブログ投稿では、新しい App Router を使用してサーバー側のアプリケーションパフォーマンス監視とフロントエンドのブラウザ監視を設定し、Next.js アプリケーションでフルスタックの可観測性を実現する方法を学びます。開始するには、New Relic アカウントとライセンスキーが必要です。どちらも無料で入手できます。

エージェントとミドルウェアのインストール

Next.js プロジェクトで次のコマンドを実行して、New Relic Node.js APM エージェントと Next.js 用の New Relic ミドルウェアをインストールします。

npm install newrelic @newrelic/next

ログイン後にコピー

コマンドが正常に完了すると、package.json ファイルに含まれる依存関係が表示されます。

 "dependencies": {
   "@newrelic/next": "^0.10.0",
   "newrelic": "^11.23.0",
   "next": "14.2.5",
   "react": "^18",
   "react-dom": "^18"
 },

ログイン後にコピー

@newrelic/next パッケージは、Next.js アプリケーションの New Relic モニタリングのための公式インスツルメンテーションを提供します。これは、ページとサーバーの両方のリクエストに対するサーバー側のレンダリング、ミドルウェア、トランザクションの命名に焦点を当てており、サーバー側のアクティビティの包括的な可観測性を確保します。

このパッケージは個別にインストールされますが、New Relic Node.js エージェントとシームレスに統合され、Next.js アプリケーションのパフォーマンス監視とエラー追跡を強化するためのエージェントのすべての機能を提供します。

クライアント側のアクションについては説明しませんが、クライアント側のテレメトリ用に New Relic ブラウザエージェントを挿入できます (詳細については、このブログ投稿で後ほど説明します)。

構成

New Relic を使用して Next.js アプリケーションを効果的にインストルメントするには、next.config.js ファイルを変更する必要があります。この構成により、New Relic によってサポートされるモジュールが webpack によって破壊されず、それらのモジュールが外部化されます。

次の内容を含む next.config.js ファイルをプロジェクトルートに作成または更新します。

'use strict'

const nrExternals = require('@newrelic/next/load-externals')

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['newrelic']
  },
  webpack: (config) => {
    nrExternals(config)
    return config
  }
}

ログイン後にコピー

次に、dev を変更し、package.json ファイルの script セクションを修正して npm スクリプトを開始します。 Node の -r オプションを使用してアプリケーションを実行できるようにします。これにより、@newrelic/next ミドルウェアがプリロードされます。

"scripts": {
  "dev": "NODE_OPTIONS='-r @newrelic/next' next",
  "build": "next build",
  "start": "NODE_OPTIONS='-r @newrelic/next' next start",
  "lint": "next lint"
}

ログイン後にコピー

アプリケーションを実行する前に、newrelic.js AMP エージェント設定ファイルをプロジェクトのルートディレクトリに追加します。詳細については、Next.js アプリの構成ファイルの例を参照してください。

さらに、アプリケーションの .env ファイルの例に示すように、.env ファイルで NEW_RELIC_APP_NAME と NEW_RELIC_LICENSE_KEY を使用します。

New Relic でのパフォーマンスデータの表示

アプリケーションを実行し、New Relic の APM ページに移動します。アプリケーションのサーバー側データが New Relic に流れ込んでいるのがわかります。

How to Monitor App Router Next.js Applications with New Relic

フロントエンドの可観測性

App Router の使用時にブラウザーエージェントを挿入するには、app/layout.js(.ts) ファイルを編集します。

import Script from 'next/script'
import Link from 'next/link'
import newrelic from 'newrelic'
import './style.css'

export default async function RootLayout({ children }) {
  if (newrelic.agent.collector.isConnected() === false) {
    await new Promise((resolve) => {
      newrelic.agent.on("connected", resolve)
    })
  }

  const browserTimingHeader = newrelic.getBrowserTimingHeader({
    hasToRemoveScriptWrapper: true,
    allowTransactionlessInjection: true,
  })

  return (
    <html>
    <Script
        id="nr-browser-agent"
        dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
      />
      <body>
        <ul className="navbar">
          <li><a href="/">Home</a></li>
          <li><Link href="/users" key={"users"}>Users</Link></li>
          <li><Link href="/about" key={"about"}>About</Link></li>
        </ul>
        {children}
      </body>
    </html>
  )
}

ログイン後にコピー

このプロセスの手順は次のとおりです: