如何使用 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 (
<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>
)
}
以下是此过程的步骤：
- 如果您尚未使用 npm install newrelic @newrelic/next 命令安装 newrelic npm 软件包。
-
添加 newrelic.getBrowserTimingHeader 方法。
- 将 hasToRemoveScriptWrapper: true 作为参数传递给 newrelic.getBrowserTimingHeader ，以便返回浏览器脚本而不带 <script>包装纸。有关更多详细信息，请参阅 node-newrelic 文档。</script>
- 将allowTransactionlessInjection: true作为参数传递给newrelic.GetBrowserTimingHeader，以允许不在事务中时注入浏览器代理。
-
在渲染方法中，将 New Relic Browser 代理脚本注入到
的末尾。文档的。 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
