web monitoring

Monitoramento da Web

[Lista de funções]

• Permita que os usuários criem vários sites de monitoramento
• Estatísticas do acesso ao usuário de diferentes dimensões
• Tempo de consulta personalizado
• Vários diagramas
• Suporta relatórios personalizados (erros JS, solicitações de API, informações de desempenho)
• Rastreamento de caminho de acesso ao usuário
• Limite personalizado (usuário registrado)
• Função automática de alarme, envie o lembrete de e -mail do alarme (usuário registrado)

---

[Suporte técnico]

• Front-end: angular5+, design de formigas
• Back -end: NodeJS+Express
• Banco de dados: Mongoose+MongoDB
• Docker: Implantação de um clique do ambiente Docker

---

A plataforma de monitoramento front-end concentra-se no monitoramento de dados da Web Experience. Três aspectos do monitoramento da saúde de uma página da web:

• Velocidade de abertura da página (medição de velocidade)
• Estabilidade da página (erro JS)
• Taxa de sucesso de chamada de serviço externo (API)

Em seguida, analise a experiência do usuário de diferentes latitudes.

• Visite a página
• Velocidade de acesso
• Solicitação da API
• geografia
• terminal

Consulte:

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

Monitoramento front-end da Alibaba Cloud

Velocidade de abertura da página

Os dados demorados na rede podem ser obtidos com a interface de tempo de navegação acima mencionada. Da mesma forma, o tempo de recurso pode obter o carregamento demorado de todos os recursos estáticos da página. Através dessa interface, você pode obter facilmente DNS, TCP, primeiro byte, transmissão HTML e outros demorados. O diagrama de interface do tempo de navegação é o seguinte:

Solicitação da API

Por padrão, o XMLHTTP é usado para interceptar as solicitações do usuário e, depois que a solicitação for bem -sucedida/falhada, conte o tempo e relate a solicitação. Os usuários podem relatar manualmente usando ** __ ml.api (API, sucesso, tempo, código, msg) **.

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

Erro js

Por padrão, o Window.onerror é usado para ouvir scripts de erro do usuário e relatá -los automaticamente. Algumas estruturas front-end usadas pelos usuários capturarão erros de JS e a mensagem de erro não será lançada no Window.onerror. Esta situação exige que o usuário chame manualmente. Por exemplo, no Angular2+, ligue ** __ ml.error (ErrorObj) ** onde sua estrutura captura globalmente erros

  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 { }

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

Como usar (fácil !!!)

Endereço da página da web: Web-monitor

Etapa 1: Crie um site no site de monitoramento.

Etapa 2: Copie as sondas na configuração do aplicativo para a página Site (index.html) que você precisa monitorar. A missão está feita!

Suporte de colaborador

Seu apoio é nossa maior motivação para avançar.

Alipay:

WeChat: