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 包为 New Relic 监控 Next.js 应用程序提供官方工具。它专注于页面和服务器请求的服务器端渲染、中间件和事务命名，确保服务器端活动的全面可观察性。

此软件包单独安装，但与 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 (
    
    
      
        

• Home
• Users
• About

以下是此过程的步骤：

1. 如果您尚未使用 npm install newrelic @newrelic/next 命令安装 newrelic npm 软件包。

2. 添加newrelic.getBrowserTimingHeader方法。

   1. 将 hasToRemoveScriptWrapper: true 作为参数传递给 newrelic.getBrowserTimingHeader，以便返回浏览器脚本而不使用
   2. 将allowTransactionlessInjection: true作为参数传递给newrelic.GetBrowserTimingHeader，以允许不在事务中时注入浏览器代理。

3. 在 render 方法中，将 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 
Something went wrong
;
};

export default Error;

在此示例中，useEffect 挂钩用于在发生错误时调用 window.newrelic.noticeError。这会将错误详细信息发送到 New Relic 进行进一步分析。

error.js(.ts) 文件定义路线段的错误 UI 边界。要处理根布局中的错误，请使用 global-error.js(.ts) 并将其放置在根应用程序目录中。

有关 Next.js 中错误处理的更多信息，请参阅 Next.js 文档。

服务器端错误

对于来自后端的错误，@newrelic/next 模块会立即处理它们。您不需要添加任何额外的代码来进行服务器端错误跟踪；模块会自动捕获这些错误并将其报告给 New Relic。

这可确保有效监控客户端和服务器端错误并将其报告给 New Relic，从而为您的 Next.js 应用程序提供全面的错误跟踪。

下一步

您可以在 newrelic-node-examples GitHub 存储库中找到本博客文章中的所有代码示例。您可以在 GitHub 存储库问题部分向我们提供任何反馈。
查看 GitHub 上的 Next.js 集成页面。
注册一个免费的 New Relic 帐户。您的免费帐户包括每月 100 GB 的免费数据摄取、一名免费的完全访问用户和无限制的免费基本用户。