web monitoring

surveillance du Web

[Liste des fonctions]

• Permettre aux utilisateurs de créer plusieurs sites de surveillance
• Statistiques de l'accès des utilisateurs à partir de différentes dimensions
• Temps de requête personnalisé
• Divers diagrammes
• Prend en charge les rapports personnalisés (erreurs JS, requêtes API, informations sur les performances)
• Suivi du chemin d'accès des utilisateurs
• Seuil personnalisé (utilisateur enregistré)
• Fonction d'alarme automatique, envoyez un rappel par e-mail d'alarme (utilisateur enregistré)

---

[Support technique]

• Front-end: Angular5 +, fourmi-conception
• Backend: Nodejs + Express
• Base de données: Mongoose + MongoDB
• Docker: déploiement en un clic de l'environnement Docker

---

La plate-forme de surveillance frontale se concentre sur la surveillance des données de l'expérience Web. Trois aspects de la surveillance de la santé d'une page Web:

• Vitesse d'ouverture de page (mesure de la vitesse)
• Stabilité de la page (erreur JS)
• Taux de réussite des appels de service externe (API)

Analysez ensuite l'expérience utilisateur de différentes latitudes.

• Visitez la page
• Vitesse d'accès
• Demande API
• géographie
• Terminal

se référer à:

http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7 jours

Surveillance frontale du cloud Alibaba

Vitesse d'ouverture de la page

Les données longues du réseau peuvent être obtenues avec l'interface de synchronisation de navigation susmentionnée. De même, le synchronisation des ressources peut obtenir le chargement long de toutes les ressources statiques sur la page. Grâce à cette interface, vous pouvez facilement obtenir DNS, TCP, premier octet, transmission HTML et autres chronophages. Le diagramme d'interface du synchronisation de la navigation est le suivant:

Demande API

Par défaut, XMLHTTP est utilisé pour intercepter les demandes des utilisateurs, et une fois la demande réussie / échouée, comptez l'heure et signalez la demande. Les utilisateurs peuvent se présenter manuellement en utilisant ** __ ml.api (API, succès, temps, code, msg) **.

 api:请求接口
 success:上传是否成功( true / false )
 time:耗时( ms )
 code:返回码
 msg:消息( string / object )

Erreur JS

Par défaut, Window.onerror est utilisé pour écouter les scripts d'erreur utilisateur et les signaler automatiquement. Certains frameworks frontaux utilisés par les utilisateurs attraperont des erreurs JS, et le message d'erreur ne sera pas jeté dans Window.onerror. Cette situation oblige l'utilisateur à l'appeler manuellement. Par exemple dans angular2 +, appelez ** __ ml.error (errorObj) ** où votre framework attrape globalement les erreurs

  export class MyErrorHandler implements ErrorHandler {
      handleError ( error ) {
        console . error ( error ) ;
        window . __ml && window . __ml . error && window . __ml . error ( error . stack ||     error ) ;
      }
    }
    @ NgModule ( {
      declarations : [ ] ,
      imports : [ ] ,
      providers : [ { provide : ErrorHandler , useClass : MyErrorHandler } ] ,
      bootstrap : [ ]
    } )
    export class AppModule { }

En Vue:

 import Vue from 'vue'
const errorHandler = ( error , vm ) => {
 console . error ( error ) ;
 window . __ml && window . __ml . error && window . __ml . error ( error ) ;
}
Vue . config . errorHandler = errorHandler ;
Vue . prototype . $throw = ( error ) => errorHandler ( error , this ) ;

Comment utiliser (facile !!!)

Adresse de la page Web: Web-moniteur

Étape 1: Créez un site dans le site de surveillance.

Étape 2: Copiez les sondes dans la configuration de l'application sur la page Site (index.html) que vous devez surveiller. La mission est terminée!

Support des contributeurs

Votre soutien est notre plus grande motivation pour aller de l'avant.

Alipay:

WeChat: