Wir stellen vor: NetPulse: ein Next.js Observability Developer Tool

NetPulse ist eine Open-Source-Organisation, die sich der Entwicklung von Open-Source-Tools zur Leistungssteigerung und Beobachtbarkeit für die Entwicklergemeinschaft widmet. Unser Namensgeber ist ein kostenloses Open-Source-npm-Paket für Next.js, das umfangreiche, leicht zu analysierende und klar visualisierte Daten bereitstellt, die in Echtzeit in der Art der Netzwerkregisterkarte von Chrome Devtools aktualisiert werden. Wenn Sie möchten, können Sie hier direkt zu unseren Installations- und Nutzungsanweisungen springen. Ansonsten erfahren Sie unten mehr über unsere Inspiration und Motivation für die Entwicklung von NetPulse sowie einen detaillierten Überblick über seine Funktionen.

NetPulse begann nach dem Versuch, die Leistung unserer eigenen Next.js-Anwendung beim Rendern von Websites mithilfe von Server Side Rendering zu überwachen. Während die Registerkarte „Basisnetzwerk“ in Chrome Devtools nützlich ist, rendert Next.js alles beim ersten Laden vor und sendet bei nachfolgenden Ladevorgängen zwischengespeicherte .json-Dateien an den Client, sodass Sie die Leistung des tatsächlichen Rendervorgangs nicht sehen und den Zugriff auf wichtige Dateien verlieren Informationen zu Abruf- und Datenbankaufrufen, die serverseitig und nicht clientseitig initiiert werden. Dies führt möglicherweise zu einer Vielzahl schwer zu diagnostizierender Leistungsprobleme, Engpässe und Verwirrung darüber, ob Ihre Microservices ordnungsgemäß funktionieren. Ein gutes Beispiel sind unbeabsichtigte sequentielle Abrufe – eine Reihe versehentlich hinzugefügter Abhängigkeiten können Wasserfälle erzeugen, die zu unnötig langen Ladezeiten führen.

OpenTelemetry ist eine ideale Lösung (sehen Sie sich hier unsere Kurzanleitung an), aber als wir mit der Arbeit an Netpulse begannen, ließ es sich nicht richtig in Next.js integrieren und hatte tatsächlich nur wenig native Unterstützung. Die automatische Instrumentierung schlägt oft fehl, weil Next.js den Abruf ändert, um nützliche Funktionen wie die Deduplizierung von Abrufanforderungen hinzuzufügen. Die ursprüngliche Version von NetPulse konzentrierte sich auf die einfache Implementierung von OpenTelemetry in Next.js, und tatsächlich haben wir eine erfolgreiche Problemumgehung mit Node Fetch entwickelt.

Kurz darauf fügte Vercel jedoch integrierte Unterstützung für Next.js für OpenTelemetry hinzu. Nachdem wir ihre Lösung und die offizielle Demo getestet hatten, stellten wir leider fest, dass sie unter einigen Startproblemen litt

Abgesehen von den Startproblemen hatten wir nach dem Hochfahren des vorgeschlagenen Container-Images Probleme mit der Darstellung der Daten – nämlich, dass es schwierig ist, sie schnell zu analysieren, sie keine Unterstützung für die Datenbanküberwachung bietet (ein äußerst nützlicher Aspekt von OpenTelemetry) und Docker erfordert und das Ausführen mehrerer Dienste, und was am wichtigsten ist, es eignet sich nicht gut zum Streamen von Updates – Ihre Aktionen werden nicht in Echtzeit angezeigt.

Wir dachten über eine Implementierung basierend auf der Containerisierung nach, aber während wir noch über das fertige Produkt nachdachten, wurde die Ankündigung des Ablaufs der kostenlosen Docker-Teams bekannt gegeben. Dies hat uns dazu bewogen, eine andere Lösung anzubieten, die nicht auf Docker angewiesen ist. NetPulse ist ein einfaches NPM-Paket, das kaum zusätzlichen Code erfordert, um mit der Überwachung der Funktionalität Ihrer Next.js-App zu beginnen.

