Next.js ist ein leistungsstarkes JavaScript-Framework, das optimierte Geschwindigkeit und Leistung sowohl für die Entwicklung als auch zur Laufzeit bietet. Mit der Veröffentlichung von Next.js 13 ist der App Router zur empfohlenen Methode für die Weiterleitung in Next.js-Anwendungen geworden. Dieser neue Router nutzt die neuesten Funktionen von React, wie Serverkomponenten und Streaming, um einen moderneren und effizienteren Ansatz für die Erstellung von Webanwendungen zu bieten.

In diesem Blogbeitrag erfahren Sie, wie Sie mithilfe des neuen App Routers die Anwendungsleistungsüberwachung für die Serverseite und die Browserüberwachung für das Frontend einrichten und so eine vollständige Stack-Beobachtbarkeit in Ihrer Next.js-Anwendung erhalten. Um zu beginnen, benötigen Sie ein New Relic-Konto und einen Lizenzschlüssel, die beide kostenlos erhältlich sind.

Installieren des Agenten und der Middleware

Führen Sie den folgenden Befehl in Ihrem Next.js-Projekt aus, um den New Relic Node.js APM-Agenten und die New Relic-Middleware für Next.js zu installieren.

npm install newrelic @newrelic/next

Nachdem der Befehl erfolgreich abgeschlossen wurde, sehen Sie die in Ihrer package.json-Datei enthaltenen Abhängigkeiten.

 "dependencies": {
   "@newrelic/next": "^0.10.0",
   "newrelic": "^11.23.0",
   "next": "14.2.5",
   "react": "^18",
   "react-dom": "^18"
 },

Das @newrelic/next-Paket bietet offizielle Instrumentierung für die New Relic-Überwachung von Next.js-Anwendungen. Es konzentriert sich auf serverseitiges Rendering, Middleware und Transaktionsbenennung sowohl für Seiten- als auch für Serveranfragen und gewährleistet so eine umfassende Beobachtbarkeit serverseitiger Aktivitäten.

Dieses Paket wird separat installiert, lässt sich jedoch nahtlos in den New Relic Node.js-Agenten integrieren und bietet alle Funktionen des Agenten für eine verbesserte Leistungsüberwachung und Fehlerverfolgung in Next.js-Anwendungen.

Obwohl clientseitige Aktionen nicht abgedeckt werden, können Sie den New Relic-Browseragenten für clientseitige Telemetrie injizieren (mehr dazu später in diesem Blogbeitrag).

Aufbau

Um eine Next.js-Anwendung effektiv mit New Relic zu instrumentieren, müssen Sie die Datei next.config.js ändern. Diese Konfiguration stellt sicher, dass die von New Relic unterstützten Module nicht durch Webpack entstellt werden, und sie externalisiert diese Module.

Erstellen oder aktualisieren Sie die Datei next.config.js in Ihrem Projektstammverzeichnis mit folgendem Inhalt:

'use strict'

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

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

Ändern Sie als Nächstes Ihre Entwicklungs- und Start-NPM-Skripte, indem Sie den Abschnitt „Skripte“ der Datei „package.json“ ändern. Ermöglichen Sie die Ausführung Ihrer Anwendung mit der Option -r von Node, die die @newrelic/next-Middleware vorab lädt.

"scripts": {
  "dev": "NODE_OPTIONS='-r @newrelic/next' next",
  "build": "next build",
  "start": "NODE_OPTIONS='-r @newrelic/next' next start",
  "lint": "next lint"
}

Bevor Sie Ihre Anwendung ausführen, fügen Sie die AMP-Agent-Konfigurationsdatei newrelic.js zum Stammverzeichnis Ihres Projekts hinzu. Weitere Informationen finden Sie in einer Beispielkonfigurationsdatei für Ihre Next.js-App.

Verwenden Sie außerdem NEW_RELIC_APP_NAME und NEW_RELIC_LICENSE_KEY in Ihrer .env-Datei, wie in einer Beispiel-.env-Datei für Ihre Anwendung gezeigt.

