معالجة الأخطاء

يشرح هذا التوثيق كيفية معالجة أخطاء التطوير وأخطاء جانب الخادم وأخطاء جانب العميل.

معالجة الأخطاء أثناء التطوير

عند حدوث خطأ أثناء وقت التشغيل في مرحلة التطوير لتطبيق Next.js الخاص بك، ستظهر لك نافذة منبثقة. وهي نافذة تغطي صفحة الويب. تكون فقط مرئية عند تشغيل خادم التطوير باستخدام next dev عبر pnpm dev أو npm run dev أو yarn dev أو bun dev ولن تظهر في بيئة الإنتاج. سيؤدي إصلاح الخطأ إلى إغلاق النافذة المنبثقة تلقائيًا.

إليك مثال على النافذة المنبثقة:

معالجة أخطاء الخادم

يوفر Next.js صفحة 500 افتراضية ثابتة لمعالجة الأخطاء التي تحدث في جانب الخادم لتطبيقك. يمكنك أيضًا تخصيص هذه الصفحة عن طريق إنشاء ملف pages/500.js.

وجود صفحة 500 في تطبيقك لا يعرض أخطاء محددة لمستخدم التطبيق.

يمكنك أيضًا استخدام صفحة 404 لمعالجة أخطاء وقت التشغيل المحددة مثل الملف غير موجود.

معالجة أخطاء العميل

توفر حدود الأخطاء (Error Boundaries) في React طريقة أنيقة لمعالجة أخطاء JavaScript في جانب العميل بحيث تستمر الأجزاء الأخرى من التطبيق في العمل. بالإضافة إلى منع تعطل الصفحة، تتيح لك تقديم مكون احتياطي مخصص وحتى تسجيل معلومات الخطأ.

لاستخدام حدود الأخطاء في تطبيق Next.js الخاص بك، يجب إنشاء مكون فئة ErrorBoundary وتغليف الخاصية Component في ملف pages/_app.js. سيكون هذا المكون مسؤولاً عن:

• عرض واجهة احتياطية بعد حدوث خطأ
• توفير طريقة لإعادة تعيين حالة التطبيق
• تسجيل معلومات الخطأ

يمكنك إنشاء مكون فئة ErrorBoundary عن طريق توسيع React.Component. على سبيل المثال:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // تعريف متغير حالة لتتبع وجود خطأ أم لا
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // تحديث الحالة بحيث يعرض العرض التالي الواجهة الاحتياطية

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // يمكنك استخدام خدمة تسجيل الأخطاء الخاصة بك هنا
    console.log({ error, errorInfo })
  }
  render() {
    // التحقق مما إذا كان قد تم طرح خطأ
    if (this.state.hasError) {
      // يمكنك عرض أي واجهة احتياطية مخصصة
      return (
        <div>
          <h2>عذرًا، حدث خطأ!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            المحاولة مرة أخرى؟
          </button>
        </div>
      )
    }

    // إرجاع المكونات الفرعية في حالة عدم وجود خطأ

    return this.props.children
  }
}

export default ErrorBoundary

يتتبع مكون ErrorBoundary حالة hasError. قيمة متغير الحالة هذا هي قيمة منطقية. عندما تكون قيمة hasError true، سيعرض مكون ErrorBoundary واجهة احتياطية. وإلا، سيعرض المكونات الفرعية.

بعد إنشاء مكون ErrorBoundary، قم باستيراده في ملف pages/_app.js لتغليف الخاصية Component في تطبيق Next.js الخاص بك.

// استيراد مكون ErrorBoundary
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // تغليف الخاصية Component بمكون ErrorBoundary
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

يمكنك معرفة المزيد عن حدود الأخطاء (Error Boundaries) في توثيق React.

الإبلاغ عن الأخطاء

لمراقبة أخطاء العميل، استخدم خدمة مثل Sentry أو Bugsnag أو Datadog.