Qu'est-ce qu'une exception Javascript ?

Le langage Javascript utilise le mécanisme des exceptions pour gérer les erreurs d'exécution.

Les exceptions sont plus élaborées que de simples erreurs affichées à l'utilisateur comme les Notice ou les Warning de PHP, puisqu'elles peuvent être interceptées.

Pour comprendre, il faut imager une exception comme une bulle d'air dans l'eau, qui va remonter toute seule à la surface, sauf si quelqu'un l'attrape en route.

Pour attraper une exception qui pourrait potentiellement être levée lors de l'exécution d'un morceau de code, on doit l'entourer d'un bloc try{}, suivi d'un bloc catch(err){}.

Techniquement, une exception est un objet, et cet objet est passé en paramètre dans le bloc catch via une variable (que l'on nomme généralement ex ou err) :

try{
	alert("variableInexistante = " + variableInexistante);
} catch(err){
	alert("variableInexistante n'existe pas ! (erreur javascript : "+err.toString()+")");
}

Un objet Exception Javascript contient différents membres (slots), dont voici la liste (et ce qu'ils contiennent) :

try{
	alert("variableInexistante = " + variableInexistante);
} catch(err){
	console.log( err.arguments );		// ["variableInexistante"]
	console.log( err.message );			// variableInexistante is not defined
	console.log( err.name );			// ReferenceError
	console.log( err.toLocaleString() );// ReferenceError: variableInexistante is not defined
	console.log( err.toString() );		// ReferenceError: variableInexistante is not defined
	console.log( err.type );			// not_defined
	console.log( err.stack );
	//	ReferenceError: variableInexistante is not defined
	//		at eval (eval at <anonymous> (unknown source), <anonymous>:3:35)
	//		at eval (native)
	//		at Object.InjectedScript._evaluateOn (<anonymous>:447:33)
	//		at Object.InjectedScript._evaluateAndWrap (<anonymous>:407:52)
	//		at Object.InjectedScript.evaluate (<anonymous>:343:21)
}

Plusieurs catch pour différents types d'exception

Comme on vient de le voir, une exception est un objet avec plusieurs attributs, dont l'attribut name qui sert à différencier les principaux types d'erreurs qu'on peut rencontrer en Javascript.

Plusieurs types d'exceptions peuvent survenir dans un bloc try, et il est possible de différencier ces types grâce au statement instanceof :

try{
	// noVar++;				// ReferenceError
	new Date().bidule();	// TypeError
} catch(err){
	if( err instanceof ReferenceError ){
		alert("Exception de type ReferenceError attrapée !");
	} else if( err instanceof TypeError ){
		alert("Exception de type TypeError attrapée !");
	} else {
		alert("Exception générique attrapée !");
	}
}

Il y a aussi une autre syntaxe qui permet de définir un catch particulier pour différents types d'exceptions (comme dans d'autres langages comme Java ou PHP), mais elle ne marche pas sur tous les navigateurs (sous Chrome par exemple, cette syntaxe provoque une erreur : SyntaxError: Unexpected token if) :

try{
	// noVar++;				// ReferenceError
	new Date().bidule();	// TypeError
} catch(err if err instanceof ReferenceError){
	alert("Exception de type ReferenceError attrapée !");
} catch(err if err instanceof TypeError){
	alert("Exception de type TypeError attrapée !");
} catch(err){
	alert("Exception générique attrapée !");
}

Créer une exception

En plus des exceptions natives qui font partie de Javascript, vous pouvez aussi lever vos propres exceptions très simplement en créant un objet Error :

try{
	if( typeof(bidule) == 'undefined' ){
		throw new Error("bidule n'existe pas");
	}
} catch(err){
	console.log( err.arguments );	// undefined
	console.log( err.message );		// bidule n'existe pas
	console.log( err.name );		// Error
	console.log( err.toString() );	// Error: bidule n'existe pas
	console.log( err.type );		// undefined
}

Dans un tout autre contexte, cet article est très intéressant : excel condition couleur.

Le seul "inconvénient " c'est que les exceptions levées de cette façon sont assez pauvres, ont peut juste définir le message de l'exception, et pas ses différents attributs. Après on peut créer ses propres types d'exception grâce à l'héritage, en modifiant le prototype de l'objet, mais c'est du javascript avancé que je n'aborderais pas ici. Plus d'info @Stackoverflow

try, catch, finally

Finalement (sans mauvais je de mots), je vais vous parler de finally, qui est une instruction placée à la suite d'un try catch et qui est toujours exécuté, qu'une exception survienne ou pas :

try{
	noVar++; // ReferenceError
} catch(err){
	alert(err.toString());
} finally {
	alert("finally est toujours exécuté !");
}

Ce que ne sont pas les exceptions

Avant de terminer ce billet, un petit mot sur la manière d'utiliser ou au contraire de ne pas utiliser ce mécanisme.

Les exceptions ne sont pas une solution miracle pour résoudre les erreurs. Entourer un bout de code buggé par un try catch ne résout le bug en aucune manière, c'est juste un moyen de permettre au développeur d'exécuter un code spécifique en cas d'erreur (comme par exemple enregistrer l'erreur dans un fichier journal (log d'erreur javascript) via AJAX par exemple).

De plus, évitez de faire des blocs try trop grand, le try catch doit être utilisé ponctuellement, autour de portions de codes qui sont susceptibles de poser problème.

Une petite astuce pour la fin : il est possible d'imbriquer plusieurs try catch les uns dans les autres.

Allez donc jeter un oeil sur cette page : dessiner une tablette graphique.