lajax
v1.1.6
log + ajax, solução de registro front-end.
lajax tenta resolver estes problemas:
Não há logs no front-end ou há logs, mas não há persistência, dificultando o rastreamento e a análise de problemas online;
Mesmo que uma biblioteca de log front-end seja usada, ela geralmente depende dos desenvolvedores para registrar manualmente os logs, o que não é confiável;
Exceções não detectadas em ambientes de produção são frequentemente ignoradas;
O navegador móvel não consegue ver os logs impressos pelo console . No passado, alert ou vConsole costumavam ser usados para localizar o problema, mas a desvantagem é que o código-fonte precisa ser modificado especificamente para essa finalidade;
Para páginas da web geradas dinamicamente pelo servidor, os logs originais do servidor do sistema não podem ser correlacionados com os logs front-end.
Características
Exemplo on-line
início rápido
API
Formato de registro
ID da solicitação
Exemplo de servidor
teste
licença
Registre logs manualmente, suportando 3 níveis de log: info , warn e error ;
O log será impresso no console do navegador em formato otimizado;
Registra automaticamente erros de script não detectados;
Registrar automaticamente exceções do Promise não capturadas;
Registrar automaticamente o início e a conclusão de solicitações ajax;
Gere automaticamente IDs de solicitação para facilitar a localização e correlação de logs;
Os logs serão enviados regularmente em lotes para o servidor de log configurado;
Boa compatibilidade e mecanismo de tratamento de exceções.
http://eshengsky.github.io/lajax/
> npm install lajaxscript para apresentar < script src =" ./dist/build.min.js " > </ script > import Lajax from './src/lajax-module' ; // 传入接口服务器地址进行实例化
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;
// 记录一条信息日志
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ;
// 记录一条警告日志
logger . warn ( '这是一条警告日志！' ) ;
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}Consulte a API para obter documentação detalhada.
Lajax usa sintaxe ES2015 e precisa ser empacotado usando webpack + babel.
> npm install > webpack O diretório do arquivo empacotado é ./dist , onde build.js é a versão descompactada e build.min.js é a versão compactada.
Inicialize o plug-in e retorne uma instância do plug-in.
Options : string ou objeto. Se uma string for passada, ela será considerada o endereço do servidor de log:
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;Se você quiser personalizar alguma configuração, passe um objeto:
const logger = new Lajax ( {
url : 'https://path/to/your/log/server' ,
interval : 5000
} ) ;Todas as propriedades suportadas pelo objeto são as seguintes:
| nome do atributo | ilustrar | tipo de valor | valor padrão |
|---|---|---|---|
| url | URL do servidor de log | corda | nulo |
| autoLogError | Se deve registrar automaticamente erros não detectados | booleano | verdadeiro |
| autoLogRejection | Se os erros do Promise devem ser registrados automaticamente | booleano | verdadeiro |
| autoLogAjax | Se deve registrar automaticamente solicitações ajax | booleano | verdadeiro |
| logAjaxFilter | Ajax registra automaticamente a função de filtragem condicional. Os parâmetros passados pela função são a URL e o método da solicitação. Se verdadeiro for retornado, significa registrar o log e falso significa não registrar o log. | função | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| estilizar | Se deve formatar o conteúdo impresso pelo console | booleano | verdadeiro |
| showDesc | Se serão exibidas informações de descrição (impressas no console quando a inicialização for concluída) | booleano | verdadeiro |
| customDesc | Uma função que gera informações de descrição personalizada. Os parâmetros passados são o número de logs não enviados antes da última página ser descarregada, o ID da solicitação atual, se o ID da solicitação vem do servidor e uma string é retornada. | função | /**
* @param {number} lastUnsend - 上次页面卸载前未发送的日志数
* @param {string} reqId - 请求id
* @param {boolean} idFromServer - 请求id是否来自服务器
*/
function ( lastUnsend , reqId , idFromServer ) {
return ` lajax 前端日志模块加载完成。
自动记录页面错误： ${ this . autoLogError ? '✔' : '✘' }
自动记录Promise异常： ${ this . autoLogRejection ? '✔' : '✘' }
自动记录Ajax请求： ${ this . autoLogAjax ? '✔' : '✘' }
当前页面请求id： ${ reqId } ${ idFromServer
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| intervalo | O intervalo entre o envio de logs ao servidor (milissegundos) | número | 10.000 |
| maxErrorReq | O número máximo de erros consecutivos ao enviar solicitações de log. Se esse número for excedido, a solicitação não será mais enviada (mas ainda será registrada na fila). | número | 5 |
O método de instância registra um log de informações e pode passar qualquer tipo e número de parâmetros.
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ; Método de instância, igual a info .
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;Método de instância, registra um log de aviso, pode passar qualquer tipo e qualquer número de parâmetros.
logger . warn ( '这是一条警告日志！' ) ;O método de instância registra um log de erros e pode passar qualquer tipo e número de parâmetros.
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}Atributo do tipo array, a fila de log atual a ser enviada.
logger . queueAtributo de tipo string, ID de solicitação da página atual.
logger . reqIdatributo de tipo booleano, se o ID da solicitação é gerado pelo servidor.
logger . idFromServerObjeto estático, enumeração de cores do log Se desejar personalizar a cor do log, você pode modificar as propriedades do objeto antes de chamar o método da instância. Objeto padrão:
Lajax . colorEnum = {
/**
* 信息日志颜色，默认宝蓝色
*/
info : 'DodgerBlue' ,
/**
* 警告日志颜色，默认橘黄色
*/
warn : 'orange' ,
/**
* 错误日志颜色，默认红色
*/
error : 'red' ,
/**
* ajax分组颜色，默认紫色
*/
ajaxGroup : '#800080' ,
/**
* 日志发送成功颜色，默认绿色
*/
sendSuccess : 'green' ,
/**
* 描述文字颜色，默认粉红色
*/
desc : '#d30775' ,
} O log enviado ao servidor através de ajax deve ser um array não vazio. 2 registros são registrados aqui ao mesmo tempo:
logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;Os dados de registro reais enviados serão os seguintes:
[{
"time" : " 2017-08-23 16:35:01.989 " ,
"level" : " info " ,
"messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条info日志" , " Hello " , " lajax " ],
"url" : " http://127.0.0.1:5500/demo/index.html " ,
"agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 "
}, {
"time" : " 2017-08-23 16:35:02.369 " ,
"level" : " warn " ,
"messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条warn日志" ],
"url" : " http://127.0.0.1:5500/demo/index.html " ,
"agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 "
}]Descrição de cada campo:
time : string, a hora deste registro de log
level : string, o nível do log, que é dividido em três tipos: info , warn e error .
messages : array. O primeiro elemento do array é o ID de solicitação exclusivo entre colchetes. Todos os elementos subsequentes correspondem ao conteúdo do log transmitido chamando logger[level]
url : string, a URL da página onde o log está localizado
agent : string, o agente do usuário da página onde o log está localizado
Cada log enviado ao servidor contém um ID de solicitação. Na mesma solicitação, os IDs de solicitação de todos os logs devem ser iguais; em solicitações diferentes, os IDs de solicitação dos logs registrados devem ser diferentes;
Por exemplo: Quando o usuário A acessou index.html, o lajax registrou e enviou 10 logs, e os IDs de solicitação desses 10 logs foram os mesmos. O usuário B também visitou a página, e também gerou 10 logs, e os IDs de solicitação desses logs; foram Deve ser igual, mas diferente do ID de solicitação do usuário A.
O objetivo principal do ID de solicitação: permite localizar com precisão todos os logs relacionados durante uma determinada solicitação no lado do servidor.
Geração e envio do id da solicitação:
Se sua página for gerada dinamicamente no lado do servidor e você quiser conectar os logs do lado do servidor aos logs do front-end, poderá gerar um ID de solicitação no lado do servidor e enviá-lo para o front-end. Lajax tentará sucessivamente encontrar o ID da solicitação no conteúdo <meta name="_reqId" content="xxxx-xxx"> da página ou window._reqId ;
Se a pesquisa acima falhar, sua página será considerada uma página de front-end pura. O Lajax gerará um ID exclusivo baseado em tempo como o ID da solicitação durante a inicialização. Antes de a página ser descarregada, todos os logs conterão esse ID de solicitação.
Para solicitações ajax monitoradas, o ID da solicitação acima será adicionado ao cabeçalho da solicitação X-Request-Id . Você pode registrar o ID da solicitação no log do servidor para correlação.
No diretório ./demo , um exemplo simples de servidor de log server.js baseado em node.js está incluído.
Inicie o servidor de log:
> node server.jsA interface de log é executada em http://127.0.0.1:2017/log Ao testar localmente, defina os parâmetros de inicialização do Lajax para este endereço:
const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;Este servidor de exemplo suporta solicitações de domínio cruzado ajax :)
Acesse a página ./test/index.html localmente para executar o teste.
A Licença MIT (MIT)
Direitos autorais (c) 2017 Sun Zhenghua
É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar , publicar, distribuir, sublicenciar e/ou vender cópias do Software e permitir que as pessoas a quem o Software seja fornecido o façam, sujeito às seguintes condições:
O aviso de direitos autorais acima e este aviso de permissão serão incluídos em todas as cópias ou partes substanciais do Software.
O SOFTWARE É FORNECIDO "NO ESTADO EM QUE SE ENCONTRA", SEM GARANTIA DE QUALQUER TIPO, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM DETERMINADO FIM E NÃO VIOLAÇÃO EM NENHUM CASO OS AUTORES OU DETENTORES DE DIREITOS AUTORAIS SERÃO RESPONSÁVEIS POR QUALQUER HIPÓTESE. RECLAMAÇÃO, DANOS OU OUTROS RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.
