خطایابی


مهارت‌های لازم:

  • React
  • Error Handling in React 16

ری‌اکت ۱۶ یک استراتژی جدید را برای مواجهه با خطاهایی که ممکن است رخ بدهد، معرفی کرده است.

با استفاده از این استراتژی‌ می‌توان از موقعیت‌هایی که خطایی در داخل یک فرایند رندر کردن باعث بروز یک State غیر معتبر و در نتیجه رفتار تعریف نشده و خطاهای گیج کننده می‌شود جلوگیری کرد.

توضیح تصویر برای مطالعه بیشتر به این‌جا مراجعه کنید.

در این سؤال از شما می‌خواهیم کد پروژه را به گونه‌ای تغییر دهید که در صورت رخ دادن خطا، اپلیکیشن به کار خود ادامه دهد.

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است:

errors-boundary
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── __tests__
│   │   └── AppSample.test.js
│   ├── App.css
│   ├── App.js
│   ├── Error.js
│   ├── ErrorBoundary.js
│   ├── Form.js
│   ├── index.css
│   ├── index.js
│   └── serviceWorker.js
├── package.json
├── pnpm-lock.yaml
Plain text
راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • در پوشه‌ی errors-boundary ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
  • در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
  • پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات🔗

ساختار state فایل App.js به صورت زیر است

state: {
    person: {
        year : ''
    },
    error:''
}
JavaScript

در صورت وارد کردن مقدار در input، مقدار آن در state.person.year ذخیره می‌شود. در صورت وارد کردن مقدار غیر عددی person، خطایی اتفاق می افتد ولی برنامه به کار خود ادامه می‌دهد و محتویات فایل Error.js را نمایش می‌دهد. error مورد نظر باید در state.error ذخیره شود؛ هم‌چنین در صورت کلیک بر روی دکمه "بارگذاری مجدد" برنامه باید به حالت اولیه خود برگردد.

نکات🔗

  • شما تنها مجاز به اعمال تغییر در فایل‌های App.js و ErrorBoundary.js هستید.
  • تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
  • پس از اعمال تغییرات، پروژه را ZIP کرده و ارسال کنید. دقت کنید که فقط می‌توانید فایل‌های بالا را تغییر دهید.