[Facultatif] Si vous n’avez pas acc\u00e8s au serveur h\u00e9bergeant le script, vous pouvez envisager d’utiliser un proxy pour relayer votre demande au serveur et la renvoyer au client avec les bons en-t\u00eates.<\/li>\n<\/ol>\nUne fois que vous pouvez acc\u00e9der aux d\u00e9tails de l’erreur, vous pouvez alors vous atteler \u00e0 la r\u00e9solution du probl\u00e8me, qui sera probablement li\u00e9 soit \u00e0 la biblioth\u00e8que tierce, soit au r\u00e9seau.<\/p>\n
Comment identifier et pr\u00e9venir les erreurs en JavaScript<\/h2>\n Si les erreurs \u00e9voqu\u00e9es ci-dessus sont les plus courantes et les plus fr\u00e9quentes en JavaScript que vous rencontrerez, se fier \u00e0 quelques exemples ne sera jamais suffisant. Il est vital de comprendre comment d\u00e9tecter et pr\u00e9venir tout type d’erreur dans une application JavaScript tout en la d\u00e9veloppant. Voici comment vous pouvez g\u00e9rer les erreurs en JavaScript.<\/p>\n
Lancer et attraper manuellement les erreurs<\/h3>\n La fa\u00e7on la plus fondamentale de traiter les erreurs qui ont \u00e9t\u00e9 lanc\u00e9es manuellement ou par le runtime est de les attraper. Comme la plupart des autres langages, JavaScript propose un ensemble de mots-cl\u00e9s pour g\u00e9rer les erreurs. Il est essentiel de conna\u00eetre chacun d’entre eux en profondeur avant de vous lancer dans la gestion des erreurs dans votre application JavaScript.<\/p>\n
throw<\/h4>\n Le premier et le plus \u00e9l\u00e9mentaire des mots-cl\u00e9s de cet ensemble est throw<\/code>. Comme il est \u00e9vident, le mot-cl\u00e9 throw est utilis\u00e9 pour lancer des erreurs afin de cr\u00e9er manuellement des exceptions dans le runtime JavaScript. Nous en avons d\u00e9j\u00e0 parl\u00e9 plus t\u00f4t dans le document, et voici l’essentiel de la signification de ce mot-cl\u00e9 :<\/p>\n\nVous pouvez throw<\/code> tout, y compris les chiffres, les cha\u00eenes de caract\u00e8res et les objets Error<\/code>.<\/li>\nToutefois, il est d\u00e9conseill\u00e9 de lancer des types de donn\u00e9es primitifs tels que les cha\u00eenes de caract\u00e8res et les nombres, car ils ne contiennent pas d’informations de d\u00e9bogage sur les erreurs.<\/li>\n Exemple throw TypeError(\"Please provide a string\")<\/code><\/li>\n<\/ul>\ntry<\/h4>\n Le mot-cl\u00e9 try<\/code> est utilis\u00e9 pour indiquer qu’un bloc de code pourrait lancer une exception. Sa syntaxe est la suivante :<\/p>\ntry {\n \/\/ error-prone code here\n}<\/code><\/pre>\nIl est important de noter qu’un bloc catch<\/code> doit toujours suivre le bloc try<\/code> pour g\u00e9rer efficacement les erreurs.<\/p>\ncatch<\/h4>\n Le mot-cl\u00e9 catch<\/code> est utilis\u00e9 pour cr\u00e9er un bloc catch. Ce bloc de code est charg\u00e9 de traiter les erreurs que le bloc try<\/code> qui suit attrape. Voici sa syntaxe :<\/p>\ncatch (exception) {\n \/\/ code to handle the exception here\n}<\/code><\/pre>\nEt voici comment vous impl\u00e9mentez ensemble les blocs try<\/code> et catch<\/code> :<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n \/\/ error handling code\n}<\/code><\/pre>\nContrairement \u00e0 C++ ou Java, vous ne pouvez pas ajouter plusieurs blocs catch<\/code> \u00e0 un bloc try<\/code> en JavaScript. Cela signifie que vous ne pouvez pas faire ceci :<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n }\n} catch (exception) {\n if (exception instanceof RangeError) {\n \/\/ do something\n }\n}<\/code><\/pre>\nAu lieu de cela, vous pouvez utiliser une d\u00e9claration if...else<\/code> ou une d\u00e9claration switch case \u00e0 l’int\u00e9rieur du bloc catch unique pour g\u00e9rer tous les cas d’erreur possibles. Cela ressemblerait \u00e0 ceci :<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n } else if (exception instanceof RangeError) {\n \/\/ do something else\n }\n}<\/code><\/pre>\nfinally<\/h4>\n Le mot-cl\u00e9 finally<\/code> est utilis\u00e9 pour d\u00e9finir un bloc de code qui est ex\u00e9cut\u00e9 apr\u00e8s la gestion d’une erreur. Ce bloc est ex\u00e9cut\u00e9 apr\u00e8s les blocs try et catch.<\/p>\nEn outre, le bloc finally sera ex\u00e9cut\u00e9 quel que soit le r\u00e9sultat des deux autres blocs. Cela signifie que m\u00eame si le bloc catch ne peut pas traiter enti\u00e8rement l’erreur ou si une erreur est lanc\u00e9e dans le bloc catch, l’interpr\u00e9teur ex\u00e9cutera le code dans le bloc finally avant que le programme ne s’\u00e9croule.<\/p>\n
Pour \u00eatre consid\u00e9r\u00e9 comme valide, le bloc try en JavaScript doit \u00eatre suivi d’un bloc catch ou finally. Sans l’un de ces \u00e9l\u00e9ments, l’interpr\u00e9teur l\u00e8vera une SyntaxError. Par cons\u00e9quent, veillez \u00e0 faire suivre vos blocs try d’au moins l’un d’entre eux lorsque vous traitez les erreurs.<\/p>\n
Traiter les erreurs de mani\u00e8re globale avec la m\u00e9thode onerror()<\/h3>\n La m\u00e9thode onerror()<\/code> est disponible pour tous les \u00e9l\u00e9ments HTML afin de g\u00e9rer les erreurs qui peuvent survenir avec eux. Par exemple, si une balise img<\/code> ne trouve pas l’image dont l’URL est sp\u00e9cifi\u00e9e, elle d\u00e9clenche sa m\u00e9thode onerror pour permettre \u00e0 l’utilisateur de g\u00e9rer l’erreur.<\/p>\nEn g\u00e9n\u00e9ral, vous fournissez une autre URL d’image dans l’appel onerror pour que la balise img<\/code> puisse se rabattre sur elle. Voici comment vous pouvez le faire via JavaScript :<\/p>\nconst image = document.querySelector(\"img\")\n\nimage.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nCependant, vous pouvez utiliser cette fonctionnalit\u00e9 pour cr\u00e9er un m\u00e9canisme global de traitement des erreurs pour votre application. Voici comment vous pouvez le faire :<\/p>\n
window.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nGr\u00e2ce \u00e0 ce gestionnaire d’\u00e9v\u00e9nements, vous pouvez vous d\u00e9barrasser des multiples blocs try...catch<\/code> qui tra\u00eenent dans votre code et centraliser le traitement des erreurs de votre application de mani\u00e8re similaire au traitement des \u00e9v\u00e9nements. Vous pouvez attacher plusieurs gestionnaires d’erreurs \u00e0 la fen\u00eatre pour maintenir le principe de responsabilit\u00e9 unique des principes de conception SOLID. L’interpr\u00e9teur passera en revue tous les gestionnaires jusqu’\u00e0 ce qu’il atteigne celui qui convient.<\/p>\nTransmettre les erreurs via des callbacks<\/h3>\n Si les fonctions simples et lin\u00e9aires permettent \u00e0 la gestion des erreurs de rester simple, les callbacks peuvent compliquer l’affaire.<\/p>\n
Consid\u00e9rez le morceau de code suivant :<\/p>\n
const calculateCube = (number, callback) => {\n setTimeout(() => {\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ncalculateCube(4, callback)<\/code><\/pre>\nLa fonction ci-dessus d\u00e9montre une condition asynchrone dans laquelle une fonction prend un certain temps pour traiter les op\u00e9rations et renvoie le r\u00e9sultat plus tard \u00e0 l’aide d’un callback.<\/p>\n
Si vous essayez d’entrer une cha\u00eene de caract\u00e8res au lieu de 4 dans l’appel de la fonction, vous obtiendrez NaN<\/code> comme r\u00e9sultat.<\/p>\nCela doit \u00eatre trait\u00e9 correctement. Voici comment :<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\")\n throw new Error(\"Numeric argument is expected\")\n\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ntry {\n calculateCube(4, callback)\n} catch (e) { console.log(e) }<\/code><\/pre>\nDans l’id\u00e9al, cela devrait r\u00e9soudre le probl\u00e8me. Cependant, si vous essayez de passer une cha\u00eene de caract\u00e8res \u00e0 l’appel de fonction, vous obtiendrez ceci :<\/p>\nExemple d’erreur avec le mauvais argument.<\/figcaption><\/figure>\nBien que vous ayez mis en place un bloc try-catch lors de l’appel de la fonction, l’erreur n’est toujours pas attrap\u00e9e. L’erreur est lanc\u00e9e apr\u00e8s l’ex\u00e9cution du bloc catch en raison du d\u00e9lai d’attente.<\/p>\n
Cela peut se produire rapidement dans les appels r\u00e9seau, o\u00f9 des d\u00e9lais inattendus se glissent. Vous devez couvrir de tels cas lors du d\u00e9veloppement de votre application.<\/p>\n
Voici comment vous pouvez g\u00e9rer correctement les erreurs dans les callbacks :<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\") {\n callback(new TypeError(\"Numeric argument is expected\"))\n return\n }\n const cube = number * number * number\n callback(null, cube)\n }, 2000)\n}\n\nconst callback = (error, result) => {\n if (error !== null) {\n console.log(error)\n return\n }\n console.log(result)\n}\n\ntry {\n calculateCube('hey', callback)\n} catch (e) {\n console.log(e)\n}<\/code><\/pre>\nMaintenant, la sortie \u00e0 la console sera :<\/p>\nExemple de TypeError avec argument ill\u00e9gal.<\/figcaption><\/figure>\nCela indique que l’erreur a \u00e9t\u00e9 trait\u00e9e de mani\u00e8re appropri\u00e9e.<\/p>\n
Traiter les erreurs dans Promises<\/h3>\n La plupart des gens ont tendance \u00e0 pr\u00e9f\u00e9rer les promises pour g\u00e9rer les activit\u00e9s asynchrones. Elles pr\u00e9sentent un autre avantage – une promise rejet\u00e9e ne met pas fin \u00e0 votre script. Cependant, vous devez toujours impl\u00e9menter un bloc catch pour g\u00e9rer les erreurs dans les promises. Pour mieux comprendre cela, r\u00e9\u00e9crivons la fonction calculateCube()<\/code> en utilisant des promises :<\/p>\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst calculateCube = async (number) => {\n if (typeof number !== \"number\")\n throw Error(\"Numeric argument is expected\")\n await delay(5000)\n const cube = number * number * number\n return cube\n}\n\ntry {\n calculateCube(4).then(r => console.log(r))\n} catch (e) { console.log(e) }<\/code><\/pre>\nLe timeout du code pr\u00e9c\u00e9dent a \u00e9t\u00e9 isol\u00e9 dans la fonction delay<\/code> pour des raisons de compr\u00e9hension. Si vous essayez d’entrer une cha\u00eene de caract\u00e8res au lieu de 4, la sortie que vous obtiendrez sera similaire \u00e0 celle-ci :<\/p>\nExemple de TypeError avec un argument ill\u00e9gal dans Promise.<\/figcaption><\/figure>\nEncore une fois, cela est d\u00fb au fait que le site Promise<\/code> lance l’erreur apr\u00e8s que tout le reste ait termin\u00e9 son ex\u00e9cution. La solution \u00e0 ce probl\u00e8me est simple. Il suffit d’ajouter un appel \u00e0 catch()<\/code> \u00e0 la cha\u00eene de promesses comme ceci :<\/p>\ncalculateCube(\"hey\")\n.then(r => console.log(r))\n.catch(e => console.log(e))<\/code><\/pre>\nMaintenant, la sortie sera :<\/p>\nExemple d’erreur de type trait\u00e9 avec un argument ill\u00e9gal.<\/figcaption><\/figure>\nVous pouvez observer \u00e0 quel point il est facile de g\u00e9rer les erreurs avec des promises. De plus, vous pouvez encha\u00eener un bloc finally()<\/code> et l’appel de la promse pour ajouter du code qui s’ex\u00e9cutera une fois la gestion des erreurs termin\u00e9e.<\/p>\nVous pouvez \u00e9galement g\u00e9rer les erreurs dans les promises en utilisant la technique traditionnelle try-catch-finally. Voici \u00e0 quoi ressemblerait votre appel de promise dans ce cas :<\/p>\n
try {\n let result = await calculateCube(\"hey\")\n console.log(result)\n} catch (e) {\n console.log(e)\n} finally {\n console.log('Finally executed\")\n}<\/code><\/pre>\n
![\"Exemple](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/type-error-output-numeric.png\")