Le c?ur de la surveillance des erreurs et de la journalisation frontale consiste à découvrir et à localiser les problèmes dès que possible, et à éviter les plaintes des utilisateurs avant de les conna?tre. 1. La capture d'erreur de base nécessite l'utilisation de Window.onerror et Window.onUnHeledRejection pour capter les exceptions JS et promettre des erreurs; 2. Lors de la sélection du système de rapport d'erreur, donnez la priorité à des outils tels que Sentry, Logrocket, BugsNag et faites attention à la prise en charge de la carte source, aux fonctions de suivi du comportement des utilisateurs et de groupes de statistiques; 3. Le contenu signalé doit inclure des informations sur le navigateur, une URL de page, une pile d'erreur, un ID utilisateur et des informations de défaillance de la demande du réseau; 4. Contr?lez la fréquence des journaux pour éviter l'explosion des journaux grace à des stratégies telles que la déduplication, la limitation actuelle et les rapports hiérarchiques.

La surveillance et la journalisation des erreurs frontales, pour le dire franchement, vous faites savoir qu'il y a un problème avec l'utilisateur sur le site Web dès que possible et peut trouver la cause. N'attendez pas que l'utilisateur vient vous plaindre avant de savoir que la page est bloquée ou qu'une fonction ne fonctionne pas. Ce n'est en fait pas difficile à faire, mais beaucoup de gens n'y ont pas fait attention au début, mais plus tard, ils ont trouvé des regrets après avoir marché sur la fosse.

Les instructions suivantes sont ce à quoi vous devez prêter attention lors de la construction ou de l'optimisation de la surveillance des erreurs frontales.

1. Erreur de base attraper: ne manquez pas les exceptions JS

Les erreurs d'exécution JavaScript sont le problème frontal le plus courant. Vous pouvez utiliser window.onerror ou window.addEventListener('error') pour écouter les erreurs globales. Par exemple:

 window.onError = fonction (message, source, lineno, colno, erreur) {
  Console.Error ('Erreur capturée:', message, erreur);
  // Envoyer à votre service de journal Retour True; // Bloquer le traitement par défaut};

De plus, les exceptions de la promesse ne peuvent pas être manquées. N'oubliez pas d'ajouter:

 window.onunHandleDrejection = Event => {
  Console.Error (?Rejection de promesse non perdue:?, Event.reason);
  event.PreventDefault ();
};

Ces méthodes de base peuvent vous aider à assister à la plupart des erreurs d'exécution, telles que la référence des variables non définies, n'ayant pas analysé JSON.

2. Comment choisir le système de signalement des erreurs?

Bien s?r, il est acceptable de configurer vous-même un service de collecte de journaux simples, mais la plupart des projets sont plus pratiques pour utiliser directement des solutions prêtes à l'emploi. Voici quelques options communes:

• Sentry : fonctions open source et complètes, prend en charge le décodage SourceMap et le code compressé, et peut également agréger les types d'erreur, adaptés aux projets moyens et grands.
• LOGROCKING : non seulement enregistre les erreurs, mais enregistre également les processus de fonctionnement des utilisateurs. Il est très utile pour la reproduction de problèmes, mais il est plus cher à payer.
• BugsNag : un outil de suivi des erreurs à l'ancienne, une intégration simple, adaptée aux applications de niveau d'entreprise.
• RAVEN.js (fusionné dans Sentry) : Si vous avez déjà utilisé Raven, vous pouvez directement passer à la SDK officielle de Sentry.

Lors du choix, nous examinons trois points: si la carte source est prise en charge, s'il y a le suivi du comportement des utilisateurs, et s'il peut être regroupé par navigateur / appareil.

3. Quelles informations doivent être incluses dans le contenu signalé?

Il ne suffit pas de savoir que l'erreur est signalée, mais vous devez savoir qui a causé le problème dans les circonstances. Il est recommandé d'apporter les informations suivantes chaque fois que vous signalez:

• IP utilisateur (facultatif, faites attention à la confidentialité)
• String UA du navigateur (reconna?t la version du navigateur, système d'exploitation)
• URL de la page (quelle page a le problème)
• Informations sur la pile d'erreur (trace de pile)
• Identité utilisateur actuelle (problème pour contacter ou localiser un compte spécifique)
• URL pour la demande de réseau échouée (s'il y a une erreur de récupération / xhr)

Certaines erreurs ne peuvent se produire que sur des appareils ou des réseaux spécifiques, et ces informations contextuelles peuvent considérablement améliorer l'efficacité du dépannage.

4. Que dois-je faire s'il y a trop de journaux? Le contr?le de la fréquence et de la déduplication sont essentiels

Une fois qu'il y a de nombreuses erreurs, le journal explosera. Surtout lorsqu'une certaine interface est suspendue, des milliers d'alarmes sont appelées en même temps. Pour le moment, vous devez ajouter quelques stratégies:

• La même erreur se produit à plusieurs reprises en peu de temps et n'est enregistrée qu'une seule fois (sur la base du hachage de pile)
• Chaque utilisateur rapporte jusqu'à N erreurs par minute (empêche le rin?age d'écran)
• L'environnement de développement n'est pas signalé ou classé séparément
• Signaler uniquement des niveaux d'erreurs spécifiques (tels que l'avertissement et les erreurs, les informations ne se transmettent pas)

Ces paramètres peuvent généralement être effectués dans la configuration du client Sentry ou BugsNag.

Fondamentalement, c'est tout. La surveillance des erreurs avant ne semble pas compliquée, mais il est facile d'ignorer les détails. Par exemple, le SOURCEMAP n'est pas téléchargé, ce qui fait que la pile ne peut pas comprendre, ou les informations du périphérique utilisateur ne sont pas enregistrées, ce qui rend difficile la reproduction du problème. Planifiez à l'avance et économisez beaucoup de problèmes au stade ultérieur.

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!