Guide faisant autorité pour la gestion des erreurs javascript

La loi Murphy dit que tout ce qui peut mal tourner finit par mal tourner. C’est un peu trop gratifiant dans le monde de la programmation. Si vous créez une application, des bogues et d’autres problèmes peuvent survenir. Les erreurs en javascript sont l’un de ces problèmes courants! Le succès d’un produit logiciel dépend de la capacité de son créateur à résoudre ces problèmes avant de nuire à l’utilisateur. Dans tous les langages de programmation, JavaScript est connu pour sa conception moyenne de gestion des erreurs. Si vous créez une application Javascript, il y a de fortes chances qu’une erreur de type de données se produise tôt ou tard. Dans le cas contraire, l’opérateur non défini peut éventuellement être remplacé par un opérateur zéro égal ou par un opérateur double égal (=) au lieu de trois opérateurs (=).
Seuls les humains font des erreurs. C’est pourquoi nous vous montrerons toutes les connaissances nécessaires pour gérer les erreurs en javascript. Cet article vous guidera sur les erreurs javascript de base et expliquera les types d’erreurs que vous pourriez rencontrer. Vous apprendrez ensuite à reconnaître et à corriger ces erreurs. Il existe également des conseils pour vous aider à gérer efficacement les erreurs dans votre environnement de production. Plus d’ennuis, on y va! Qu’est – ce qu’une erreur javascript? Une erreur de programmation est une condition qui ne permet pas au programme de fonctionner correctement. Cela se produit lorsque le programme ne sait pas comment gérer le travail en cours, par exemple lorsque vous essayez d’ouvrir un fichier inexistant, ou lorsque vous atteignez un paramètre API Web sans connexion réseau.
Ces conditions peuvent causer des erreurs de programme à l’utilisateur, ce qui signifie que l’utilisateur ne sait pas comment continuer. Le programme recueille le plus de messages d’erreur possible et signale qu’il ne peut pas continuer. La loi Murphy dit que tout ce qui peut mal tourner tourne mal, ce qui est trop approprié
Et le message, puis la liste des méthodes appelées. Chaque appel à la méthode indique l’emplacement du code source et la ligne qui l’appelle. Vous pouvez utiliser ces données pour naviguer dans la base de code et identifier la partie du Code qui a causé l’erreur. Cette liste de méthodes est empilée. Affiche où l’exception a été générée pour la première fois et comment elle s’est propagée en appelant la méthode stack. La capture pour l’implémentation d’exception ne lui permettra pas de se propager dans la pile et d’écraser l’exception du programme. Cependant, dans certains cas, vous ne voudrez peut – être pas détecter une erreur irréversible pour arrêter délibérément le programme.
Erreurs et exceptions la plupart des gens pensent généralement que les erreurs et les exceptions sont la même chose. Il convient toutefois de noter les différences subtiles mais fondamentales entre elles. L’exception est un objet d’erreur généré. Pour mieux comprendre cela, prenons un exemple simple. Voici comment définir l’erreur en javascript: Const errortypeerror = typeerror (\
Lancer une erreur de type (\
Quelques erreurs dans JavaScript et vous apprendrez quand et pourquoi elles se sont produites.
Erreur de plage une erreur de plage est générée lorsque la variable est définie à une valeur qui dépasse la plage admissible. Cela se produit généralement lorsque vous passez une valeur comme argument à une fonction et qu’une valeur donnée n’est pas dans la plage des paramètres de la fonction. Il est parfois difficile de résoudre ce problème lors de l’utilisation d’une bibliothèque tierce dont la documentation est incomplète, car vous devez connaître la plage de valeurs possibles pour les paramètres afin de transférer les valeurs correctes. Voici quelques scénarios courants où une erreur de plage se produit:
Essayez de créer un tableau de longueur invalide en utilisant le constructeur de tableau. Passez des valeurs invalides à des méthodes numériques telles que toexponential (), toprecision (), tofixed (), et ainsi de suite. Passe une valeur illégale à une fonction de chaîne, comme normalize (). Une erreur de référence se produit lorsqu’il y a un problème avec la référence d’une variable dans le Code. Vous avez peut – être oublié de définir une valeur pour une variable avant de l’utiliser, ou vous pourriez essayer d’utiliser une variable inaccessible dans votre code. En tout état de cause, l’analyse de la pile fournit suffisamment d’informations pour trouver et corriger les références des variables erronées.
Certaines des causes courantes d’erreur de référence sont des erreurs d’entrée dans le nom de la variable. Essayez d’accéder à une variable dont la portée du bloc dépasse leur portée respective. Avant de charger, faites référence à une variable globale dans une bibliothèque externe (par exemple, $dans jquery). Erreurs de syntaxe ces erreurs sont parmi les plus faciles à corriger car elles indiquent une erreur dans la syntaxe du Code. Parce que JavaScript est un langage de script interprété et non compilé, ces scripts sont générés lorsque l’application exécute un script contenant des erreurs. Pour la langue de compilation, ces erreurs
De la méthode. Le diagnostic de ces erreurs est généralement facile, car les arguments en faveur d’un examen des malformations suffisent. Erreur d’évaluation une erreur d’évaluation se produit lorsqu’une erreur se produit lors d’un appel de fonction eval (). Eval () est utilisé pour exécuter le code JavaScript stocké dans la chaîne. Cependant, eval () n’est pas encouragé en raison de problèmes de sécurité et la spécification ecmascript actuelle ne génère plus la classe evalererror, de sorte que ce type d’erreur n’existe que pour maintenir la compatibilité avec les anciennes versions de JavaScript. Cette erreur peut être rencontrée si vous utilisez une version antérieure de JavaScript. En tout état de cause, il est préférable de vérifier le Code exécuté dans l’appel de fonction eval () pour toute exception. Créer un type d’erreur personnalisé bien que JavaScript fournisse une liste de classes de type d’erreur pour la plupart des cas, vous pouvez toujours créer un nouveau type d’erreur si la liste ne répond pas à vos exigences. La base de cette flexibilité est que JavaScript vous permet de démarrer n’importe quoi avec la commande Throw. Par conséquent, techniquement, ces énoncés sont tout à fait légitimes: lancer 8 lancer « une erreur s’est produite », mais l’émission d’un type de métadonnées de base ne fournit pas de détails sur l’erreur, comme le type, le nom ou la trace qui accompagne la pile. Pour résoudre ce problème et normaliser le traitement des erreurs, des classes d’erreurs sont fournies. Le type de métadonnées de base n’est pas non plus recommandé lors de la génération d’exceptions. Vous pouvez étendre les classes d’erreurs pour créer vos propres classes d’erreurs personnalisées. Voici un exemple de base de la façon de le faire: class validationerror étend l’erreur {Constructor (message) {super (message); this.name = \
Erreurs (\
Erreur lors de la définition de la fonction. La solution pour cette erreur est la même: Assurez – vous que la variable est correctement initialisée et qu’elle n’est pas incertaine lors de l’accès à la propriété ou à la méthode. Typeerror: NULL n’est pas un objet, ce qui est similaire à l’erreur précédente. Il se produit sur Safari et la seule différence entre les deux erreurs est que cette erreur est générée lorsque l’objet auquel la propriété ou la méthode accède est nul et non non défini. Vous pouvez le lire en exécutant le code suivant: var func = null func. Call () Voici la sortie que vous recevrez: Exemple d’erreur de type pour une fonction vide. Parce que NULL est une valeur explicitement définie à une variable, pas une valeur automatiquement assignée par JavaScript. Cette erreur ne se produit que si vous essayez vous – même d’accéder à une variable définie à null. Par conséquent, vous devez vérifier le Code et la logique que vous avez écrite correctement. Typeerror: impossible de lire la propriété ‘length’ cette erreur se produit dans Chrome lorsque vous essayez de lire la longueur d’un objet nul ou non défini. La cause de ce problème est similaire à celle des problèmes précédents, mais se produit souvent lors de la gestion des listes; Il convient donc d’y faire une référence particulière. Voici comment reproduire le problème: Un exemple d’erreur de type pour un objet n’est pas défini. Cependant, dans une version plus récente de chrome, cette erreur a été signalée comme une erreur de type non saisie: impossible de lire une propriété non définie. Voici à quoi il ressemble maintenant: Un exemple d’erreur de type pour un objet qui n’est pas défini dans la nouvelle version de chrome. Encore une fois, la solution consiste à s’assurer que l’objet auquel vous essayez d’accéder existe et n’est pas défini à null. Typeerror: Undefined n’est pas une fonction qui se produit lorsque vous essayez d’appeler une méthode qui n’existe pas ou qui existe dans le script mais qui ne peut pas être référencée dans le contexte de l’appel. Cette erreur se produit généralement
Pour les variables constantes, vous obtiendrez les résultats suivants: Exemple d’erreur de type attribué à un objet constant. Bien que cela semble facile à résoudre maintenant, imaginez des centaines d’énoncés de variables comme celui – ci, dont l’un est défini par erreur comme Const au lieu de let! Contrairement à d’autres langages de script comme PHP, il y a peu de différences entre les styles de déclaration des constantes et des variables en javascript. Par conséquent, lorsque vous rencontrez cette erreur, il est recommandé de vérifier d’abord votre déclaration. Cette erreur peut également se produire si vous oubliez que la référence ci – dessus est constante et que vous l’utilisez comme variable. Cela indique que la logique de la demande est négligente ou défectueuse. Assurez – vous de vérifier lorsque vous essayez de corriger le problème. 10. (inconnu): erreur de script une erreur de script se produit lorsqu’un script tiers envoie une erreur au navigateur. Cette erreur est suivie (inconnue) parce que le script tiers appartient à un domaine autre que l’application. Le navigateur cache des détails supplémentaires pour empêcher que des informations sensibles ne soient échappées des scripts tiers. Cette erreur ne peut être résolue sans tous les détails. Voici ce que vous pouvez faire pour obtenir plus d’informations sur l’erreur: ajouter la propriété crossorin à la balise script. Définissez le bon en – tête d’origine d’autorisation de contrôle d’accès sur le serveur qui héberge le script. [facultatif] Si vous n’avez pas accès au serveur qui héberge le script, envisagez d’utiliser un proxy pour transmettre votre demande au serveur et retourner au client avec l’en – tête correct. Une fois que vous avez accès aux détails de l’erreur, vous pouvez configurer le dépannage qui peut affecter les bibliothèques ou les réseaux tiers. Comment identifier et prévenir les erreurs javascript bien que les erreurs discutées ci – dessus soient les plus courantes et les plus courantes dans Javascript, vous rencontrerez quelques exemples
Ils ne suffiront jamais. Il est essentiel de comprendre comment détecter et prévenir tout type d’erreur dans une application JavaScript pendant le développement. Voici comment gérer les erreurs en javascript. La façon la plus élémentaire de gérer les erreurs générées manuellement ou à l’exécution est de les saisir. Comme dans la plupart des autres langues, javascript fournit de nombreux mots clés pour traiter les erreurs. Avant de configurer la gestion des erreurs dans une application Javascript, vous devez en savoir plus sur elles. Le premier et le plus basique mot – clé de la collection Throw est Throw. De toute évidence, le mot – clé Throw est utilisé pour générer des erreurs afin de créer manuellement des exceptions au moment de l’exécution du JavaScript. Nous en avons discuté plus tôt dans cet article, et voici la nature du sens de ce mot – clé: Vous pouvez lancer n’importe quoi, y compris des nombres, des chaînes et des objets d’erreur. Cependant, il n’est pas recommandé de générer des types de données de base tels que des chaînes et des nombres parce qu’ils ne contiennent pas d’informations de débogage sur les erreurs. Exemple: le mot – clé d’essai Throw typeerror (\
Ion) {if (exception instance of typeerror) {\/ \/ do something}}}} catch {if (exception instance of rangeerror) {\/ \/ do something}}}} if… L’instruction switch case dans un autre bloc ou un seul bloc de capture gère toutes les conditions d’erreur possibles. Il ressemble à ceci: try {\/ \/ Business Logic Code} catch {if (exception instance of typeerror) {\/ \/ do something} else if (exception instance of rangeerror) {\/ \/ do something}} Enfin, le mot – clé final est utilisé pour définir le bloc de code à exécuter après le traitement de L’erreur. Ce bloc est exécuté après les blocs try et catch. De plus, quel que soit le résultat des deux autres blocs, le bloc finira par fonctionner. Cela signifie que même si le bloc de capture ne peut pas traiter complètement l’erreur, ou si une erreur est générée dans le bloc de capture, l’interpréteur finira par exécuter le code dans le bloc avant que le programme ne s’écrase. Pour être valide, un bloc d’essai en javascript doit être suivi d’une capture ou d’un bloc final. Si ce n’est pas le cas, l’interpréteur lancera une erreur de syntaxe. Par conséquent, lors du traitement des erreurs, assurez – vous d’utiliser au moins un des blocs d’essai pour suivre les blocs d’essai. Utilisez la méthode OnError () pour gérer globalement les erreurs la méthode OnError () est disponible pour tous les éléments HTML pour gérer toute erreur qui pourrait se produire. Par exemple, si l’étiquette IMG ne trouve pas l’image de l’URL spécifiée, elle active sa méthode OnError pour permettre à l’utilisateur de traiter l’erreur. En général, vous devriez fournir une autre URL d’image dans l’appel d’erreur pour effondrer la balise img. Voici comment le faire avec Javascript: Const image = document. Image du sélecteur de requête (IMG). OnError = (event) = > {console.log (\
Mécanisme mondial de gestion des erreurs pour les applications. Vous pouvez le faire: fenêtre. OnError = (event) = > {console.log (\
Chaque question: Exemple d’erreur pour le paramètre d’erreur. Même si le bloc try catch est implémenté lors d’un appel de fonction, il indique toujours qu’aucune erreur n’a été détectée. En raison du délai d’exécution, une erreur est générée après l’exécution du bloc de capture. Cela peut se produire rapidement dans les appels réseau, avec des retards inattendus. Vous devez couvrir ces situations lors du développement de votre application. Voici comment traiter correctement les erreurs dans un Callback: Const computecube = (Number, Callback) = > {settimeout (() = > {if (typeoof number! = \
Ou promettre un sujet illégal. De même, il s’agit d’un engagement erroné après que toutes les autres opérations ont été effectuées. La solution à ce problème est simple. Il suffit d’ajouter un appel catch () à la chaîne d’engagement comme suit: calculatecube (\
Blocs d’essai \/ capture asynchrones parce qu’ils linéarisent le Code et sont faciles à déboguer. Erreurs () Il est préférable d’utiliser la méthode OnError () Lorsque vous savez que votre application doit traiter un grand nombre d’erreurs et que celles – ci peuvent bien se propager à l’ensemble de la base de code. La méthode oneerror vous permet de gérer les erreurs comme s’il s’agissait simplement d’un autre événement géré par l’application. Vous pouvez définir plusieurs gestionnaires d’erreurs et les attacher à la fenêtre d’application lors du rendu initial. Cependant, vous devez également garder à l’esprit que la méthode OnError () peut inutilement exiger des paramètres dans des projets plus petits avec une plage d’erreurs plus petite. Si vous êtes sûr que votre application ne produira pas trop d’erreurs, les méthodes traditionnelles de démarrage \/ Capture vous conviennent mieux. En raison de la conception et de la structure du Code, la gestion des erreurs d’invocation et d’engagement dans les callbacks et les engagements est différente. Cependant, si vous choisissez entre les deux avant d’écrire votre code, il est préférable de respecter votre engagement. Ceci est dû au fait que promises a une construction intégrée pour connecter catch () et Finally () afin de faciliter le traitement des erreurs. Cette approche est plus simple et plus claire que la définition d’autres paramètres \/ la réutilisation des paramètres existants pour traiter les erreurs. L’utilisation du dépôt git pour suivre le changement de nombreuses erreurs sont généralement causées par des erreurs manuelles dans le dépôt de code. Au fur et à mesure que vous développez ou débogage votre code, vous pouvez apporter des changements inutiles qui peuvent entraîner de nouvelles erreurs dans la base de code. Les tests automatisés sont un excellent moyen de vérifier votre code après chaque changement. Cependant, il ne peut que vous dire si quelque chose ne va pas. Si vous ne sauvegardez pas souvent votre code, vous perdez du temps à travailler sur des fonctions ou des scripts qui fonctionnent correctement avant de les réparer. C’est là que le GIT fonctionne. Avec une politique de soumission appropriée, vous pouvez utiliser l’historique GIT comme système de sauvegarde pour voir l’évolution du Code pendant le développement. Vous pouvez facilement parcourir y
Nous avons précédemment soumis et trouvé que la version de la fonction fonctionnait correctement avant, mais a lancé une erreur après des changements non pertinents. Vous pouvez ensuite restaurer l’ancien Code ou comparer les deux versions pour déterminer ce qui ne va pas. Des outils modernes de développement Web comme github Desktop ou gitkraken peuvent vous aider à visualiser ces changements en même temps et à repérer rapidement les erreurs. Lorsque vous apportez des changements importants au Code, l’exécution d’une vérification de code est une habitude qui peut vous aider à réduire les erreurs. Si vous travaillez en équipe, vous pouvez créer une demande et demander aux membres de l’équipe de l’examiner en profondeur. Cela vous aidera à détecter toute erreur que vous pourriez ignorer avec votre deuxième œil. Pratiques exemplaires pour le traitement des erreurs javascript les méthodes décrites ci – dessus sont suffisantes pour vous aider à concevoir une méthode robuste de traitement des erreurs pour votre prochaine application JavaScript. Cependant, lors de leur mise en œuvre, il est préférable de garder à l’esprit plusieurs choses afin d’obtenir les meilleurs résultats de la prévention des erreurs. Voici quelques conseils pour vous aider. 1. Utilisez l’erreur personnalisée lors du traitement des exceptions opérationnelles nous avons introduit l’erreur personnalisée plus tôt dans ce guide pour vous montrer comment personnaliser le traitement des erreurs en fonction de la situation unique de l’application. Dans la mesure du possible, il est recommandé d’utiliser des erreurs personnalisées plutôt que des classes d’erreurs génériques, car elles fournissent plus d’informations contextuelles sur les erreurs pour l’environnement d’appel. Plus important encore, les erreurs personnalisées vous permettent d’ajuster la façon dont les erreurs sont affichées dans l’environnement d’appel. Cela signifie que vous pouvez choisir de masquer des détails spécifiques ou d’afficher des informations supplémentaires sur l’erreur au besoin. Vous pouvez même formater le contenu d’erreur au besoin. Cela vous permet de mieux contrôler la façon dont les erreurs sont interprétées et traitées. N’Avalez pas d’exceptions, même les développeurs les plus expérimentés font souvent des erreurs de débutant – en utilisant des niveaux d’exception profondément dans le Code. Vous pourriez rencontrer une situation avec un morceau de code
Essayez de trouver une solution. Si vous connaissez un moyen rapide de corriger les erreurs, comme retry Operation ou logout et re – logon, assurez – vous d’en faire mention dans l’alerte pour aider à corriger l’expérience utilisateur en temps réel. Pour les erreurs qui n’interfèrent pas avec l’expérience utilisateur quotidienne, envisagez de supprimer les alertes et d’enregistrer les erreurs sur le serveur distant pour résolution ultérieure. 5. Implémenter un Middleware (node.js) sur le noeud. L’environnement В prend en charge les intergiciels pour ajouter des fonctionnalités aux applications serveur. Vous pouvez utiliser cette fonctionnalité pour créer un Middleware de gestion des erreurs pour le serveur. Le plus grand avantage de l’utilisation d’un Middleware est que toutes les erreurs sont traitées en un seul endroit. Pour faciliter les tests, vous pouvez choisir d’activer \/ désactiver ce paramètre. Voici comment créer un Middleware de base: Const logerror = err = {console.log (\
Ou perte de mémoire. La meilleure façon de les gérer est de planter l’application en utilisant le mode cluster de noeuds pour redémarrer gracieusement l’application. Outils uniques tels que JS ou pm2. Cela garantit que l’application ne s’écrase pas en raison des actions de l’utilisateur, ce qui rend une mauvaise expérience utilisateur. Saisissez toutes les exceptions non détectées (node.js). Vous ne serez jamais en mesure de déterminer si vous avez masqué toutes les erreurs possibles dans votre application. Par conséquent, une politique de repli doit être mise en œuvre pour détecter toutes les exceptions qui ne sont pas détectées par la demande. Vous pouvez le faire: le processus. Sur (‘uncaughtexception’, Error = > {console.log (\