如何使用 New Relic 監控 App Router Next.js 應用程式

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
  }
}

接下來，透過修改 package.json 檔案的腳本部分來修改您的開發並啟動 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 檔案中使用 NEW_RELIC_APP_NAME 和 NEW_RELIC_LICENSE_KEY，如應用程式的範例 .env 檔案所示。

在 New Relic 中查看效能數據

運行您的應用程式並前往 New Relic 中的 APM 頁面。您將看到應用程式的伺服器端資料流入 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 (
    
    <script id="nr-browser-agent" dangerouslysetinnerhtml="{{" __html: browsertimingheader></script>
      
        

• Home
• Users
• About

{children} ) }

以下是此過程的步驟：

1. 如果您尚未使用 npm install newrelic @newrelic/next 命令安裝 newrelic npm 軟體包。

2. 新增 newrelic.getBrowserTimingHeader 方法。

   1. 將 hasToRemoveScriptWrapper: true 作為參數傳遞給 newrelic.getBrowserTimingHeader ，以便傳回瀏覽器腳本而不帶 <script>包裝紙。有關更多詳細信息，請參閱 node-newrelic 文檔。 </script>
   2. 將allowTransactionlessInjection: true作為參數傳遞給newrelic.GetBrowserTimingHeader，以允許不在事務中時注入瀏覽器代理。

3. 在渲染方法中，將 New Relic Browser 代理腳本注入到

   的末尾。文檔的。

4. layout.js(.ts) 檔案應該位於專案的 app 目錄的根目錄中。

有關範例layout.js(.ts) 文件，請造訪以下連結。

在 New Relic 查看瀏覽器數據

啟動應用程序，然後前往 New Relic 中的瀏覽器監控頁面，查看應用程式中流入 New Relic 的客戶端資料。

向 New Relic 發送詳細的錯誤訊息

為了捕獲 Next.js 應用程式中的詳細錯誤訊息，您需要處理客戶端和伺服器端錯誤。

客戶端錯誤

對於客戶端錯誤，您可以使用 error.ts(.js) 檔案擷取錯誤詳細資料並將其傳送至 New Relic。以下是如何實施的範例：

"use client";

import React, { useEffect } from "react";

const Error = ({ error }) => {
  useEffect(() => {
    if (window.newrelic) {
      window.newrelic.noticeError(error);
    }
  }, [error]);

  return <div>Something went wrong</div>;
};

export default Error;

In this example, the useEffect hook is used to call window.newrelic.noticeError whenever an error occurs. This sends the error details to New Relic for further analysis.

error.js(.ts) file defines an error UI boundary for a route segment. To handle errors in root layout, use global-error.js(.ts) and place it in the root app directory.

For more information on error handling in Next.js, refer to the Next.js documentation.

Server-side errors

For errors coming from the backend, the @newrelic/next module handles them out of the box. You don't need to add any additional code for server-side error tracking; the module will automatically capture and report these errors to New Relic.

This ensures that both client-side and server-side errors are effectively monitored and reported to New Relic, providing comprehensive error tracking for your Next.js application.

Next steps

You can find all the code samples in this blog post in the newrelic-node-examples GitHub repository. You can give us any feedback in the GitHub repository issues section.
Check out our Next.js integration page on GitHub.
Sign up for a free New Relic account. Your free account includes 100 GB/month of free data ingest, one free full-access user, and unlimited free basic users.

以上是如何使用 New Relic 監控 App Router Next.js 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！