Qu'est-ce que la journalisation et la surveillance du frontend

Le frontal nécessite des journaux et une surveillance car son environnement de fonctionnement est complexe et modifiable, et il est difficile de reproduire des problèmes. Les journaux peuvent rapidement localiser les problèmes et optimiser l'expérience. 1. Les types de journaux communs incluent les journaux d'erreur (rapport d'erreur JS, défaillance de chargement des ressources), les journaux de comportement (chemin de fonctionnement de l'utilisateur), les journaux de performances (temps de chargement, FP, FCP) et les journaux personnalisés (point commercial). 2. Les étapes pour implémenter la surveillance frontale comprennent la capture d'exceptions, la collecte de données de performance, les journaux de rapports, la gestion et l'affichage centralisés, et il est recommandé d'apporter un identifiant unique pour suivre les processus utilisateur. 3. Dans une utilisation réelle, vous devez faire attention pour éviter la sur-collection, la protection de la vie privée, une désagrégation incorrecte et la combinaison du sourceMAP pour analyser les informations de pile pour localiser avec précision les problèmes.

Les journaux frontaux et la surveillance sont simplement d'enregistrer les données comportementales des utilisateurs lors de l'utilisation de pages Web ou d'applications, et d'observer l'état de fonctionnement frontal en temps réel pour aider les développeurs à découvrir rapidement des problèmes et à optimiser leur expérience. Il ne se concentre pas sur le serveur comme le backend, mais fait face à l'environnement client en constante évolution et nécessite des stratégies plus méticuleuses.

Pourquoi le frontal a-t-il besoin de journaux et de surveillance?

Le frontal s'exécute dans le navigateur de l'utilisateur, et l'environnement est complexe et modifiable: différents appareils, conditions de réseau, versions de navigateur et même des habitudes de fonctionnement de l'utilisateur peuvent causer des problèmes. De nombreuses erreurs ne se produisent que dans des scénarios spécifiques et sont difficiles à reproduire. Pour le moment, grâce au système de collecte et de surveillance des journaux, vous pouvez savoir "ce qui a mal tourné", "qui a rencontré le problème" et "quand cela s'est produit" dès que possible.

Par exemple, des problèmes communs tels que l'écran blanc sur la page, aucune réponse aux clics du bouton et l'échec de l'interface. Si vous ne le surveillez pas, vous ne pouvez compter que sur les commentaires des utilisateurs, ce qui est inefficace et facile à manquer. Avec la surveillance frontale, ces problèmes peuvent être automatiquement enregistrés et alarmés en arrière-plan, améliorant considérablement l'efficacité d'inspection.

Quels sont les types de journaux communs?

1. Journaux d'erreur
   Y compris les erreurs JavaScript (telles que non apparition), l'échec du chargement des ressources (404, délai d'attente), l'exception de promesse, etc. Ces informations peuvent vous dire si le code est exécuté normalement du côté utilisateur.

2. Journaux de comportement de l'utilisateur
   Enregistrez le chemin de fonctionnement de l'utilisateur, tel que le bouton a été cliqué, quelles pages ont été visitées, et l'heure du séjour, etc. Ceci est utile pour l'analyse des produits et l'optimisation de l'expérience utilisateur.

3. Journaux de performance
   Par exemple, le premier temps de chargement d'écran, le temps de chargement des ressources, FP (première peinture), FCP (première peinture contente) et autres indicateurs. Aide à découvrir les raisons du bégaiement de la page.

4. Journaux personnalisés
   Les développeurs enterrent activement les points en fonction des besoins de l'entreprise, tels que le nombre de fois qu'une certaine fonction a été appelée, que l'utilisateur ait terminé un certain processus, etc.

Comment implémenter la surveillance frontale?

La mise en œuvre de la surveillance frontale comprend généralement les étapes suivantes:

• Catch Exception
  Utilisez window.onerror , window.onunhandledrejection , console.error , etc. Pour écouter les erreurs globales.

• Acquisition de données de performance
  Utilisez performance.timing ou PerformanceObserver pour obtenir le temps pour chaque phase du chargement de la page.

• RAPPORT LOG
  Généralement, les journaux sont envoyés au serveur via API fetch ou Beacon API , et veillez à ne pas affecter les performances de la page.

• Gestion et affichage centralisés
  Vous pouvez accéder à des outils tiers tels que Sentry, Datadog, New Relic ou créer votre propre plate-forme de journalisation (Elk, Prometheus Grafana, etc.).

Un petit détail est qu'il est préférable d'apporter un identifiant unique (tel que l'ID de session ou l'ID de trace) lors de la signalement du journal, afin qu'un utilisateur puisse suivre le processus complet de la saisie de la page à une erreur.

À quoi dois-je faire attention à une utilisation réelle?

1. Ne pas sur-collecter
   Des journaux trop détaillés occuperont la bande passante et peuvent également entraîner des problèmes de confidentialité. Il est recommandé de définir le taux d'échantillonnage, tel que la collecte de 10% des journaux utilisateur.

2. Considérez la conformité à la confidentialité
   N'enregistrez pas d'informations sensibles, telles que les mots de passe, les numéros de téléphone mobile, les adresses, etc. Si c'est pour les utilisateurs étrangers, il doit également se conformer au RGPD, au CCPA et à d'autres réglementations.

3. Déduplication et agrégation d'erreur
   La même erreur peut être signalée à plusieurs reprises et l'agrégation doit être effectuée du côté du serveur pour éviter d'inonder l'écran.

4. Combiné avec SourceMap pour analyser la pile
   Une fois le code frontal compressé, le numéro de ligne et le nom de la fonction dans le message d'erreur peuvent être inexacts. Avec le fichier de carte source, l'erreur peut être restaurée à l'emplacement du code d'origine pour un positionnement facile.

Fondamentalement, c'est tout. L'enregistrement et la surveillance frontale ne semblent pas compliqués, mais il est facile d'ignorer les détails dans les projets réels, ce qui entraîne des informations insuffisantes ou une redondance excessive. Ce n'est qu'en concevant rationnellement la stratégie de collecte qu'il peut vraiment exercer sa valeur.

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!