Techniques de surveillance et de journalisation des erreurs en JavaScript

La surveillance et la journalisation des erreurs JavaScript sont essentielles au maintien de la stabilité et des performances des applications. Dans cet article, nous explorerons des techniques avancées qui peuvent vous aider à surveiller et enregistrer efficacement les erreurs dans votre code JavaScript. Nous couvrirons les gestionnaires d'erreurs globaux, les blocs try/catch, les traces de pile, les bibliothèques de journalisation, les classes d'erreurs personnalisées, les rapports et notifications d'erreurs, ainsi que le suivi des erreurs en production.

Gestionnaire d'erreurs global

Les gestionnaires d'erreurs globaux vous permettent de détecter et de gérer les erreurs qui se produisent pendant l'exécution de votre application JavaScript. En tirant parti de window.onerror et window.onunhandledrejection, vous pouvez enregistrer ou signaler les erreurs et les exceptions.

Exemple

window.onerror = function(message, url, line, column, error) {
   console.error("An error occurred:", message);
   console.error("URL:", url);
   console.error("Line:", line);
   console.error("Column:", column);
   console.error("Error object:", error);
};

window.onunhandledrejection = function(event) {
   console.error("Unhandled promise rejection:", event.reason);
};

Instructions

Le code fourni définit un gestionnaire d'erreurs global en JavaScript. window.onerror détecte les erreurs non gérées et enregistre le message d'erreur, l'URL du script, les numéros de ligne et de colonne et l'objet d'erreur. window.onunhandledrejection capture les rejets de promesse non gérés et enregistre la raison du rejet. Ces gestionnaires aident à identifier et à enregistrer les erreurs qui se produisent lors de l'exécution de la page Web.

Sortie

An error occurred: ReferenceError: someVariable is not defined
URL: https://example.com/js/app.js
Line: 42
Column: 15
Error object: ReferenceError: someVariable is not defined

Essayer/attraper des blocs

L'utilisation de blocs try/catch vous permet de gérer des exceptions spécifiques et de récupérer gracieusement des erreurs qui pourraient survenir dans un bloc de code.

Exemple

try {
   // Code that might throw an error
   const result = someFunction();
   console.log("Result:", result);
} catch (error) {
   console.error("An error occurred:", error);
}

Instructions

Le code fourni utilise des blocs try/catch pour gérer les erreurs potentielles en JavaScript. Le bloc try contient du code qui peut générer une erreur, et si une erreur se produit, le bloc catch est exécuté, qui enregistre le message d'erreur à l'aide de console.error().

Sortie

An error occurred: TypeError: someFunction is not a function

Traçage de la pile

Les traces de pile fournissent des informations précieuses sur la séquence d'appels de fonction qui ont provoqué l'erreur. Ils aident à comprendre la source des erreurs et à diagnostiquer efficacement les problèmes.

Exemple

function foo() {
   bar();
}

function bar() {
   throw new Error("Something went wrong");
}

try {
   foo();
} catch (error) {
   console.error("Error stack trace:", error.stack);
}

Instructions

Le code définit deux fonctions : foo() et bar(). Lorsque foo() est appelé, il appelle bar(), qui génère intentionnellement une erreur en utilisant throw new Error().

Le code est contenu dans un bloc try/catch. Lorsqu'une erreur est générée à l'intérieur du bloc try, le bloc catch détecte l'erreur et stocke l'objet d'erreur dans la variable d'erreur.

Le bloc

catch enregistre la trace de pile de l'erreur à l'aide des propriétés console.error() et error.stack.

Sortie

Error stack trace: Error: Something went wrong
   at bar (script.js:5:9)
   at foo (script.js:2:3)
   at script.js:10:3

Bibliothèque de disques

Les bibliothèques de journalisation telles que Sentry, Rollbar et LogRocket offrent des capacités avancées de surveillance des erreurs. Ils simplifient le suivi des erreurs, l'agrégation et le reporting, et fournissent souvent une intégration avec des frameworks et des services.

Exemple

// Using Sentry logging library
Sentry.init({
   dsn: 'your-sentry-dsn',
   // Other configuration options
});

try {
   // Code that might throw an error
} catch (error) {
   Sentry.captureException(error);
}

Instructions

Le code initialise la bibliothèque de journaux Sentry et configure la capture des erreurs. Dans le bloc try, vous pouvez placer du code susceptible de générer des erreurs. Si une erreur se produit, le bloc catch utilise Sentry.captureException() pour envoyer l'erreur à Sentry pour enregistrement et analyse.

Classe d'erreur personnalisée

L'extension de la classe Error intégrée vous permet de créer des classes d'erreur personnalisées avec des propriétés et des méthodes supplémentaires. Cela rend la gestion des erreurs plus informative et plus facile.

Exemple

Considérez le code ci-dessous.

class MyCustomError extends Error {
   constructor(message, customProperty) {
      super(message);
      this.customProperty = customProperty;
   }
}

try {
   throw new MyCustomError("Something went wrong.", "Custom data");
} catch (error) {
   console.error("Custom property:", error.customProperty);
}

Instructions

Ce code définit une classe d'erreur personnalisée MyCustomError qui étend Error. À l'intérieur du bloc try, il génère une instance MyCustomError avec un message d'erreur spécifique et des propriétés personnalisées. Dans le bloc catch, il enregistre les propriétés personnalisées de l'objet d'erreur intercepté.

Sortie

Custom property: Custom data

Rapports de bugs et notifications

Intégrez votre système de surveillance des erreurs à des services de notification tels que des plateformes de courrier électronique ou de chat pour recevoir des alertes en temps réel lorsque des erreurs critiques se produisent.

Exemple

Considérez le code ci-dessous.

function sendErrorNotification(error) {
   // Code to send an error notification via email or chat
}

try {
   // Code that might throw an error
} catch (error) {
   sendErrorNotification(error);
}

Instructions

Le code définit une fonction sendErrorNotification() qui accepte un paramètre d'erreur et contient la logique pour envoyer une notification d'erreur, par exemple par e-mail ou par chat.

Dans un bloc try, vous pouvez placer du code susceptible de générer une erreur. Si une erreur se produit, le bloc catch est exécuté et la fonction sendErrorNotification() est appelée avec l'objet d'erreur comme paramètre pour déclencher le processus de notification d'erreur.

Ce code montre comment gérer les erreurs en appelant une fonction personnalisée pour envoyer une notification d'erreur lorsqu'une erreur se produit dans un bloc try. Il permet une notification et une réponse proactives aux erreurs, aidant ainsi à dépanner et à résoudre les problèmes rapidement.

Conclusion

Des techniques efficaces de surveillance et de journalisation des erreurs sont essentielles au maintien de la stabilité et des performances des applications JavaScript. Vous pouvez détecter, diagnostiquer et résoudre les problèmes plus efficacement en tirant parti des gestionnaires d'erreurs globaux, des blocs try/catch, des traces de pile, des bibliothèques de journalisation, des classes d'erreurs personnalisées, des rapports et notifications d'erreurs et du suivi des erreurs en production. N'oubliez pas de trouver un équilibre entre les détails de journalisation et la sensibilité des données, et examinez régulièrement les journaux pour maintenir et améliorer de manière proactive votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!