NetPulse — это организация с открытым исходным кодом, занимающаяся созданием инструментов повышения производительности и наблюдаемости с открытым исходным кодом для сообщества разработчиков. Наш тезка — это бесплатный пакет npm с открытым исходным кодом для Next.js, который предоставляет богатые, легко анализируемые, четко визуализированные данные, которые обновляются в режиме реального времени, как на вкладке сети в Chrome Devtools. Вы можете сразу перейти к нашим инструкциям по установке и использованию здесь, если хотите — в противном случае вы можете узнать больше о нашем вдохновении и мотивации для создания NetPulse ниже, а также подробный обзор его функций.

NetPulse начался после попытки отслеживать производительность нашего собственного приложения Next.js при рендеринге веб-сайтов с использованием рендеринга на стороне сервера. В то время как вкладка базовой сети в Chrome Devtools полезна, Next.js выполняет предварительный рендеринг всего при первой загрузке, а при последующих загрузках отправляет кэшированные файлы .json клиенту, не позволяя вам видеть производительность фактического процесса рендеринга и теряя доступ к важным информация о вызовах выборки и базы данных, которые инициируются на стороне сервера, а не на стороне клиента. Это создает потенциал для множества трудно диагностируемых проблем с производительностью, узких мест и путаницы в том, правильно ли работают ваши микросервисы. Отличным примером является непреднамеренная последовательная выборка — серия непреднамеренно добавленных зависимостей может создавать водопады, что приводит к неоправданно долгому времени загрузки.

OpenTelemetry — идеальное решение (ознакомьтесь с нашим кратким руководством здесь»), но когда мы начали работу над Netpulse, оно не интегрировалось должным образом с Next.js. , и на самом деле имел небольшую встроенную поддержку. Автоматическое инструментирование часто давало сбой из-за того, как Next.js модифицировал выборку, добавляя полезные функции, такие как дедупликация запросов на выборку. Первоначальная версия NetPulse была сосредоточена на простом внедрении OpenTelemetry в Next.js, и на самом деле мы разработали успешный обходной путь, включающий выборку узла.

Однако вскоре после этого Vercel добавила в Next.js встроенную поддержку OpenTelemetry. К сожалению, после тестирования их решения и его официальной демонстрации мы поняли, что оно страдает от нескольких проблем с запуском.

Помимо проблем с запуском, после раскрутки предложенного образа контейнера у нас возникла проблема с представлением данных, а именно: его сложно быстро разобрать, он не поддерживает мониторинг базы данных (чрезвычайно полезный аспект OpenTelemetry), он требует Docker. и запуск нескольких сервисов, и, что наиболее важно, он не очень подходит для потоковой передачи обновлений — вы не видите, как ваши действия отражаются в режиме реального времени.

Мы рассматривали реализацию, основанную на контейнеризации, но, пока мы все еще думали о готовом продукте, было объявлено о закрытии бесплатных команд Docker. Это побудило нас предложить другое решение, которое не зависело бы от Docker. NetPulse — это простой пакет NPM, который практически не требует дополнительного кода для начала мониторинга функциональности вашего приложения Next.js.

ФУНКЦИИ

Одна из наиболее полезных функций, которые мы включили, — это диаграмма сетевых вкладок в стиле Chrome Devtools для активных выборок — продолжительность каждого отдельного интервала отображается на временной шкале Ганта, которая обновляется в режиме реального времени. При наведении указателя мыши на маркер отдельного диапазона во всплывающей подсказке отображается конечная точка и продолжительность, что позволяет легко определить виновника любого замедления.

Эта временная диаграмма включает в себя большую часть сетевой активности, включая вызовы базы данных, что упрощает определение того, какие части вашего приложения в настоящее время больше всего увеличивают время загрузки. Цвета галочек также позволяют сразу определить код состояния — коды 2xx отображаются зеленым, коды 3xx — синим, а ошибки серии 4xx — 5xx — красным.

Под диаграммой временной шкалы у нас есть таблица, которая также обновляется в режиме реального времени, отображая более полезную информацию — в дополнение к полному коду состояния вы можете увидеть размер ответа (любые ответы, которые пусты, но имеют код состояния 200, будут также отображаются красным цветом), продолжительность и время начала в мс и, что очень полезно, простая каскадная диаграмма для ваших запросов.

Лучше всего то, что вы можете легко и просто переупорядочивать информацию на диаграмме одним щелчком мыши, например, сортируя по продолжительности или отфильтровывая только 400 ошибок статуса.

Если мы продали вас, продолжайте, чтобы узнать, как легко установить наш продукт.

УСТАНОВКА

Если вы когда-нибудь возились с YML-файлом, пытаясь выяснить, где вы случайно добавили пробелы, или читали объемную документацию о том, как использовать OpenTelemetry, вы наверняка оцените простоту нашего процесса установки.

npm i @netpulse/tracing @netpulse/dashboard

Затем создайте файл в корневом каталоге вашего приложения Next.js. Вы можете назвать его как хотите, хотя мы неравнодушны к «tracing.js». Внутри файла просто добавьте две строки кода:

Затем создайте файл с именем «dashboard.tsx» на своих страницах или в каталоге приложения, в зависимости от используемой версии Next.js, затем добавьте следующий код:

Добавьте стартовый скрипт в ваш package.json:

"tracing": "node --require ./tracing.js & ./node_modules/.bin/next dev"

Наконец, на любых страницах, которые вы хотите отслеживать, добавьте эту строку кода:

import * as fetch from 'node-fetch'

Теперь вы просто запускаете «npm run tracing» вместо «npm run dev» и заходите на localhost:3000/dashboard, чтобы увидеть свою панель инструментов, которая будет обновляться в режиме реального времени по мере того, как вы запускаете свою страницу. Когда диаграмма или таблица становятся слишком загроможденными, вы можете просто обновить их, чтобы очистить. Обратите внимание, что отслеживание базы данных в настоящее время работает только для версий Mongoose между 5.9.7 и 7, а реализация PG работает для версий между 8 и 9.

ЗАПЛАНИРОВАННЫЕ ФУНКЦИИ И ПОМОГИТЕ ПОМОЧЬ!

У нас есть планы расширить текущую реализацию NetPulse — например, добавить улучшенный, более обширный мониторинг базы данных, предоставить дополнительные метрики, сделать его пригодным для использования в качестве пакета NPM на интерфейсных платформах, отличных от Next.js, и даже поддержка других языков программирования. Если вы хотите помочь, напишите нам по любому из указанных ниже адресов или напишите нам по адресу [email protected].

Наша команда: