feat: Client-side error logging for mobile debugging

Contexte

Problème d'affichage de la carte sur mobile en production, difficile à reproduire et débugger sans accès aux logs navigateur.

Besoin

Collecter les logs des navigateurs des sessions problématiques sans être floodé de logs.

Suggestions d'implémentation

Option 1: Error Boundary + Opt-in reporting (Recommandé)

// Capture automatique des erreurs React uniquement
class ErrorBoundary {
  componentDidCatch(error, errorInfo) {
    // Envoi uniquement sur erreur
    sendToServer({ error, errorInfo, userAgent, viewport, timestamp });
  }
}

Avantages: Pas de flood, capture uniquement les vrais problèmes
Inconvénients: Ne capture pas les erreurs silencieuses (carte qui ne s'affiche pas sans erreur JS)

Option 2: Session Recording conditionnel

Utiliser un service comme LogRocket, Sentry Session Replay, ou PostHog avec sampling:

// Enregistrer seulement 5% des sessions OU si erreur détectée
if (Math.random() < 0.05 || hasError) {
  initSessionRecording();
}

Avantages: Replay vidéo complet, contexte riche
Inconvénients: Coût, RGPD à gérer

Option 3: Debug Mode activable par l'utilisateur (Léger)

// URL param ou localStorage pour activer le debug
// ?debug=1 ou localStorage.setItem('toize_debug', '1')

if (isDebugMode()) {
  window.onerror = (msg, url, line) => sendLog({ level: 'error', msg, url, line });
  console.log = wrapWithRemoteLogging(console.log);
}

Avantages: Aucun impact en temps normal, activable à la demande
Inconvénients: Nécessite que l'utilisateur active le mode

Option 4: Heartbeat + anomaly detection

// Envoyer un "heartbeat" minimal toutes les 30s
// Si la carte devrait être visible mais ne l'est pas → flag anomalie
setInterval(() => {
  const mapVisible = document.querySelector('.leaflet-container')?.offsetHeight > 0;
  if (shouldShowMap && !mapVisible) {
    sendAnomaly({ type: 'map_not_visible', viewport, userAgent });
  }
}, 30000);

Avantages: Détecte les problèmes silencieux spécifiques
Inconvénients: Logique métier à maintenir

Recommandation

Combinaison Option 1 + 3:

1. Error Boundary automatique pour les crashes
2. Mode debug activable (?debug=1) pour investigation approfondie
3. Endpoint /api/client-logs avec rate limiting (10 logs/session max)

Considérations RGPD

• Ne pas logger de données personnelles
• Anonymiser l'IP si stockée
• Mention dans la politique de confidentialité
• Rétention courte (7-30 jours)

Labels

• enhancement
• frontend
• debugging