Chapitre 14 – Gestion des erreurs

Une application professionnelle ne se contente pas de “fonctionner quand tout va bien”. Elle doit aussi gérer correctement les erreurs : erreurs JavaScript, problèmes réseau, réponses serveur invalides, et afficher des messages clairs à l’utilisateur.

1) Pourquoi gérer les erreurs ?

Éviter les comportements imprévisibles
Aider l’utilisateur à comprendre ce qui se passe
Faciliter le débogage
Améliorer la qualité perçue de l’application

2) try / catch en JavaScript

try / catch permet d’intercepter une erreur JavaScript sans faire planter tout le script.

try {
  const data = JSON.parse('{ invalide json }');
  console.log(data);
} catch (err) {
  console.error('Erreur JS :', err.message);
}

try/catch fonctionne uniquement pour les erreurs synchrones.

3) Erreurs fréquentes côté DOM / jQuery

Sélecteur incorrect (élément inexistant)
Manipulation d’une valeur null ou undefined
Erreur de syntaxe JS

const value = $('#missing').val(); // undefined
if(value === undefined){
  console.warn('Champ introuvable');
}

4) Gestion des erreurs AJAX

Les appels AJAX sont une source fréquente d’erreurs : réseau, serveur HS, réponse invalide, timeout…

$.ajax({
  url: 'api/data.php',
  method: 'GET',
  success: function(data){
    console.log('Succès', data);
  },
  error: function(xhr, status, error){
    console.error('Erreur AJAX', status, error);
    $('#message').text('Impossible de charger les données.');
  }
});

Toujours prévoir un error (ou fail()) sur une requête AJAX.

5) Utiliser done() / fail() / always()

jQuery permet aussi une syntaxe plus “chaînée” pour AJAX.

$.get('api/data.php')
  .done(function(data){
    console.log('Données reçues', data);
  })
  .fail(function(xhr){
    console.error('Erreur', xhr.status);
  })
  .always(function(){
    console.log('Requête terminée');
  });

6) Messages utilisateur (UX)

L’utilisateur n’a pas besoin de détails techniques. Il a besoin de messages simples et utiles.

Éviter les messages vagues (“Erreur”)
Dire quoi faire (“Réessayer plus tard”)
Ne pas exposer d’infos techniques sensibles

function showError(message){
  $('#alert')
    .removeClass('ok')
    .addClass('error')
    .text(message);
}

7) Logger pour le développeur

Pendant le développement :

console.log()
console.warn()
console.error()

En production, on évite de laisser des logs trop verbeux dans la console.

8) Exemple complet : formulaire AJAX robuste

<form id="form">
  <input name="email">
  <button>Envoyer</button>
</form>
<p id="message"></p>

<script>
$('#form').on('submit', function(e){
  e.preventDefault();

  $('#message').text('Envoi...');

  $.ajax({
    url: 'api/send.php',
    method: 'POST',
    data: $(this).serialize()
  })
  .done(function(){
    $('#message').text('Message envoyé.');
  })
  .fail(function(){
    $('#message').text('Erreur lors de l\'envoi.');
  });
});
</script>

9) Bonnes pratiques

Toujours anticiper les erreurs
Séparer message utilisateur / message développeur
Tester les cas d’échec (offline, erreur serveur)

Résumé du chapitre

try / catch : intercepter les erreurs JS
AJAX : toujours gérer error / fail
UX : messages clairs pour l’utilisateur
Logs : utiles pour le développeur