Comment surveiller les applications Next.js du routeur d'applications avec New Relic

Next.js est un framework JavaScript puissant qui offre une vitesse et des performances optimisées pour le développement et l'exécution. Avec la sortie de Next.js 13, App Router est devenu le moyen recommandé pour gérer le routage dans les applications Next.js. Ce nouveau routeur exploite les dernières fonctionnalités de React, telles que les composants serveur et le streaming, pour offrir une approche plus moderne et plus efficace de la création d'applications Web.

Dans cet article de blog, vous apprendrez comment configurer la surveillance des performances des applications côté serveur et la surveillance du navigateur pour le frontend à l'aide du nouveau App Router, vous offrant ainsi une observabilité complète dans votre application Next.js. Pour commencer, vous aurez besoin d’un compte New Relic et d’une clé de licence, tous deux disponibles gratuitement.

Installation de l'agent et du middleware

Exécutez la commande suivante dans votre projet Next.js pour installer l'agent APM New Relic Node.js et le middleware New Relic pour Next.js.

npm install newrelic @newrelic/next

Une fois la commande terminée avec succès, vous verrez les dépendances incluses dans votre fichier package.json.

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

Le package @newrelic/next fournit une instrumentation officielle pour la surveillance New Relic des applications Next.js. Il se concentre sur le rendu côté serveur, le middleware et la dénomination des transactions pour les requêtes de page et de serveur, garantissant ainsi une observabilité complète des activités côté serveur.

Ce package est installé séparément mais s'intègre parfaitement à l'agent New Relic Node.js, offrant toutes les capacités de l'agent pour une surveillance améliorée des performances et un suivi des erreurs dans les applications Next.js.

Bien que cela ne couvre pas les actions côté client, vous pouvez injecter l'agent de navigateur New Relic pour la télémétrie côté client (nous en parlerons plus tard dans cet article de blog).

Configuration

Pour instrumenter efficacement une application Next.js avec New Relic, vous devez modifier le fichier next.config.js. Cette configuration garantit que les modules pris en charge par New Relic ne sont pas mutilés par webpack et externalise ces modules.

Créez ou mettez à jour le fichier next.config.js à la racine de votre projet avec le contenu suivant :

'use strict'

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

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

Ensuite, modifiez votre développement et démarrez les scripts npm en modifiant la section scripts du fichier package.json. Autorisez votre application à s'exécuter avec l'option -r de Node, qui préchargera le middleware @newrelic/next.

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

Avant d'exécuter votre application, ajoutez le fichier de configuration de l'agent AMP newrelic.js au répertoire racine de votre projet. Pour plus d'informations, consultez un exemple de fichier de configuration pour votre application Next.js.

De plus, utilisez NEW_RELIC_APP_NAME et NEW_RELIC_LICENSE_KEY dans votre fichier .env comme indiqué dans un exemple de fichier .env pour votre application.

Affichage des données de performances dans New Relic

Exécutez votre application et accédez à la page APM dans New Relic. Vous verrez les données côté serveur de votre application circuler dans New Relic.

Observabilité frontale

Pour injecter l'agent de navigateur lors de l'utilisation d'App Router, nous allons éditer le fichier 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 (