搜索

首页 >web前端 >js教程 >如何使用 New Relic 监控 App Router Next.js 应用程序

如何使用 New Relic 监控 App Router Next.js 应用程序

WBOY
WBOY原创
2024-07-24 11:18:53848浏览

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。

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

以下是此过程的步骤：

  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 的客户端数据。

How to Monitor App Router Next.js Applications with 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中文网其他相关文章！

JavaScript json npm webpack if for while Directory Error using JS this github ui Access router
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Fetching and Presenting Products in Nuxt.js for Your E-Commerce Store下一篇：Streaming HTTP Responses using fetch

相关文章

查看更多