web monitoring

monitoreo web

[Lista de funciones]

• Permitir a los usuarios crear múltiples sitios de monitoreo
• Estadísticas de acceso a los usuarios desde diferentes dimensiones
• Tiempo de consulta personalizada
• Varios diagramas
• Admite informes personalizados (errores JS, solicitudes de API, información de rendimiento)
• Seguimiento de ruta de acceso de usuario
• Umbral personalizado (usuario registrado)
• Función de alarma automática, envíe recordatorio por correo electrónico de alarma (usuario registrado)

---

[Apoyo técnico]

• Front-end: Angular5+, Ant-Diseño
• Backend: NodeJS+Express
• Base de datos: Mongoose+MongoDB
• Docker: implementación de un solo clic en Docker Environment

---

La plataforma de monitoreo frontal se centra en el monitoreo de datos de la experiencia web. Tres aspectos del monitoreo de la salud de una página web:

• Velocidad de apertura de página (medición de velocidad)
• Estabilidad de la página (error JS)
• Tasa de éxito de llamadas de servicio externo (API)

Luego analice la experiencia del usuario de diferentes latitudes.

• Visite la página
• Velocidad de acceso
• Solicitud de API
• geografía
• Terminal

referirse a:

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

Monitoreo frontal de la nube de Alibaba

Velocidad de apertura de la página

Los datos que consumen el tiempo de red se pueden obtener con la interfaz de tiempo de navegación mencionada anteriormente. Del mismo modo, el tiempo de recursos puede obtener la carga que requiere mucho tiempo de todos los recursos estáticos en la página. A través de esta interfaz, puede obtener fácilmente DNS, TCP, First Byte, HTML Transmission y otro lento. El diagrama de interfaz del tiempo de navegación es el siguiente:

Solicitud de API

Por defecto, XMLHTTP se usa para interceptar las solicitudes de los usuarios, y después de que la solicitud sea exitosa/fallida, cuente el tiempo e informe la solicitud. Los usuarios pueden informar manualmente usando ** __ ml.api (API, éxito, tiempo, código, msg) **.

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

Error JS

De forma predeterminada, Window.oNerror se usa para escuchar los scripts de error del usuario e informarlos automáticamente. Algunos marcos front-end utilizados por los usuarios captarán errores JS, y el mensaje de error no se arrojará a Window. Esta situación requiere que el usuario lo llame manualmente. Por ejemplo, en Angular2+, llame ** __ ml.error (ErrorObj) ** donde su marco atrapa a nivel mundial los errores

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

Cómo usar (¡fácil!)

Dirección de la página web: monitor web

Paso 1: Cree un sitio en el sitio de monitoreo.

Paso 2: Copie las sondas en la configuración de la aplicación a la página Sitio (Index.html) que necesita monitorear. ¡La misión está hecha!

Apoyo al contribuyente

Su apoyo es nuestra mayor motivación para avanzar.

Alipay:

WeChat: