Développer un outil de rapport d'erreurs javascript

Préface

Dans le développement front-end, le rapport d'erreurs est un problème courant et important. Lorsqu'un utilisateur rencontre une erreur, nous devons collecter les informations sur l'erreur et les signaler au serveur ou à la plateforme tierce. S'il n'y a pas de rapport d'erreur, nous ne serons pas en mesure de localiser le problème et d'effectuer les réparations en temps opportun.

Cet article expliquera comment développer un outil de rapport d'erreurs basé sur JavaScript afin que nous puissions rapidement découvrir et résoudre les problèmes pendant le processus de développement.

Première étape : Collecte des informations sur les erreurs

Il existe généralement deux types d'erreurs frontales : les erreurs JavaScript et les erreurs de ressources. Les erreurs JavaScript font généralement référence à des erreurs de syntaxe ou à des erreurs d'exécution. Les erreurs de ressources incluent l’échec du chargement, l’échec de la demande réseau, etc.

1. Collecte des erreurs JavaScript

Pour collecter les erreurs JavaScript, nous devons lier l'événement d'erreur sur l'objet fenêtre et collecter les informations d'erreur. L'événement d'erreur a généralement trois attributs : message, filename et lineno :

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

Cet événement sera déclenché lorsque JavaScript sur une page lèvera une exception non interceptée. Dans ce gestionnaire d'événements, nous pouvons imprimer des informations sur le message d'erreur sur la console et les signaler au serveur ou à la plateforme tierce.

2. Collection des erreurs de ressources

Pour collecter les erreurs de ressources, nous devons lier l'événement d'erreur sur l'objet fenêtre et collecter les informations sur les ressources. Habituellement, lorsqu'une erreur de ressource se produit, nous recevons un événement d'échec de chargement. Cet événement peut être capturé en liant l'événement d'erreur à l'objet window :

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

Ce gestionnaire d'événements sera déclenché lorsqu'une ressource de la page ne parvient pas à se charger. Dans ce gestionnaire d'événements, nous pouvons imprimer les informations d'erreur sur la console et les signaler au serveur ou à la plate-forme tierce.

Étape deux : Signaler les informations sur les erreurs

Lorsque nous collectons des informations sur les erreurs, l'étape suivante consiste à les signaler au serveur ou à la plateforme tierce. Nous pouvons y parvenir via des requêtes Ajax, des objets Image ou en utilisant des bibliothèques tierces. Dans cet article, nous utiliserons la méthode de soumission de requêtes Ajax pour y parvenir.

1. Ajax request reporting

En supposant que nous utilisons la bibliothèque jQuery, nous pouvons utiliser le code suivant pour envoyer une demande de reporting au serveur : #🎜 🎜#

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

Rapport d'objet Image

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

Rapports de bibliothèques tierces

Sentry : un service de rapport d'erreurs open source qui fournit des fonctions de regroupement d'erreurs, d'interface Web, d'API et de SDK
•  ; # 🎜🎜#Bugsnag : Un outil de surveillance et de reporting des erreurs en temps réel qui détecte automatiquement les erreurs et fournit diverses fonctions telles que le suivi des erreurs, l'analyse des erreurs, etc.
• New Relic : un outil de surveillance des performances des applications ; , fournissant des fonctions de rapport d'erreurs, d'analyse et de localisation d'erreurs en temps réel.
• Les méthodes d'utilisation de ces bibliothèques sont similaires, il suffit de les configurer selon leurs directives de documentation.

Troisième étape : optimisation des performances

Une fois le développement de l'outil de rapport d'erreurs terminé, nous devons effectuer une optimisation des performances pour nous assurer que l'outil a moins d'impact sur les performances. du site Internet.

1. S'il y a plusieurs scripts JavaScript sur la page, lorsqu'une erreur se produit dans un script, nous devons signaler le message d'erreur au serveur. Si nous lions l'événement d'erreur dans chaque script, nous enverrons plusieurs requêtes. Afin de réduire le nombre de requêtes, nous pouvons combiner plusieurs messages d'erreur en une seule requête et utiliser Buffer pour la mise en cache.

2. Lorsque le trafic des pages est important, la quantité de données d'erreur signalées peut être très énorme. Afin d'éviter une charge excessive sur le serveur, nous pouvons introduire un mécanisme de rapport par échantillonnage et ne signaler qu'une partie des informations sur les erreurs. Par exemple, nous pouvons définir un taux de rapport d'erreurs et envoyer des informations sur les erreurs au serveur uniquement proportionnellement au taux de rapport d'erreurs.

3. Dans un environnement réseau à faible débit, les rapports d'erreurs auront un impact plus important sur les performances et peuvent même provoquer la page se bloque. Afin d'éviter que cette situation ne se produise, nous pouvons ajuster automatiquement le taux de rapport d'erreurs en fonction des conditions actuelles de l'environnement réseau. Par exemple, nous pouvons définir le taux de rapport d'erreurs à 100 % (c'est-à-dire tout signaler) en 4G et réduire le taux à 20 % en 2G.

Conclusion

Le développement d'outils de rapport d'erreurs JavaScript est très important pour les développeurs front-end. Cela peut nous aider à localiser et résoudre rapidement les problèmes et à améliorer l’expérience utilisateur. Dans cet article, nous expliquons des aspects tels que la collecte d'informations sur les erreurs, la génération de rapports sur les erreurs et l'optimisation des performances. J'espère que cet article vous aidera !

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!