my-ia/DEBUG.md

🔍 Guide de Debug - AI Code Assistant

🛠️ Outils de debug intégrés

1. Console du navigateur (F12)

Ouvrir la console :

• Windows/Linux : F12 ou Ctrl+Shift+I
• Mac : Cmd+Option+I

Dans l'onglet Console, tu verras :

Messages normaux ✅

🚀 Initialisation de l'application...
📡 Réponse /models: 200
✅ Modèles chargés: 2
🔌 Tentative de connexion WebSocket à: ws://localhost:9001/ws/chat
✅ WebSocket connecté
📨 Message WebSocket: stream
✅ Réponse complète reçue

Messages d'erreur ❌

❌ Erreur chargement modèles: TypeError...
❌ Erreur WebSocket: ...
🔴 Erreur React: ...
❌ Erreur rendu message: ...

2. Bandeau d'erreur dans l'UI

Si une erreur se produit, un bandeau rouge apparaît en haut avec :

• Le message d'erreur
• Un bouton ✕ pour fermer

3. Message backend non accessible

Si le backend ne répond pas, un message s'affiche au centre :

• Instructions pour démarrer le backend
• Lien vers les logs (F12)

🐛 Problèmes courants et solutions

Problème 1 : UI plante quand l'IA génère du code

Symptômes :

• Page devient blanche/bleue
• Erreur dans la console : Cannot read properties of undefined

Causes possibles :

1. Caractère spécial non échappé dans le code
2. Balise HTML mal fermée
3. Erreur Prism.js

Solution : ✅ Corrigé dans cette version !

• Échappement HTML complet
• Try/catch autour du rendu
• Message d'erreur au lieu de crash

Si ça arrive quand même :

1. Ouvrir F12 → Console
2. Copier l'erreur exacte
3. Rafraîchir la page (Ctrl+F5)
4. Relancer

Problème 2 : WebSocket ne connecte pas

Dans la console :

❌ Erreur WebSocket: ...
🔌 WebSocket déconnecté, reconnexion dans 3s...

Vérifications :

# 1. Le backend tourne-t-il ?
curl http://localhost:9001/health

# 2. Voir les logs backend
cat /tmp/fastapi.log

# 3. Processus Python actif ?
ps aux | grep "python main.py"

Solution :

cd backend
. venv/bin/activate
python main.py

Tu dois voir :

INFO:     Uvicorn running on http://0.0.0.0:9001

Problème 3 : Code ne s'affiche pas correctement

Symptômes :

• Blocs de code sans couleur
• Caractères bizarres (< >)

Dans la console, chercher :

❌ Erreur Prism.js: ...

Solution :

1. Rafraîchir la page (Ctrl+F5)
2. Vider le cache navigateur
3. Vérifier connexion internet (Prism.js vient du CDN)

Problème 4 : Boutons Copier/Tester ne marchent pas

Dans la console :

❌ Erreur copyCode: ...
Élément code introuvable: code-X-Y

Solution : ✅ Corrigé ! Les boutons ont maintenant :

• Vérification que l'élément existe
• Try/catch pour éviter les crashes
• Logs détaillés

Test manuel :

// Dans la console (F12)
window.copyCode('code-0-0')
// Doit afficher une erreur claire si l'ID n'existe pas

Problème 5 : Messages ne s'affichent pas

Dans la console :

❌ Erreur rendu message: ...

Ce que tu verras dans l'UI :

• Avatar ⚠️
• "Erreur d'affichage du message"
• Début du message brut

Solution :

1. Noter l'erreur exacte dans la console
2. Copier le message qui cause problème
3. Relancer le chat

📊 Workflow de debug complet

Étape 1 : Ouvrir la console (F12)

Avant même de tester, ouvre la console pour voir les logs en temps réel.

Étape 2 : Envoyer un message test simple

Écris une fonction Python qui dit bonjour

Dans la console, tu devrais voir :

📨 Message WebSocket: stream
📨 Message WebSocket: stream
...
✅ Réponse complète reçue

Étape 3 : Si erreur, identifier le type

Type 1 : Backend (réseau)

❌ Erreur WebSocket: ...
ou
Failed to load resource: net::ERR_CONNECTION_REFUSED

→ Le backend n'est pas démarré

Type 2 : Rendu (React)

🔴 Erreur React: ...
ou
❌ Erreur rendu message: ...

→ Problème d'affichage du contenu

Type 3 : Fonctions (boutons)

❌ Erreur copyCode: ...

→ Problème avec les boutons d'action

Étape 4 : Copier les logs

# Dans la console (F12), clic droit → Save as...
# Ou copier manuellement les erreurs

🔬 Tests avancés

Test 1 : Vérifier que tout est chargé

Dans la console :

// Vérifier React
console.log('React:', typeof React);  // doit afficher "object"

// Vérifier Prism
console.log('Prism:', typeof Prism);  // doit afficher "object"

// Vérifier l'API
fetch('http://localhost:9001/health')
  .then(r => r.json())
  .then(d => console.log('Backend:', d));

Test 2 : Vérifier WebSocket manuellement

const ws = new WebSocket('ws://localhost:9001/ws/chat');
ws.onopen = () => console.log('WS OK');
ws.onerror = (e) => console.error('WS Error:', e);

Test 3 : Tester le rendu d'un message

// Dans la console
const testMsg = {
  role: 'assistant',
  content: 'Test ```python\nprint("hello")\n```'
};

// Voir si ça plante
console.log('Test:', testMsg);

📝 Logs à envoyer si besoin d'aide

Si tu as un problème, copie et envoie :

1. Logs console navigateur

[Tous les messages rouges ❌ et 🔴]

2. Logs backend

cat /tmp/fastapi.log

3. État du système

# Processus actifs
ps aux | grep -E "python|ollama"

# Ports utilisés
netstat -tlnp | grep -E "9000|9001"

# Version Python
python3 --version

🎯 Checklist avant de demander de l'aide

• Console ouverte (F12) pour voir les logs
• Backend lancé et accessible (curl http://localhost:9001/health)
• WebSocket connecté (point vert en bas à droite)
• Copié les erreurs exactes de la console
• Testé avec un message simple d'abord
• Rafraîchi la page (Ctrl+F5)
• Vidé le cache si nécessaire

💡 Astuces

1. Logs en temps réel : Laisse toujours F12 ouvert quand tu utilises l'app
2. Preserve log : Dans F12, coche "Preserve log" pour garder les logs même après refresh
3. Filtre console : Tu peux filtrer par "Error" ou "Warning" dans la console
4. Network tab : Onglet Network dans F12 pour voir les requêtes HTTP/WebSocket
5. React DevTools : Installe React DevTools pour debug React spécifiquement

---

La nouvelle version a : ✅ Échappement HTML complet ✅ Try/catch partout ✅ Logs détaillés avec émojis ✅ Messages d'erreur clairs ✅ Bandeau d'erreur visible ✅ Pas de crash, juste des erreurs visibles

Plus d'écran bleu ! 🎉