Next.js هو إطار عمل جافا سكريبت قوي يوفر سرعة وأداء محسنين لكل من التطوير ووقت التشغيل. مع إصدار Next.js 13، أصبح جهاز توجيه التطبيقات هو الطريقة الموصى بها للتعامل مع التوجيه في تطبيقات Next.js. يستفيد هذا الموجه الجديد من أحدث ميزات React، مثل مكونات الخادم والبث، لتقديم نهج أكثر حداثة وكفاءة لبناء تطبيقات الويب.

في منشور المدونة هذا، ستتعلم كيفية إعداد مراقبة أداء التطبيق من جانب الخادم ومراقبة المتصفح للواجهة الأمامية باستخدام جهاز توجيه التطبيقات الجديد، مما يمنحك إمكانية المراقبة الكاملة في تطبيق Next.js الخاص بك. للبدء، ستحتاج إلى حساب New Relic ومفتاح الترخيص، وكلاهما متاح مجانًا.

تثبيت الوكيل والبرمجيات الوسيطة

قم بتشغيل الأمر التالي في مشروع Next.js الخاص بك لتثبيت وكيل New Relic Node.js APM والبرنامج الوسيط New Relic لـ Next.js.

npm install newrelic @newrelic/next

بعد اكتمال الأمر بنجاح، سترى التبعيات المضمنة في ملف package.json الخاص بك.

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

توفر الحزمة @newrelic/next أدوات رسمية لمراقبة New Relic لتطبيقات Next.js. وهو يركز على العرض من جانب الخادم، والبرمجيات الوسيطة، وتسمية المعاملات لكل من طلبات الصفحة والخادم، مما يضمن إمكانية المراقبة الشاملة للأنشطة من جانب الخادم.

يتم تثبيت هذه الحزمة بشكل منفصل ولكنها تتكامل بسلاسة مع وكيل New Relic Node.js، مما يوفر جميع إمكانات الوكيل لتحسين مراقبة الأداء وتتبع الأخطاء في تطبيقات Next.js.

على الرغم من أنه لا يغطي الإجراءات من جانب العميل، يمكنك إدخال وكيل متصفح New Relic للقياس عن بعد من جانب العميل (المزيد حول ذلك لاحقًا في منشور المدونة هذا).

إعدادات

لاستخدام تطبيق Next.js بشكل فعال باستخدام New Relic، تحتاج إلى تعديل ملف next.config.js. يضمن هذا التكوين عدم تشويه الوحدات التي يدعمها New Relic بواسطة حزمة الويب، كما أنه يقوم بإضفاء الطابع الخارجي على تلك الوحدات.

قم بإنشاء أو تحديث ملف next.config.js في جذر مشروعك بالمحتوى التالي:

'use strict'

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

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

بعد ذلك، قم بتعديل برنامج التطوير الخاص بك وابدأ البرامج النصية npm عن طريق تعديل قسم البرامج النصية في ملف package.json. اسمح لتطبيقك بالعمل باستخدام خيار Node -r، والذي سيقوم بتحميل @newrelic/next middleware مسبقًا.

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

قبل تشغيل التطبيق الخاص بك، أضف ملف تكوين وكيل newrelic.js AMP إلى الدليل الجذر لمشروعك. لمزيد من المعلومات، راجع مثال ملف التكوين لتطبيق Next.js الخاص بك.

بالإضافة إلى ذلك، استخدم NEW_RELIC_APP_NAME وNEW_RELIC_LICENSE_KEY في ملف .env الخاص بك كما هو موضح في مثال ملف .env لتطبيقك.

عرض بيانات الأداء في New Relic

قم بتشغيل التطبيق الخاص بك وانتقل إلى صفحة APM في New Relic. سترى البيانات من جانب الخادم الخاصة بتطبيقك تتدفق إلى New Relic.

إمكانية ملاحظة الواجهة الأمامية

لإدخال وكيل المتصفح عند استخدام جهاز توجيه التطبيقات، سنقوم بتحرير ملف 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

إليك خطوات هذه العملية:

1. قم بتثبيت حزمة newrelic npm إذا لم تكن قد قمت بذلك بالفعل باستخدام الأمر npm install newrelic @newrelic/next.

2. أضف طريقة newrelic.getBrowserTimingHeader.

   1. تمرير hasToRemoveScriptWrapper: صحيح كوسيطة إلى newrelic.getBrowserTimingHeader بحيث يتم إرجاع البرنامج النصي للمتصفح بدون غلاف
   2. تمريرallowTransactionlessInjection: صحيح كوسيطة لnewrelic.GetBrowserTimingHeader للسماح بحقن وكيل المتصفح عندما لا يكون في معاملة.

3. في طريقة العرض، أدخل البرنامج النصي لوكيل New Relic Browser في نهاية

   من المستند.

4. يجب أن يكون ملف Layout.js(.ts) موجودًا في جذر دليل التطبيق الخاص بمشروعك.

للحصول على مثال لملف Layout.js(.ts)، قم بزيارة الرابط التالي.

عرض بيانات المتصفح في New Relic

ابدأ التطبيق ثم انتقل إلى صفحة مراقبة المتصفح في New Relic لرؤية البيانات من جانب العميل من تطبيقك تتدفق إلى New Relic.

إرسال معلومات الخطأ التفصيلية إلى New Relic

للحصول على معلومات تفصيلية عن الأخطاء في تطبيق Next.js، تحتاج إلى معالجة الأخطاء من جانب العميل والخادم.

أخطاء من جانب العميل

بالنسبة للأخطاء من جانب العميل، يمكنك استخدام ملف error.ts(.js) لالتقاط تفاصيل الخطأ وإرسالها إلى New Relic. فيما يلي مثال لكيفية تنفيذ ذلك:

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

في هذا المثال، يتم استخدام الخطاف useEffect لاستدعاء window.newrelic.noticeError عند حدوث خطأ. يؤدي هذا إلى إرسال تفاصيل الخطأ إلى New Relic لمزيد من التحليل.

error.js(.ts) حدود واجهة المستخدم الخاصة بالخطأ لمقطع المسار. لمعالجة الأخطاء في تخطيط الجذر، استخدم global-error.js(.ts) وضعه في دليل التطبيق الجذر.

لمزيد من المعلومات حول معالجة الأخطاء في Next.js، راجع وثائق Next.js.

أخطاء من جانب الخادم

بالنسبة للأخطاء القادمة من الواجهة الخلفية، فإن الوحدة @newrelic/next تعالجها خارج الصندوق. لا تحتاج إلى إضافة أي تعليمات برمجية إضافية لتتبع الأخطاء من جانب الخادم؛ ستقوم الوحدة تلقائيًا بالتقاط هذه الأخطاء والإبلاغ عنها إلى New Relic.

يضمن هذا مراقبة الأخطاء من جانب العميل والخادم بشكل فعال والإبلاغ عنها إلى New Relic، مما يوفر تتبعًا شاملاً للأخطاء لتطبيق Next.js الخاص بك.

الخطوات التالية

يمكنك العثور على جميع نماذج التعليمات البرمجية في منشور المدونة هذا في مستودع GitHub لأمثلة العقدة الجديدة. يمكنك أن تقدم لنا أي تعليقات في قسم مشكلات مستودع GitHub.
قم بالاطلاع على صفحة تكامل Next.js الخاصة بنا على GitHub.
قم بالتسجيل للحصول على حساب New Relic مجاني. يشتمل حسابك المجاني على 100 جيجابايت/شهرًا من استيعاب البيانات مجانًا، ومستخدم واحد مجاني كامل الوصول، وعدد غير محدود من المستخدمين الأساسيين مجانًا.