Initial commit
This commit is contained in:
300
DEBUG.md
Normal file
300
DEBUG.md
Normal file
@@ -0,0 +1,300 @@
|
||||
# 🔍 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 :**
|
||||
|
||||
```bash
|
||||
# 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 :**
|
||||
```bash
|
||||
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 :**
|
||||
```javascript
|
||||
// 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
|
||||
|
||||
```bash
|
||||
# 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 :
|
||||
```javascript
|
||||
// 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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
// 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
|
||||
```bash
|
||||
cat /tmp/fastapi.log
|
||||
```
|
||||
|
||||
### 3. État du système
|
||||
```bash
|
||||
# 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 ! 🎉**
|
||||
Reference in New Issue
Block a user