Cara Memantau Aplikasi Penghala Apl Next.js dengan Relik Baharu

Next.js ialah rangka kerja JavaScript berkuasa yang menawarkan kelajuan dan prestasi yang dioptimumkan untuk pembangunan dan masa jalan. Dengan keluaran Next.js 13, Penghala Apl telah menjadi cara yang disyorkan untuk mengendalikan penghalaan dalam aplikasi Next.js. Penghala baharu ini memanfaatkan ciri terbaharu React, seperti Komponen Pelayan dan Penstriman, untuk menawarkan pendekatan yang lebih moden dan cekap untuk membina aplikasi web.

Dalam catatan blog ini, anda akan belajar cara menyediakan pemantauan prestasi aplikasi untuk bahagian pelayan dan pemantauan penyemak imbas untuk bahagian hadapan menggunakan Penghala Apl baharu, memberikan anda kebolehmerhatian timbunan penuh dalam aplikasi Next.js anda. Untuk bermula, anda memerlukan akaun New Relic dan kunci lesen, kedua-duanya tersedia secara percuma.

Memasang ejen dan perisian tengah

Jalankan arahan berikut dalam projek Next.js anda untuk memasang ejen APM New Relic Node.js dan middleware New Relic untuk Next.js.

npm install newrelic @newrelic/next

Selepas arahan berjaya diselesaikan, anda akan melihat kebergantungan disertakan dalam fail package.json anda.

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

Pakej @newrelic/next menyediakan instrumentasi rasmi untuk pemantauan New Relic bagi aplikasi Next.js. Ia memfokuskan pada pemaparan bahagian pelayan, perisian tengah dan penamaan transaksi untuk kedua-dua halaman dan permintaan pelayan, memastikan kebolehmerhatian menyeluruh aktiviti bahagian pelayan.

Pakej ini dipasang secara berasingan tetapi disepadukan dengan lancar dengan ejen New Relic Node.js, menawarkan semua keupayaan ejen untuk pemantauan prestasi yang dipertingkatkan dan penjejakan ralat dalam aplikasi Next.js.

Walaupun ia tidak meliputi tindakan pihak pelanggan, anda boleh menyuntik ejen penyemak imbas New Relic untuk telemetri pihak pelanggan (lebih lanjut mengenainya kemudian dalam catatan blog ini).

Konfigurasi

Untuk menggunakan aplikasi Next.js dengan berkesan dengan New Relic, anda perlu mengubah suai fail next.config.js. Konfigurasi ini memastikan bahawa modul yang disokong oleh New Relic tidak dihancurkan oleh webpack, dan ia mengeksternalkan modul tersebut.

Buat atau kemas kini fail next.config.js dalam akar projek anda dengan kandungan berikut:

'use strict'

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

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

Seterusnya, ubah suai dev anda dan mulakan skrip npm dengan meminda bahagian skrip fail package.json. Benarkan aplikasi anda berjalan dengan pilihan -r Node, yang akan pramuat @newrelic/perisian tengah seterusnya.

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

Sebelum anda menjalankan aplikasi anda, tambahkan fail konfigurasi ejen AMP newrelic.js pada direktori akar projek anda. Untuk mendapatkan maklumat lanjut, lihat contoh fail konfigurasi untuk apl Next.js anda.

Selain itu, gunakan NEW_RELIC_APP_NAME dan NEW_RELIC_LICENSE_KEY dalam fail .env anda seperti yang ditunjukkan dalam contoh fail .env untuk permohonan anda.

Melihat data prestasi dalam New Relic

Jalankan permohonan anda dan pergi ke halaman APM dalam New Relic. Anda akan melihat data sisi pelayan aplikasi anda mengalir ke New Relic.

Kebolehlihatan bahagian hadapan

Untuk menyuntik ejen penyemak imbas apabila menggunakan Penghala Apl, kami akan mengedit fail 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 (