Відладка всього цього

Новачки думають, що досвідчені розробники не припускаються помилок.

Насправді все інакше.

Досвідчені розробники просто швидше знаходять і виправляють помилки.

Нещодавно я створив full-stack додаток для управління проєктами, використовуючи React, Zustand, Express, Prisma та PostgreSQL. Я зіткнувся з десятками дрібних багів. Ці баги навчили мене того, як працюють сучасні frontend-додатки.

Ось уроки, які я засвоїв:

  • React useEffect та Async Ви не можете передавати async-функцію безпосередньо в useEffect. React очікує функцію очищення або нічого. Async-функція повертає Promise, що порушує це правило. Замість цього використовуйте функцію всередині ефекту.

  • Забута функція Одного разу я написав async-функцію всередині useEffect, але так і не викликав її. Компонент змонтувався, але нічого не сталося. Іноді баги — це просто пропущені виклики функцій.

  • Структура даних Axios Axios повертає об'єкт. Ваші дані знаходяться всередині response.data. Якщо ви спробуєте зберегти всю відповідь у свій state, ваш додаток не працюватиме.

  • Дублювання URL Мій екземпляр Axios мав base URL. Я знову додав префікс API у своїх запитах. Це призвело до подвійних шляхів, наприклад, /api/api/projects. Завжди перевіряйте свої абстракції.

  • Помилки навігації Компонент Navigate працює лише під час рендерингу. Якщо ви хочете перенаправити користувача після кліку, використовуйте замість цього хук useNavigate.

  • Контракти бекенду Мій бекенд надсилав властивість з назвою accessToken. Мій фронтенд шукав властивість з назвою token. Оскільки назви не збігалися, мій auth state залишався undefined. Фронтенд і бекенд завжди повинні використовувати однакові назви.

  • Проблеми з таймінгом Мій додаток намагався отримати сповіщення до того, як користувач увійшов у систему. Це спричинило помилку 401. Виправлення полягало не в тому, щоб не перевіряти сповіщення, а в тому, щоб перевіряти автентифікацію перед виконанням запиту.

Найбільшим уроком став мій робочий процес. Припиніть гадати.

Замість цього використовуйте такий процес:

  • Перевірте консоль браузера.
  • Перевірте вкладку Network.
  • Перевірте відповідь API.
  • Перевірте контракт бекенду.
  • Перевірте свій state.
  • Простежте шлях даних від бази даних до UI.

Розробка програмного забезпечення — це не про швидке друкування. Це про розуміння того, як рухаються дані. Туторіали показують легкий шлях. Проєкти вчать справжньому шляху.

Створюйте щось реальне. Баги навчать вас більшому, ніж будь-який туторіал.

Джерело: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5