_Assistant_Lead_Tech/10_frontend_risques_et_vigilance.md

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