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 klien (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 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 aplikasi anda.

Melihat data prestasi dalam New Relic

Jalankan aplikasi 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 (
    <html>
    <Script
        id="nr-browser-agent"
        dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
      />
      <body>
        <ul className="navbar">
          <li><a href="/">Home</a></li>
          <li><Link href="/users" key={"users"}>Users</Link></li>
          <li><Link href="/about" key={"about"}>About</Link></li>
        </ul>
        {children}
      </body>
    </html>
  )
}

Berikut ialah langkah-langkah untuk proses ini:

1. Pasang pakej npm newrelic jika anda belum lagi menggunakan arahan npm install newrelic @newrelic/next.

2. Tambah kaedah newrelic.getBrowserTimingHeader.

   1. Pass hasToRemoveScriptWrapper: benar sebagai hujah kepada newrelic.getBrowserTimingHeader supaya skrip penyemak imbas dikembalikan tanpa pembalut. Lihat dokumen nod-newrelic untuk mendapatkan butiran lanjut.
   2. Pas allowTransactionlessInjection: benar sebagai hujah kepada newrelic.GetBrowserTimingHeader untuk membenarkan suntikan ejen penyemak imbas apabila tidak dalam transaksi.

3. Dalam kaedah pemaparan, suntik skrip ejen Penyemak Imbas Peninggalan Baharu ke hujung daripada dokumen.

4. Fail layout.js(.ts) hendaklah berada dalam akar direktori apl projek anda.

Untuk contoh fail layout.js(.ts), lawati pautan berikut.

Melihat data penyemak imbas dalam New Relic

Mulakan aplikasi dan kemudian pergi ke halaman pemantauan penyemak imbas dalam New Relic untuk melihat data sisi klien daripada aplikasi anda mengalir ke New Relic.

Menghantar maklumat ralat terperinci kepada New Relic

Untuk menangkap maklumat ralat terperinci dalam aplikasi Next.js anda, anda perlu mengendalikan kedua-dua ralat sisi klien dan sisi pelayan.

Kesilapan pihak pelanggan

Untuk ralat pihak pelanggan, anda boleh menggunakan fail error.ts(.js) untuk menangkap dan menghantar butiran ralat ke New Relic. Di bawah ialah contoh cara ini boleh dilaksanakan:

"use client";

import React, { useEffect } from "react";

const Error = ({ error }) => {
  useEffect(() => {
    if (window.newrelic) {
      window.newrelic.noticeError(error);
    }
  }, [error]);

  return <div>Something went wrong</div>;
};

export default Error;

In this example, the useEffect hook is used to call window.newrelic.noticeError whenever an error occurs. This sends the error details to New Relic for further analysis.

error.js(.ts) file defines an error UI boundary for a route segment. To handle errors in root layout, use global-error.js(.ts) and place it in the root app directory.

For more information on error handling in Next.js, refer to the Next.js documentation.

Server-side errors

For errors coming from the backend, the @newrelic/next module handles them out of the box. You don't need to add any additional code for server-side error tracking; the module will automatically capture and report these errors to New Relic.

This ensures that both client-side and server-side errors are effectively monitored and reported to New Relic, providing comprehensive error tracking for your Next.js application.

Next steps

You can find all the code samples in this blog post in the newrelic-node-examples GitHub repository. You can give us any feedback in the GitHub repository issues section.
Check out our Next.js integration page on GitHub.
Sign up for a free New Relic account. Your free account includes 100 GB/month of free data ingest, one free full-access user, and unlimited free basic users.

Atas ialah kandungan terperinci Cara Memantau Aplikasi Penghala Apl Next.js dengan Relik Baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!