Déboguer le code généré par l'IA 🐛

Pourquoi le code de l'IA a des bugs ?

L'IA génère du code statistiquement probable. Elle ne l'exécute pas, ne le teste pas, et ne connaît pas toujours votre contexte exact. Les bugs sont normaux et inévitables.

---

Le flux de debugging

1. Lire l'erreur
       ↓
2. Identifier la source
       ↓
3. Isoler le problème
       ↓
4. Comprendre la cause
       ↓
5. Écrire un prompt de correction
       ↓
6. Vérifier la correction

---

Étape 1 : Lire l'erreur

Ne résumez jamais une erreur. Copiez-la intégralement.

# Mauvais :
"Il y a une erreur dans mon code"

# Bon :
"TypeError: Cannot read properties of undefined (reading 'map')
   at UserList (src/components/UserList.tsx:15:23)
   at renderWithHooks (node_modules/react-dom/...)"

---

Étape 2 : Identifier la source

Posez-vous les questions :

• Dans quel fichier ? → UserList.tsx
• À quelle ligne ? → Ligne 15
• Dans quel contexte ? → Pendant le rendu de la liste

---

Étape 3 : Isoler le problème

# Le code problématique :
const UserList = ({ users }) => {
  return users.map(user => ...);  // ← ICI
};

# Le problème :
users est undefined au moment du rendu

---

Étape 4 : Comprendre la cause

Le code généré suppose que users est toujours un tableau. Mais pendant le chargement initial, c'est undefined.

---

Étape 5 : Prompt de correction

Bon prompt :

Dans le composant UserList (src/components/UserList.tsx),
j'obtiens "TypeError: Cannot read properties of undefined (reading 'map')"
à la ligne 15.

Le problème : users est undefined pendant le chargement initial.
Le state est initialized avec useState([]) mais le fetch est asynchrone.

Corrige en ajoutant un état de chargement et une vérification
avant le .map().

---

Étape 6 : Vérifier la correction

// Après correction
const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Chargement...</div>;

  return users.map(user => ...);  // ← Maintenant sûr
};

---

Les erreurs courantes

---

Utiliser l'IA pour debugger

Prompt de debug efficace :

[Décrire l'erreur exacte]
[Montrer le code problématique]
[Décrire le contexte : que faisiez-vous ?]
[Décrire le résultat attendu vs obtenu]

Exemple :

Quand je clique sur "Enregistrer" dans le formulaire d'inscription,
j'obtiens l'erreur 422 avec le message "The email has already been taken".

Mais je viens de créer un compte avec cet email. Le problème est que
le frontend envoie deux fois la requête (double clic ?).

Code : src/components/RegisterForm.tsx ligne 23
Résultat attendu : Un seul compte créé
Résultat obtenu : Erreur 422

---

Exercices 🎯

1. Debug : Corrigez le bug "Cannot read property 'map' of undefined" dans un composant.
2. Prompt : Rédigez un prompt de correction pour une erreur CORS.
3. Isolation : Créez un composant test isolé pour reproduire un bug.

Prochaine leçon : Git et organisation du projet.