Gestion des erreurs

Une exception en JavaScript c'est une erreur qui se produit en cours d'exécution. On dit que l'erreur déclenche une exception ou que l'erreur lève une exception.

soit il ne traite pas l'exception et dans ce cas son script plante !
soit il traite l'exception et dans ce cas son script affiche l'erreur mais surtout se poursuit !

Pour gérer les erreurs il faut utiliser la structure try ... catch ....

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Donc script sans utilisation de try ... catch ...

Le code de la page web (extrait)

...
<button onclick ="mafonction()">Appel script</button>
<script>
function mafonction()
{
	var nombre = prompt("saisir un réel au format 999.99"); 
	var entier = parseint(nombre); 
	alert("nombre arrondi à l'entier le plus proche :"  + entier);
		
	var nom = prompt("saisir votre nom"); 
	alert("bienvenu cher() " + nom); 
}	
...

Le rendu

Ce programme "plante" ; il est impossible de saisir le nom.
Pour connaitre la raison du plantage il faut afficher la console du navigateur. Celle-ci indique que la fonction "parseint()" n'est pas définie. En effet il faut respecter la casse dans le cadre de la syntaxe camelCase ; un I majuscule.

Même thème avec gestion de l'erreur

Donc avec emploi cette fois de la structure try ... catch ...

Le code

...
<button onclick ="mafonction()">Appel script</button>
<script>
function mafonction()
{
		try 
		{
			var nombre = prompt("saisir un réel"); 
			var entier =parseint(nombre); 
			alert("nombre arrondi à l'entier le plus proche :"  + entier); 
		}
		catch(err) 
		{
			alert(err.name); 
			alert(err.message); 
			alert(err.stack);
		}
		var nom = prompt("saisir votre nom"); 
		alert("bienvenu cher() " + nom); 
} // fin fonction	
...

Désormais dans le script nous utilisons la syntaxe try ... catch ...
Ainsi l'erreur est capturée et surtout il n'y a plus "plantage" du script !

Le rendu

Des boites de dialogue au nombre de trois donnent des détails sur l'erreur.
L'objet err comprend en effet de nombreuses propriétés donc : name, message,stack, etc.
Ensuite je peux quand même saisir mon nom. Donc il n'y plus plantage du script.

La console du navigateur est vide ; les erreurs ont été capturés par la routine catch(err).

Remarque

Le thème abordé ne présente aucun intérêt pratique. En effet une erreur de syntaxe ne doit pas exister dans un programme mis en ligne.
La gestion des erreurs avec la structure try ... catch... est utile et doit être employée pour d'autres types d'erreurs en particulier des erreurs de saisie de l'utilisateur OU celles liées à l'environnement web (plus de connexion internet, utilisation d'un navigateur

Gestion des erreurs : exemples réalistes

Dans les deux exemples qui suivent, structure try ... catch ... vise à détecter des erreurs utilisateurs.

Premier exemple

L'utilisateur doit saisir dans le premier champ d'un formulaire une valeur numérique compris entre 5 et 10.
Une erreur de saisie éventuelle doit lui être signalée.

Le code de la page

...
<input id="nombre" type="text" placeholder ="saisir un numérique compris entre 5 et 10">
<br><input id ="nom" type ="text" placeholder ="saisir un nom">
<br><button onclick ="mafonction()">Validez </button>
<p id ="message"></p>
<script>
function mafonction() {
  const message = document.getElementById("message");
  message.innerHTML = "";
  var nombre = document.getElementById("nombre").value;
  try {
    if(nombre == "") throw "est vide";
    if(isNaN(nombre)) throw "ne contient pas un nombre ";
	if(nombre > 10) throw "trop grand";
    if(nombre < 5) throw "trop petit";
   }
  catch(err) {
    message.innerHTML = "Le contenu du premier champ " + err;
  }
 } // fin fonction

 ...

Notez l'emploi de l'instruction throw qui génère un message d'erreur dans le bloc try
Ce message est capturé par le bloc catch et affiché dans la balise P identifiée "message".

L'instruction throw(expression) permet de créer des messages d'erreurs personnalisés.

Le rendu

ne pas remplir le premier champ
le remplir avec une suite de lettres
le remplir avec un entier supérieur à 10
le remplir avec un entier inférieur à 5
le remplir avec un entier compris entre 5 et 10

Deuxième exemple

L'utilisateur saisit un pseudo qui doit comprendre entre 8 et 16 caractères alphanumériques (chiffres ou lettres) ; lettres en majuscules ou minuscules.

Le code

...
<input id="pseudo" type="text" placeholder ="saisir un pseudo comprenant entre 8 et 16 caractères alphanumériques">
<br><input id ="nom" type ="text" placeholder ="saisir un nom">
<br><button onclick ="mafonction()">Validez </button>
<p id ="message"></p>
<script>
function mafonction() 
{
  var message = document.getElementById("message");
  var pseudo = document.getElementById("pseudo").value; 
  message.innerHTML =""; 
   var reg = new RegExp("^[0-9A-z]{8,16}$");
  try {if(!reg.test(pseudo)) throw "le pseudo " + pseudo + " n'est pas valide " ; }
  catch(err) { message.innerHTML = err; } 
} // fin fonction
...

C'est l'occasion de faire une "piqure de rappel" sur les expression régulières.
Notez bien le motif : ^[0-9A-z]{8,16}$"

Ce motif précise qu'il faut saisir entre 8 et 16 chiffres ou lettres (majuscules et minuscules). En effet la lettre A est en majuscule et la lettre z en minuscule. Donc la plage de lettres autorisées couvre les majuscules et minuscules.

Le rendu

Saisissez des pseudos trop courts (moins de 8 caractères) OU des pseudos avec des symboles (*,!, ? , etc.) ou des lettres accentuées.
Observez le message d'erreur généré à chaque fois.
Si aucun message n'est affiché c'est que le pseudo est correct.

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

JavaScript natif

Vue.js

jQuery.js

Node.js

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Gestion des erreurs

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Le code de la page web (extrait)

Le rendu

Même thème avec gestion de l'erreur

Le code

Le rendu

Remarque

Gestion des erreurs : exemples réalistes

Premier exemple

Le code de la page

Le rendu

Deuxième exemple

Le code

Le rendu