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

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

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

عند حدوث خطأ في وقت التشغيل خلال مرحلة تطوير تطبيق 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.