veza/config/incus/REMEDIATION_APPLIED.md

# REMÉDIATION APPLIQUÉE - BARE METAL vs INCUS
**Date:** 2026-01-15
**Objectif:** Corriger l'erreur React.Children et les erreurs 503 intermittentes

---

## ✅ CORRECTIONS APPLIQUÉES

### 1. Stabilisation Réseau Container Web (Correction 503 Intermittent)

**Fichier modifié:** `config/incus/deploy-service-native.sh`

**Améliorations:**
- Script `setup-network.sh` amélioré avec retries (5 tentatives)
- Vérification de connectivité après configuration
- Service systemd `veza-network-setup.service` avec:
  - Dépendances réseau correctes (`After=network-online.target`)
  - Restart automatique en cas d'échec
  - Exécution avant Apache pour garantir l'IP

**Code ajouté:**
```bash
# Script avec retries et vérification
MAX_RETRIES=5
configure_network() {
    # ... configuration avec retries
    # Vérification ping vers gateway
}
```

---

### 2. Désactivation Service Worker (Correction React.Children - P0)

**Fichiers modifiés:**
- `apps/web/src/services/pwa.ts`
- `apps/web/public/sw.js`

**Modifications:**

#### pwa.ts
- Service Worker complètement désactivé dans `registerServiceWorker()`
- Retour immédiat pour éviter toute enregistrement
- Commentaire explicatif sur la raison (cache conflicts)

#### sw.js
- Event `install`: Supprime tous les caches existants immédiatement
- Event `activate`: Supprime TOUS les caches (pas seulement les anciens)
- Prend le contrôle immédiatement avec `clients.claim()`

**Code:**
```typescript
// pwa.ts
private async registerServiceWorker(): Promise<void> {
  // CRITICAL FIX: Disable Service Worker completely
  logger.info('[PWA] Service Worker disabled to prevent cache conflicts');
  return;
}
```

---

### 3. Optimisation Build Vite (Ordre des Chunks)

**Fichier modifié:** `apps/web/vite.config.ts`

**Améliorations:**
- Plugin `fix-react-loading-order` amélioré
- Ajout de `modulepreload` pour `vendor-react-core` dans le HTML
- Garantit que React est chargé avant Zustand

**Code:**
```typescript
{
  name: 'fix-react-loading-order',
  transformIndexHtml(html) {
    // Ajouter modulepreload pour vendor-react-core
    const reactChunkMatch = html.match(/src="([^"]*vendor-react-core[^"]*\.js)"/);
    if (reactChunkMatch) {
      html = html.replace(
        /<script type="module"/,
        `<link rel="modulepreload" href="${reactChunkMatch[1]}" crossorigin>\n    <script type="module"`
      );
    }
    return html;
  }
}
```

---

### 4. Configuration Apache & Cache Busting

**Fichier modifié:** `config/incus/apache/veza-web.conf`

**Ajouts:**
- Headers `no-cache` pour `/js/*.js` (tous les chunks JS)
- Headers `no-cache` pour `/sw.js` (Service Worker)
- Headers `no-cache` pour `/index.html` (références aux chunks)
- Cache JavaScript désactivé dans `mod_expires`

**Code:**
```apache
# CRITICAL FIX: No-cache headers for JS chunks
<LocationMatch "^/js/.*\.js$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</LocationMatch>

# CRITICAL FIX: No-cache for Service Worker
<LocationMatch "^/sw\.js$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</LocationMatch>

# CRITICAL FIX: No-cache for index.html
<LocationMatch "^/index\.html$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</LocationMatch>
```

---

## 🚀 COMMANDES DE REBUILD ET DÉPLOIEMENT

### 1. Build du Frontend
```bash
cd /home/senke/git/talas/veza
./config/incus/build-native.sh web
```

### 2. Déploiement du Frontend
```bash
./config/incus/deploy-service-native.sh web
```

Cette commande va:
- Copier les fichiers build dans le container
- Copier la nouvelle configuration Apache
- Reconfigurer le réseau (IP persistante)
- Redémarrer Apache

### 3. Vérification du Déploiement
```bash
./config/incus/verify-deployment.sh web
```

### 4. Test dans le Navigateur

**URL:** `https://10.10.10.6`

**⚠️ IMPORTANT - Vider le cache avant de tester:**
1. Ouvrir DevTools (F12)
2. Application > Storage > Clear site data
3. Application > Service Workers > Unregister (si présent)
4. Network > Disable cache (pendant les tests)
5. Hard refresh: `Ctrl+Shift+R` (ou `Cmd+Shift+R` sur Mac)

---

## 📊 RÉSULTATS ATTENDUS

### Avant les corrections:
- ❌ Erreur React.Children: `Cannot set properties of undefined (setting 'Children')`
- ⚠️ Frontend 503 intermittent (container perd IP)
- ❌ Application ne se charge pas

### Après les corrections:
- ✅ Pas d'erreur React.Children
- ✅ Frontend accessible (pas de 503)
- ✅ Application se charge correctement
- ✅ Chunks JS toujours à jour (pas de cache)

---

## 🔍 VALIDATION

### Tests à effectuer:

1. **Test réseau:**
   ```bash
   incus exec veza-web -- ip addr show eth0 | grep "10.10.10.5"
   # Doit afficher: inet 10.10.10.5/24
   ```

2. **Test Apache:**
   ```bash
   curl -k -I https://10.10.10.6/ | grep "Cache-Control"
   # Doit afficher: Cache-Control: no-cache, no-store, must-revalidate
   ```

3. **Test JS chunks:**
   ```bash
   curl -k -I https://10.10.10.6/js/vendor-react-core-*.js | grep "Cache-Control"
   # Doit afficher: Cache-Control: no-cache, no-store, must-revalidate
   ```

4. **Test navigateur:**
   - Ouvrir `https://10.10.10.6`
   - Vérifier la console (F12) - pas d'erreur React.Children
   - Vérifier Network tab - chunks JS chargés avec headers no-cache

---

## 📝 NOTES IMPORTANTES

1. **Service Worker:** Complètement désactivé. Si besoin de réactiver plus tard, il faudra:
   - Réactiver dans `pwa.ts`
   - S'assurer que le cache ne sert jamais d'anciens chunks JS
   - Implémenter une stratégie de cache busting robuste

2. **Cache navigateur:** Les headers no-cache forcent le navigateur à toujours récupérer les chunks JS depuis le serveur. Cela garantit que les dernières versions sont toujours utilisées.

3. **Réseau:** Le script de setup réseau avec retries garantit que l'IP est toujours configurée, même après un redémarrage du container.

4. **Ordre de chargement:** Le modulepreload garantit que React est chargé avant Zustand, évitant l'erreur React.Children.

---

**Fin du rapport de remédiation**