Frontend React

Structure du projet

frontend/src/
├── chaos-agent.js          # Agent chaos — importé dans App.jsx
├── App.jsx                 # Point d'entrée React
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   ├── ProductDetail.jsx
│   ├── Cart.jsx
│   ├── Checkout.jsx
│   └── ...
└── services/
    └── api.js              # Appels API backend

chaos-agent.js — détail technique

L'agent est importé une seule fois dans App.jsx :

import './chaos-agent.js';

Il s'exécute dès le chargement de la page et :

1. Poll /api/chaos/frontend/state toutes les 5s
2. Démarre/arrête les anomalies selon l'état reçu
3. Mesure les métriques navigateur en continu
4. Pousse les métriques vers le monitoring toutes les 2s

Métriques exposées sur window.__chaosMetrics

{
  fps: 144,                // via requestAnimationFrame
  longTasksPerSec: 0,      // via PerformanceObserver('longtask')
  heapUsedMB: 6.8,         // via performance.memory (Chrome)
  heapLimitMB: 4096,       // via performance.memory (Chrome)
  pendingFetches: 0,       // req/s lancées par Fetch Flood
  domNodeCount: 690,       // document.querySelectorAll('*').length
  cpuWorkerActive: false,  // true si Web Worker CPU tourne
  timestamp: 1234567890
}

CPU Burn — deux niveaux

Web Worker (thread OS réel)

// Code embarqué en Blob URL — pas de fichier séparé
const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
_cpuWorker = new Worker(URL.createObjectURL(blob));
_cpuWorker.postMessage({ type: 'setIntensity', value: 100 });

Le Worker exécute une boucle de hashage fixedRate=100ms, intensity×3200 iterations — même pattern que CpuChaosScheduler.java.

Thread principal (Long Tasks + FPS)

// 150ms de blocage toutes les 100ms à 100%
// → Long Tasks/s ~15, FPS chute à 10-15
const blockMs  = Math.floor(pct * 150);
const repeatMs = 100;

Compatibilité

performance.memory (heap JS) est disponible uniquement sur Chrome/Edge. PerformanceObserver('longtask') n'est pas supporté sur Safari. Les autres métriques (FPS, DOM, fetch) fonctionnent sur tous les navigateurs.

Build et déploiement

# Modifier le code source
vi /volume4/docker-speed/perfshop/frontend/src/chaos-agent.js

# Rebuild (inclut npm install + vite build)
cd /volume4/docker-speed/perfshop
docker compose build perfshop-frontend
docker compose up -d perfshop-frontend