לדבג את הדברים האלה

מתחילים חושבים שמפתחים מנוסים לא עושים טעויות.

האמת היא אחרת.

מפתחים מנוסים פשוט מוצאים ומתקנים טעויות מהר יותר.

לאחרונה בניתי אפליקציית ניהול פרויקטים full-stack באמצעות React, Zustand, Express, Prisma ו-PostgreSQL. נתקלתי בעשרות באגים קטנים. הבאגים האלה לימדו אותי איך אפליקציות frontend מודרניות עובדות.

הנה השיעורים שלמדתי:

  • React useEffect ו-Async אי אפשר להעביר פונקציית async ישירות לתוך useEffect. React מצפה לפונקציית cleanup או לכלום. פונקציית async מחזירה Promise, מה שמפר את הכלל הזה. במקום זאת, השתמשו בפונקציה בתוך ה-effect.

  • הפונקציה הנשכחת פעם כתבתי פונקציית async בתוך useEffect אבל מעולם לא קראתי לה בפועל. הקומפוננטה עלתה (mounted), אבל שום דבר לא קרה. לפעמים באגים הם פשוט קריאות לפונקציות שחסרות.

  • מבנה הנתונים של Axios Axios מחזירה אובייקט. הנתונים שלכם נמצאים בתוך response.data. אם תנסו לשמור את כל ה-response בתוך ה-state שלכם, האפליקציה שלכם תיכשל.

  • כפילות ב-URL ל-Axios instance שלי היה base URL. הוספתי שוב את ה-API prefix בבקשות שלי. זה יצר נתיבים כפולים כמו /api/api/projects. תמיד בדקו את האבסטרקציות שלכם.

  • שגיאות ניווט הקומפוננטה Navigate עובדת רק בזמן ה-rendering. אם אתם רוצים להעביר משתמש לאחר לחיצה, השתמשו ב-useNavigate hook במקום.

  • Backend Contracts ה-backend שלי שלח property בשם accessToken. ה-frontend שלי חיפש property בשם token. מכיוון שהשמות לא תאמו, ה-auth state שלי נשאר undefined. ה-frontend וה-backend חייבים תמיד להשתמש באותם שמות.

  • בעיות תזמון האפליקציה שלי ניסתה למשוך התראות לפני שהמשתמש התחבר. זה גרם לשגיאת 401. התיקון לא היה לבדוק אם יש התראות, אלא לבדוק את ה-authentication לפני ביצוע הבקשה.

השיעור הכי גדול היה לגבי זרימת העבודה (workflow) שלי. תפסיקו לנחש.

השתמשו בתהליך הזה במקום:

  • בדקו את ה-browser console.
  • בדקו את לשונית ה-Network.
  • בדקו את ה-API response.
  • אשרו את ה-backend contract.
  • בדקו את ה-state שלכם.
  • עקבו אחר הנתונים מהדאטה-בייס ועד ל-UI.

פיתוח תוכנה הוא לא על הקלדה מהירה. זה על הבנה של איך נתונים זורמים. מדריכים (Tutorials) מראים לכם את הנתיב הקל. פרויקטים מלמדים אתכם את הנתיב האמיתי.

בנו משהו אמיתי. הבאגים ילמדו אתכם יותר מכל מדריך.

מקור: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5