Next.js — это мощная среда JavaScript, обеспечивающая оптимизированную скорость и производительность как для разработки, так и для выполнения. С выпуском Next.js 13 App Router стал рекомендуемым способом управления маршрутизацией в приложениях Next.js. Этот новый маршрутизатор использует новейшие функции React, такие как серверные компоненты и потоковая передача, чтобы предложить более современный и эффективный подход к созданию веб-приложений.

В этом посте блога вы узнаете, как настроить мониторинг производительности приложений на стороне сервера и мониторинг браузера для внешнего интерфейса с помощью нового App Router, обеспечивающего полную возможность наблюдения за вашим приложением Next.js. Для начала вам понадобится учетная запись New Relic и лицензионный ключ, которые доступны бесплатно.

Установка агента и промежуточного программного обеспечения

Выполните следующую команду в своем проекте Next.js, чтобы установить агент APM New Relic Node.js и промежуточное программное обеспечение New Relic для Next.js.

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 для телеметрии на стороне клиента (подробнее об этом позже в этом сообщении блога).

Конфигурация

Чтобы эффективно оснастить приложение Next.js с помощью New Relic, вам необходимо изменить файл next.config.js. Эта конфигурация гарантирует, что модули, поддерживаемые New Relic, не будут повреждены веб-пакетом, и эти модули будут экспортированы.

Создайте или обновите файл next.config.js в корне вашего проекта со следующим содержимым:

'use strict'

const nrExternals = require('@newrelic/next/load-externals')

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ['newrelic']
  },
  webpack: (config) => {
    nrExternals(config)
    return config
  }
}

Затем измените сценарии разработки и запускайте npm, внеся изменения в раздел сценариев файла package.json. Разрешите запуск вашего приложения с помощью опции 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"
}

Перед запуском приложения добавьте файл конфигурации агента AMP newrelic.js в корневой каталог вашего проекта. Для получения дополнительной информации см. пример файла конфигурации для вашего приложения Next.js.

Кроме того, используйте NEW_RELIC_APP_NAME и NEW_RELIC_LICENSE_KEY в вашем .env-файле, как показано в примере .env-файла для вашего приложения.

Просмотр данных производительности в New Relic

Запустите приложение и перейдите на страницу APM в New Relic. Вы увидите, что серверные данные вашего приложения передаются в 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. Установите пакет newrelic npm, если вы еще этого не сделали, с помощью команды npm install newrelic @newrelic/next.

2. Добавьте метод newrelic.getBrowserTimingHeader.

   1. Передайте hasToRemoveScriptWrapper: true в качестве аргумента newrelic.getBrowserTimingHeader, чтобы скрипт браузера возвращался без оболочки
   2. ПередайтеallowTransactionlessInjection: true в качестве аргумента newrelic.GetBrowserTimingHeader, чтобы разрешить внедрение агента браузера, когда он не участвует в транзакции.

3. В методе рендеринга вставьте скрипт агента браузера New Relic в конец

   документа.

4. Файл layout.js(.ts) должен находиться в корне каталога приложения вашего проекта.

Пример файла 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) определяет границу пользовательского интерфейса ошибки для сегмента маршрута. Для обработки ошибок в корневом макете используйте global-error.js(.ts) и поместите его в корневой каталог приложения.

Дополнительную информацию об обработке ошибок в Next.js см. в документации Next.js.

Ошибки на стороне сервера

Ошибки, поступающие из серверной части, модуль @newrelic/next обрабатывает автоматически. Вам не нужно добавлять дополнительный код для отслеживания ошибок на стороне сервера; модуль автоматически фиксирует эти ошибки и сообщает об этих ошибках в New Relic.

Это гарантирует, что ошибки как на стороне клиента, так и на стороне сервера эффективно отслеживаются и сообщаются в New Relic, обеспечивая комплексное отслеживание ошибок для вашего приложения Next.js.

Следующие шаги

Все примеры кода из этой записи блога можно найти в репозитории newrelic-node-examples на GitHub. Вы можете оставить нам свой отзыв в разделе проблем с репозиторием GitHub.
Посетите нашу страницу интеграции Next.js на GitHub.
Зарегистрируйте бесплатную учетную запись New Relic. Ваша бесплатная учетная запись включает в себя 100 ГБ бесплатного приема данных в месяц, одного бесплатного пользователя с полным доступом и неограниченное количество бесплатных базовых пользователей.