Déboguer tout cela

Les débutants pensent que les développeurs expérimentés ne font pas d'erreurs.

La réalité est tout autre.

Les développeurs expérimentés trouvent et corrigent simplement les erreurs plus rapidement.

J'ai récemment construit une application de gestion de projet full-stack en utilisant React, Zustand, Express, Prisma et PostgreSQL. J'ai rencontré des dizaines de petits bugs. Ces bugs m'ont appris comment fonctionnent les applications frontend modernes.

Voici les leçons que j'ai apprises :

  • React useEffect et Async Vous ne pouvez pas passer une fonction async directement dans useEffect. React attend une fonction de nettoyage (cleanup function) ou rien du tout. Une fonction async retourne une Promise, ce qui enfreint cette règle. Utilisez plutôt une fonction à l'intérieur de l'effet.

  • La fonction oubliée J'ai déjà écrit une fonction async à l'intérieur d'un useEffect sans jamais l'appeler réellement. Le composant s'est monté, mais rien ne s'est passé. Parfois, les bugs ne sont que des appels de fonctions manquants.

  • Structure des données Axios Axios retourne un objet. Vos données se trouvent dans response.data. Si vous essayez d'enregistrer la réponse entière dans votre état (state), votre application échouera.

  • Duplication d'URL Mon instance Axios avait une URL de base. J'ai ajouté à nouveau le préfixe de l'API dans mes requêtes. Cela a créé des chemins doubles comme /api/api/projects. Vérifiez toujours vos abstractions.

  • Erreurs de navigation Le composant Navigate ne fonctionne que pendant le rendu (rendering). Si vous voulez rediriger un utilisateur après un clic, utilisez plutôt le hook useNavigate.

  • Contrats Backend Mon backend envoyait une propriété nommée accessToken. Mon frontend cherchait une propriété nommée token. Comme les noms ne correspondaient pas, mon état d'authentification est resté undefined. Le frontend et le backend doivent toujours utiliser les mêmes noms.

  • Problèmes de timing Mon application a tenté de récupérer les notifications avant que l'utilisateur ne soit connecté. Cela a provoqué une erreur 401. La solution n'était pas de vérifier les notifications, mais de vérifier l'authentification avant d'effectuer la requête.

La plus grande leçon concernait mon flux de travail (workflow). Arrêtez de deviner.

Utilisez plutôt ce processus :

  • Vérifiez la console du navigateur.
  • Vérifiez l'onglet Network.
  • Inspectez la réponse de l'API.
  • Vérifiez le contrat backend.
  • Inspectez votre état (state).
  • Suivez le cheminement des données, de la base de données jusqu'à l'interface utilisateur (UI).

Le développement logiciel ne consiste pas à taper vite. Il s'agit de comprendre comment les données circulent. Les tutoriels vous montrent le chemin facile. Les projets vous enseignent le vrai chemin.

Construisez quelque chose de réel. Les bugs vous apprendront plus que n'importe quel tutoriel.

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