Chaos Frontend¶
Les 4 anomalies frontend s'exécutent dans le navigateur de l'apprenant, pas dans le container Nginx. Nginx sert uniquement les fichiers statiques.
Où s'exécute le chaos ?
Le chaos frontend tourne dans le moteur JavaScript du navigateur (V8 sur Chrome).
Le container perfshop-frontend restera toujours à ~0% CPU — c'est normal.
Les métriques à observer sont dans la section Navigateur client du dashboard.
1. CPU Burn 🔥¶
Deux niveaux simultanés :
Web Worker (thread OS réel)¶
// fixedRate = 100ms — même pattern que CpuChaosScheduler.java
// iterations = intensity × 3200
timer = setInterval(runBurn, 100);
Thread principal (Long Tasks + FPS)¶
// 150ms de blocage toutes les 100ms à 100%
const blockMs = Math.floor(pct * 150);
const repeatMs = 100;
PerformanceObserver.
Métriques impactées :
| Métrique | Nominal | À 50% | À 100% |
|---|---|---|---|
| FPS | ~144 | ~40 | ~10 |
| Long Tasks/s | 0 | ~7 | ~15 |
| CPU Worker | OFF | ON | ON |
2. Memory Leak 💾¶
Accumulation d'objets JavaScript en mémoire avec deux mécanismes :
- Objets simples : 10 000 objets/s à 100%, plafond 800 Mo
- Event listeners orphelins : éléments DOM détachés avec closures volumineuses, jamais collectés par le GC
Métriques impactées :
- perfshop_client_heap_used_mb → montée continue (visible en ~1-2 min à 100%)
3. DOM Flood 🌊¶
Création et destruction rapides de 500 noeuds DOM avec des getBoundingClientRect()
intercalés pour forcer des reflows synchrones — l'opération la plus coûteuse
pour le moteur de rendu du navigateur.
Métriques impactées :
- perfshop_client_dom_node_count → oscillations rapides (+500 noeuds)
- perfshop_client_long_tasks_per_sec → monte (reflows = Long Tasks)
- FPS → peut chuter selon la puissance de la machine
4. Fetch Flood 📡¶
Lance jusqu'à 50 requêtes GET par seconde vers l'API backend.
Endpoints en rotation : /api/products?size=20, ?page=1, ?page=2, ?page=3.
Important : pendingFetches mesure les req/s lancées, pas les requêtes
simultanées en vol. Si le backend répond en <5ms, il n'y a jamais plus d'1 requête
simultanée — mais bien 50 req/s effectives.
Métriques impactées :
| Métrique | À 100% |
|---|---|
perfshop_client_fetch_req_per_sec |
~50 |
docker_container_net_tx_bytes{container="perfshop-frontend"} |
monte |
http_server_requests_seconds_count{uri="/api/products"} |
monte |