error.js

يحدد ملف error حدود واجهة المستخدم للخطأ لقطاع مسار معين.

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

'use client' // مكونات الخطأ يجب أن تكون مكونات عميل

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // تسجيل الخطأ في خدمة تقارير الأخطاء
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>حدث خطأ ما!</h2>
      <button
        onClick={
          // محاولة الاستعادة عن طريق إعادة عرض القطاع
          () => reset()
        }
      >
        حاول مرة أخرى
      </button>
    </div>
  )
}

'use client' // مكونات الخطأ يجب أن تكون مكونات عميل

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // تسجيل الخطأ في خدمة تقارير الأخطاء
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>حدث خطأ ما!</h2>
      <button
        onClick={
          // محاولة الاستعادة عن طريق إعادة عرض القطاع
          () => reset()
        }
      >
        حاول مرة أخرى
      </button>
    </div>
  )
}

الخصائص

`error`

نسخة من كائن Error يتم تمريرها إلى مكون العميل error.js.

`error.message`

رسالة الخطأ.

بالنسبة للأخطاء الممررة من مكونات العميل، ستكون هذه رسالة الخطأ الأصلية.
بالنسبة للأخطاء الممررة من مكونات الخادم، ستكون هذه رسالة خطأ عامة لتجنب تسريب تفاصيل حساسة. يمكن استخدام errors.digest لمطابقة الخطأ المقابل في سجلات الخادم.

`error.digest`

تجزئة يتم إنشاؤها تلقائيًا للخطأ الذي تم طرحه في مكون الخادم. يمكن استخدامها لمطابقة الخطأ المقابل في سجلات الخادم.

`reset`

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

يمكن استخدامها لدفع المستخدم لمحاولة التعافي من الخطأ.

معلومة مفيدة:

حدود error.js يجب أن تكون مكونات عميل.

في إصدارات الإنتاج، سيتم تجريد الأخطاء الممررة من مكونات الخادم من تفاصيل الخطأ المحددة لتجنب تسريب معلومات حساسة.

حدود error.js لن تتعامل مع الأخطاء المطروحة في مكون layout.js في نفس القطاع لأن حدود الخطأ متداخلة داخل مكون التخطيط هذا.

للتعامل مع الأخطاء لتخطيط معين، ضع ملف error.js في القطاع الأب للتخطيط.

للتعامل مع الأخطاء داخل تخطيط الجذر أو القالب، استخدم نوعًا مختلفًا من error.js يسمى app/global-error.js.

`global-error.js`

للتعامل مع الأخطاء في layout.js الجذر تحديدًا، استخدم نوعًا مختلفًا من error.js يسمى app/global-error.js موجود في دليل الجذر app.

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>حدث خطأ ما!</h2>
        <button onClick={() => reset()}>حاول مرة أخرى</button>
      </body>
    </html>
  )
}

'use client'

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>حدث خطأ ما!</h2>
        <button onClick={() => reset()}>حاول مرة أخرى</button>
      </body>
    </html>
  )
}

معلومة مفيدة:

global-error.js يحل محل layout.js الجذر عند التنشيط ولذلك يجب أن يحدد علامات <html> و <body> الخاصة به.

أثناء تصميم واجهة مستخدم للخطأ، قد تجد أنه من المفيد استخدام أدوات مطوري React لتبديل حدود الخطأ يدويًا.

not-found.js

يتم استخدام ملف not-found لعرض واجهة المستخدم عند استدعاء دالة notFound() داخل قطاع مسار.

سجل الإصدارات

الإصدار	التغييرات
`v13.1.0`	تم تقديم `global-error`.
`v13.0.0`	تم تقديم `error`.

On this page