عیب‌یابی این مسائل

مبتدی‌ها فکر می‌کنند توسعه‌دهندگان باسابقه اشتباه نمی‌کنند.

واقعیت متفاوت است.

توسعه‌دهندگان باسابقه فقط اشتباهات را سریع‌تر پیدا و اصلاح می‌کنند.

من اخیراً یک اپلیکیشن مدیریت پروژه فول‌استک با استفاده از React، Zustand، Express، Prisma و PostgreSQL ساختم. با ده‌ها باگ کوچک روبرو شدم. این باگ‌ها به من یاد دادند که اپلیکیشن‌های مدرن فرانت‌اند چگونه کار می‌کنند.

درس‌هایی که آموختم این‌ها هستند:

  • React useEffect و Async شما نمی‌توانید یک تابع async را مستقیماً به useEffect پاس بدهید. React انتظار یک تابع cleanup یا هیچ‌چیز را دارد. یک تابع async یک Promise برمی‌گرداند که این قانون را نقض می‌کند. در عوض، از یک تابع در داخل effect استفاده کنید.

  • تابع فراموش‌شده یک بار یک تابع async را داخل یک useEffect نوشتم اما هرگز آن را فراخوانی نکردم. کامپوننت mount شد، اما هیچ اتفاقی نیفتاد. گاهی اوقات باگ‌ها فقط همان فراخوانی‌های فراموش‌شده‌ی توابع هستند.

  • ساختار داده‌ی Axios Axios یک شیء (object) برمی‌گرداند. داده‌های شما داخل response.data قرار دارند. اگر سعی کنید کل response را در state خود ذخیره کنید، اپلیکیشن شما با خطا مواجه خواهد شد.

  • تکرار URL نمونه‌ی (instance) Axios من یک base URL داشت. من دوباره پیشوند API را در درخواست‌هایم اضافه کردم. این کار باعث ایجاد مسیرهای تکراری مثل /api/api/projects شد. همیشه انتزاع‌ها (abstractions) خود را بررسی کنید.

  • خطاهای ناوبری (Navigation) کامپوننت Navigate فقط در حین رندرینگ کار می‌کند. اگر می‌خواهید کاربر را بعد از یک کلیک به جای دیگری هدایت کنید، به جای آن از هوک useNavigate استفاده کنید.

  • قراردادهای بک‌اند (Backend Contracts) بک‌اند من ویژگی‌ای به نام accessToken می‌فرستاد. فرانت‌اند من به دنبال ویژگی‌ای به نام token می‌گشت. چون نام‌ها مطابقت نداشتند، وضعیت احراز هویت (auth state) من undefined باقی ماند. فرانت‌اند و بک‌اند همیشه باید از نام‌های یکسانی استفاده کنند.

  • مسائل زمان‌بندی (Timing Issues) اپلیکیشن من سعی کرد قبل از اینکه کاربر وارد شود، اعلان‌ها (notifications) را دریافت کند. این باعث خطای 401 شد. راه حل این نبود که اعلان‌ها را چک کنم، بلکه این بود که قبل از ارسال درخواست، وضعیت احراز هویت را بررسی کنم.

بزرگترین درس درباره گردش کار (workflow) من بود. حدس زدن را متوقف کنید.

به جای آن از این فرآیند استفاده کنید:

  • کنسول مرورگر را چک کنید.
  • تب Network را چک کنید.
  • پاسخ API را بررسی کنید.
  • قرارداد بک‌اند را تأیید کنید.
  • state خود را بررسی کنید.
  • مسیر داده‌ها را از دیتابیس تا UI دنبال کنید.

نرم‌افزار نوشتن به معنای سریع تایپ کردن نیست. بلکه به معنای درک چگونگی حرکت داده‌هاست. آموزش‌ها مسیر آسان را به شما نشان می‌دهند. پروژه‌ها مسیر واقعی را به شما می‌آموزند.

یک چیز واقعی بسازید. باگ‌ها بیش از هر آموزشی به شما خواهند آموخت.

Source: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5