Leistungsdaten in New Relic anzeigen

Führen Sie Ihre Anwendung aus und gehen Sie zur APM-Seite in New Relic. Sie werden sehen, wie die serverseitigen Daten Ihrer Anwendung in New Relic fließen.

Frontend-Beobachtbarkeit

Um den Browser-Agenten bei Verwendung des App Routers einzuschleusen, bearbeiten wir die Datei 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

Hier sind die Schritte für diesen Prozess:

1. Installieren Sie das Paket newrelic npm, falls Sie dies noch nicht getan haben, mit dem Befehl npm install newrelic @newrelic/next.

2. Fügen Sie die Methode newrelic.getBrowserTimingHeader hinzu.

   1. Übergeben Sie hasToRemoveScriptWrapper: true als Argument an newrelic.getBrowserTimingHeader, sodass das Browserskript ohne den
   2. Übergeben Sie „allowTransactionlessInjection: true“ als Argument an newrelic.GetBrowserTimingHeader, um die Injektion des Browser-Agenten zu ermöglichen, wenn er nicht in einer Transaktion ist.

3. Fügen Sie in der Render-Methode das New Relic Browser-Agent-Skript am Ende des

   des Dokuments ein.

4. Die Datei „layout.js“ (.ts) sollte sich im Stammverzeichnis des App-Verzeichnisses Ihres Projekts befinden.

Die Beispieldatei „layout.js(.ts)“ finden Sie unter dem folgenden Link.

Browserdaten in New Relic anzeigen

Starten Sie die Anwendung und gehen Sie dann zur Browser-Überwachungsseite in New Relic, um zu sehen, wie clientseitige Daten von Ihrer Anwendung in New Relic fließen.

Detaillierte Fehlerinformationen werden an New Relic gesendet

Um detaillierte Fehlerinformationen in Ihrer Next.js-Anwendung zu erfassen, müssen Sie sowohl clientseitige als auch serverseitige Fehler behandeln.

Clientseitige Fehler

Bei clientseitigen Fehlern können Sie die Datei error.ts(.js) verwenden, um Fehlerdetails zu erfassen und an New Relic zu senden. Nachfolgend finden Sie ein Beispiel dafür, wie dies implementiert werden kann:

"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;

In diesem Beispiel wird der useEffect-Hook verwendet, um window.newrelic.noticeError aufzurufen, wenn ein Fehler auftritt. Dadurch werden die Fehlerdetails zur weiteren Analyse an New Relic gesendet.

error.js(.ts) definiert eine Fehler-UI-Grenze für ein Routensegment. Um Fehler im Root-Layout zu behandeln, verwenden Sie global-error.js(.ts) und platzieren Sie es im Root-App-Verzeichnis.

Weitere Informationen zur Fehlerbehandlung in Next.js finden Sie in der Next.js-Dokumentation.

Serverseitige Fehler

Fehler, die vom Backend kommen, werden vom @newrelic/next-Modul standardmäßig behandelt. Sie müssen keinen zusätzlichen Code für die serverseitige Fehlerverfolgung hinzufügen. Das Modul erfasst diese Fehler automatisch und meldet sie an New Relic.

Dadurch wird sichergestellt, dass sowohl clientseitige als auch serverseitige Fehler effektiv überwacht und an New Relic gemeldet werden, was eine umfassende Fehlerverfolgung für Ihre Next.js-Anwendung ermöglicht.

Nächste Schritte

Sie finden alle Codebeispiele in diesem Blogbeitrag im GitHub-Repository newrelic-node-examples. Sie können uns im Abschnitt „GitHub-Repository-Probleme“ Feedback geben.
Schauen Sie sich unsere Next.js-Integrationsseite auf GitHub an.
Registrieren Sie sich für ein kostenloses New Relic-Konto. Ihr kostenloses Konto beinhaltet 100 GB/Monat kostenlose Datenaufnahme, einen kostenlosen Vollzugriffsbenutzer und unbegrenzte kostenlose Basisbenutzer.