Update 25_01_26

10_frontend_risques_et_vigilance.md

@@ -0,0 +1,135 @@
+# Front-end — Risques & vigilance
+
+Ce fichier recense des risques front-end susceptibles de provoquer :
+
+- bugs subtils,
+- comportements inattendus,
+- dette technique rapide,
+- régressions UX/perf/a11y.
+
+Dernière mise à jour : 25-01-2026
+
+---
+
+## Règles d’utilisation
+
+- Chaque entrée doit dire :
+  - ce qui peut mal se passer,
+  - comment on le voit (symptômes),
+  - comment on le maîtrise (mitigation).
+- Si c’est lié à une stack / version : on note le contexte.
+
+---
+
+## Auth côté client (mauvaise séparation des responsabilités)
+
+### Risques
+
+- Le front “décide” des permissions au lieu d’appliquer un contrat backend
+- Affichage d’actions interdites / fuite d’informations dans l’UI
+- Tokens stockés de façon dangereuse (XSS)
+
+### Symptômes
+
+- Différences entre “ce que l’UI permet” et “ce que l’API accepte”
+- Bugs “ça marche chez moi” selon sessions/rôles
+- Incohérences sur refresh / multi-tab
+
+### Bonnes pratiques / mitigations
+
+- Le backend reste source de vérité (authz)
+- Cacher l’UI ≠ sécuriser : toujours sécuriser côté API
+- Stockage tokens : privilégier cookies httpOnly si modèle adapté
+- Gérer proprement expiration/refresh + révocation
+
+### Contexte technique
+
+- Observé : (à compléter)
+- Stack : (à préciser)
+
+---
+
+## Erreurs silencieuses / écrans blancs
+
+### Risques
+
+- Exceptions non gérées → app inutilisable
+- États async mal gérés → UI incohérente (loading infini, vide incompris)
+
+### Symptômes
+
+- Écran blanc après une action
+- Toast générique “Une erreur est survenue” sans corrélation
+- Pas de moyen de reproduire / diagnostiquer
+
+### Bonnes pratiques / mitigations
+
+- Pattern “états UI explicites” (loading/empty/error)
+- Boundary d’erreur UI + fallback
+- Logging minimal côté client avec requestId/traceId quand possible
+
+---
+
+## Mélange server state / client state
+
+### Risques
+
+- Cache pollué par des états UI (onglets, filtres)
+- UI qui reflète une donnée périmée sans le savoir
+- Re-renders et bugs de synchronisation
+
+### Symptômes
+
+- “Ça revient tout seul” après refresh
+- Données affichées ≠ données du backend
+- Debug très long car état implicite
+
+### Bonnes pratiques / mitigations
+
+- Séparer explicitement server state vs client state
+- Invalidation/reload explicite du server state
+- État UI local réinitialisable
+
+---
+
+## Performances : sur-renders + bundle non maîtrisé
+
+### Risques
+
+- App lente sur mobile
+- Bundle qui grossit sans contrôle
+- Chargements inutiles (images, libs)
+
+### Symptômes
+
+- Input lag
+- Temps de chargement qui dérive à chaque feature
+- Requêtes réseaux inutiles
+
+### Bonnes pratiques / mitigations
+
+- Lazy loading routes/features
+- Mesurer (au minimum) : temps de chargement + re-renders critiques
+- Politique images (formats, tailles, lazy)
+- Audit régulier des dépendances
+
+---
+
+## Accessibilité oubliée (a11y)
+
+### Risques
+
+- App inutilisable au clavier/lecteur d’écran
+- Régressions silencieuses sur focus/labels
+
+### Symptômes
+
+- Modales impossibles à fermer au clavier
+- Inputs sans labels/erreurs non annoncées
+- Focus “perdu”
+
+### Bonnes pratiques / mitigations
+
+- Checklist a11y minimale sur chaque écran clé
+- Gestion de focus (modales, erreurs formulaire)
+- Labels/aria cohérents + tests simples