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
  }
});

En envoyant une requête POST, nous pouvons envoyer le message d'erreur au serveur sous forme de données. En arrière-plan, nous pouvons obtenir ces informations en analysant le corps de la requête pour localiser et réparer les erreurs.

Rapport d'objet Image

Si nous ne voulons pas utiliser de requêtes Ajax ou de bibliothèques jQuery, nous pouvons utiliser l'objet Image pour envoyer un Requête GET au serveur :

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);

L'inconvénient de cette méthode est que nous devons intégrer les informations d'erreur dans la chaîne de requête, ce qui peut entraîner le problème d'une URL trop longue.

Rapports de bibliothèques tierces

En plus de développer nous-mêmes des outils de rapport d'erreurs, nous pouvons également utiliser certaines bibliothèques tierces pour réaliser cela tâche. Parmi elles, certaines des bibliothèques de rapport d'erreurs les plus populaires incluent :

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.

Message d'erreur de fusion

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.

Rapports d'échantillonnage

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.

Rapports basés sur l'environnement réseau

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!