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 中间件。
命令成功完成后，您将看到 package.json 文件中包含的依赖项。
@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 文件：
接下来，通过修改 package.json 文件的脚本部分来修改您的开发并启动 npm 脚本。允许您的应用程序使用 Node 的 -r 选项运行，这将预加载 @newrelic/next 中间件。
在运行应用程序之前，请将 newrelic.js AMP 代理配置文件添加到项目的根目录中。有关更多信息，请参阅 Next.js 应用程序的示例配置文件。
此外，请在 .env 文件中使用 NEW_RELIC_APP_NAME 和 NEW_RELIC_LICENSE_KEY，如应用程序的示例 .env 文件中所示。
运行您的应用程序并转到 New Relic 中的 APM 页面。您将看到应用程序的服务器端数据流入 New Relic。
要在使用 App Router 时注入浏览器代理，我们将编辑 app/layout.js(.ts) 文件。
以下是此过程的步骤：
添加 newrelic.getBrowserTimingHeader 方法。
在 render 方法中，将 New Relic Browser 代理脚本注入到
的末尾。文件的.layout.js(.ts) 文件应该位于项目 app 目录的根目录下。
对于示例layout.js(.ts)文件，请访问以下链接。
启动应用程序，然后转到 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;
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.
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.
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中文网其他相关文章！