MERKMALE

Eine der nützlichsten Funktionen, die wir integriert haben, ist ein Netzwerk-Tab-Diagramm im Chrome Devtools-Stil mit aktiven Abrufen – die Dauer jedes einzelnen Zeitraums wird auf einer Gantt-Zeitleiste dargestellt, die in Echtzeit aktualisiert wird. Wenn Sie mit der Maus über die Markierung einer einzelnen Zeitspanne fahren, werden der Endpunkt und die Dauer in einem Tooltip angezeigt, sodass Sie den Verursacher einer Verlangsamung leichter identifizieren können.

Dieses Zeitleistendiagramm umfasst die meisten Netzwerkaktivitäten, einschließlich Datenbankaufrufen, sodass Sie leicht erkennen können, welche Teile Ihrer App derzeit am meisten zur Ladezeit beitragen. Anhand der Farben der Häkchen können Sie außerdem den Statuscode auf einen Blick erkennen: 2xx-Codes werden in Grün, 3xx-Codes in Blau und Fehler der Serien 4xx bis 5xx in Rot angezeigt.

Unterhalb des Zeitleistendiagramms befindet sich eine Tabelle, die ebenfalls in Echtzeit aktualisiert wird und weitere nützliche Informationen anzeigt. Zusätzlich zum vollständigen Statuscode können Sie die Größe der Antwort sehen (alle Antworten, die leer sind, aber einen Statuscode von 200 haben, werden angezeigt). werden auch rot angezeigt), die Dauer und Startzeit in ms und, was am hilfreichsten ist, ein einfaches Wasserfalldiagramm für Ihre Anfragen.

Das Beste daran: Sie können die Informationen des Diagramms einfach und unkompliziert mit einem Klick neu anordnen, beispielsweise nach Dauer sortieren oder nur 400 Statusfehler herausfiltern.

Wenn wir Sie verkauft haben, fahren Sie fort, um zu sehen, wie Sie unser Produkt einfach installieren können.

INSTALLATION

Wenn Sie jemals über eine YML-Datei geschwitzt haben, versucht haben herauszufinden, wo Sie versehentlich Leerzeichen eingefügt haben, oder umfangreiche Dokumente zur Instrumentierung von OpenTelemetry gelesen haben, werden Sie die Einfachheit unseres Installationsprozesses sicherlich zu schätzen wissen.

npm i @netpulse/tracing @netpulse/dashboard

Erstellen Sie als Nächstes eine Datei mit dem Namen „dashboard.tsx“ in Ihren Seiten oder Ihrem App-Verzeichnis, je nachdem, welche Version von Next.js Sie verwenden, und fügen Sie dann den folgenden Code hinzu:

Fügen Sie Ihrer package.json ein Startskript hinzu:

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

import * as fetch from 'node-fetch'

GEPLANTE FUNKTIONEN & HELFEN SIE MIT!

Wir haben Pläne, die aktuelle Implementierung von NetPulse zu erweitern – zum Beispiel durch das Hinzufügen einer besseren und umfassenderen Datenbanküberwachung, die Bereitstellung zusätzlicher Metriken, die Nutzbarkeit als NPM-Paket auf Front-End-Frameworks, die nicht Next.js sind, und sogar Unterstützung für andere Programmiersprachen. Wenn Sie helfen möchten, schreiben Sie uns eine Nachricht an einen der unten aufgeführten Standorte oder senden Sie uns eine E-Mail an [email protected]

• NetPulse: Github | LinkedIn

• Benjamin Cai: Github | LinkedIn
• Thomas Eng: Github | LinkedIn
• Michael Herrick: Github | LinkedIn
• Austin Hoang: Github | LinkedIn
• Giles Steiner: Github | LinkedIn