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

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

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

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