Ta strategie de debug

L'arbre de competences : ta routine de diagnostic.

7.1La methode LIRE (4 etapes)

Voici ta routine de diagnostic. Memorise l'acronyme LIRE :

Lire le message d'erreur

Premiere ligne = type + message. Trouve TON fichier dans la stack trace. Ne lis pas le reste (c'est du bruit).

Isoler la zone

Va a la ligne indiquee. Regarde la variable en question. Mets un console.log ou un debugger juste avant.

Raisonner (ou demander a l'IA)

Pourquoi cette valeur est-elle undefined/null/mauvais type ? Remonte la chaine : d'ou vient cette donnee ?

Experimenter et verifier

Applique le fix. Verifie que ca marche. Supprime tes console.log. Commite.

7.2L'arbre de decision du debug

Quand tu as un bug, suis cet arbre de decision pour trouver la bonne branche :

Arbre de decision du debugbash

Bug detecte
|
+-- Erreur dans la CONSOLE du navigateur ?
|   |
|   +-- TypeError / ReferenceError
|   |   -> Chapitre 3 : bestiaire JS (optional chaining, imports...)
|   |
|   +-- Hydration error
|   |   -> Chapitre 5 : SSR/client mismatch (useEffect, Date...)
|   |
|   +-- Objects are not valid as React child
|       -> Chapitre 3 : afficher une propriete, pas l'objet
|
+-- Erreur dans le TERMINAL ?
|   |
|   +-- Build error / Type error
|   |   -> Chapitre 5 : verifier types TypeScript
|   |
|   +-- Module not found
|   |   -> Verifier chemin import, npm install
|   |
|   +-- window is not defined
|       -> Chapitre 5 : useEffect ou typeof window guard
|
+-- PAS d'erreur mais ca ne marche pas ?
|   |
|   +-- Onglet Network : requete en rouge ?
|   |   |
|   |   +-- 404 -> URL incorrecte
|   |   +-- 403 -> Pas autorise (auth manquante)
|   |   +-- 500 -> Bug cote serveur
|   |   +-- CORS -> Chapitre 6
|   |
|   +-- Rien dans Network ?
|       -> Le fetch n'est jamais appele. Verifie useEffect/conditions.
|
+-- Ca marche en dev mais PAS en prod ?
    -> Verifier les variables d'environnement (NEXT_PUBLIC_)
    -> Verifier les differences SSR vs client

7.3La regle des 15 minutes

Applique cette regle d'or : si tu es bloque sur un bug depuis plus de 15 minutes, change d'approche. Le piege c'est de rester dans la meme impasse en esperant que ca va marcher.

0 - 5 minutes

- Applique la methode LIRE
- Lis le message, isole, raisonne
- Verifie les cas evidents

5 - 15 minutes

- Utilise le debugger ou console.log avance
- Cherche l'erreur exacte sur Google/MDN
- Demande a l'IA avec le template complet

15+ minutes

- STOP. Fais une pause (5 min)
- Reformule le probleme pour l'IA
- Essaie le rubber duck (chapitre 4)
- Reviens en arriere (git stash)

30+ minutes

- git stash et repars de zero
- Reviens a la derniere version qui marchait
- Decompose le probleme en plus petit
- Demande a quelqu'un (forum, Discord)

7.4Le journal de bugs

Les meilleurs joueurs gardent un journal de quete. Fais pareil avec tes bugs : chaque bug resolu merite une ligne dans ton journal.

Template : journal de bugs (Notion/Obsidian)markdown

# Journal de bugs

## 2024-03-08 : Hydration error sur UserCard
- **Symptome** : Page crash au chargement
- **Cause** : Date.now() dans le render
- **Fix** : Deplace dans useEffect
- **Le??on** : Jamais de valeurs dynamiques dans le render SSR

## 2024-03-07 : 404 sur l'API /api/users
- **Symptome** : Fetch echoue silencieusement
- **Cause** : NEXT_PUBLIC_API_URL non defini en prod
- **Fix** : Ajoute la variable dans .env.production
- **Le??on** : Toujours verifier les env vars apres deploy