lajax
v1.1.6
log + ajax, solution de journalisation frontale.
lajax tente de résoudre ces problèmes :
Il n'y a pas de journaux sur le front-end, ou il y a des journaux mais pas de persistance, ce qui rend difficile le traçage et l'analyse des problèmes en ligne ;
Même si une bibliothèque de journaux frontale est utilisée, elle dépend généralement des développeurs pour enregistrer manuellement les journaux, ce qui n'est pas fiable ;
Les exceptions non interceptées dans les environnements de production sont souvent ignorées ;
Le navigateur mobile ne peut pas voir les journaux imprimés par console . Dans le passé, alert ou vConsole étaient généralement utilisés pour localiser le problème, mais l'inconvénient est que le code source doit être modifié spécifiquement à cet effet ;
Pour les pages Web générées dynamiquement par le serveur, les journaux du serveur d'origine du système ne peuvent pas être corrélés avec les journaux front-end.
Caractéristiques
Exemple en ligne
démarrage rapide
API
Format du journal
demande d'identification
Exemple de serveur
test
licence
Enregistrez manuellement les journaux, prenant en charge 3 niveaux de journalisation : info , warn et error ;
Le journal sera imprimé dans la console du navigateur dans un format optimisé ;
Enregistrez automatiquement les erreurs de script non détectées ;
Enregistrez automatiquement les exceptions de promesse non interceptées ;
Enregistrez automatiquement le début et la fin des requêtes ajax ;
Générez automatiquement des ID de demande pour faciliter la localisation et la corrélation des journaux ;
Les journaux seront envoyés régulièrement par lots au serveur de journaux configuré ;
Bonne compatibilité et mécanisme de gestion des exceptions.
http://eshengsky.github.io/lajax/
> npm install lajaxscript pour introduire < 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 ) ;
}Veuillez consulter l'API pour une documentation détaillée.
Lajax utilise la syntaxe ES2015 et doit être empaqueté à l'aide de webpack + babel.
> npm install > webpack Le répertoire du fichier packagé est ./dist , où build.js est la version non compressée et build.min.js est la version compressée.
Initialisez le plug-in et renvoyez une instance du plug-in.
Options : chaîne ou objet. Si une chaîne est transmise, elle sera considérée comme l'adresse du serveur de journaux :
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;Si vous souhaitez personnaliser une configuration, veuillez transmettre un objet :
const logger = new Lajax ( {
url : 'https://path/to/your/log/server' ,
interval : 5000
} ) ;Toutes les propriétés prises en charge par l'objet sont les suivantes :
| nom d'attribut | illustrer | type de valeur | valeur par défaut |
|---|---|---|---|
| URL | URL du serveur de journalisation | chaîne | nul |
| erreur de journal automatique | S'il faut enregistrer automatiquement les erreurs non détectées | booléen | vrai |
| autoLogRejection | S'il faut enregistrer automatiquement les erreurs de promesse | booléen | vrai |
| autoLogAjax | S'il faut enregistrer automatiquement les requêtes ajax | booléen | vrai |
| logAjaxFilter | Ajax enregistre automatiquement la fonction de filtrage conditionnel. Les paramètres transmis par la fonction sont l'URL et la méthode de la requête. Si true est renvoyé, cela signifie enregistrer le journal et false signifie ne pas enregistrer le journal. | fonction | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| styliser | S'il faut formater le contenu imprimé par la console | booléen | vrai |
| showDesc | S'il faut afficher les informations de description (imprimées sur la console une fois l'initialisation terminée) | booléen | vrai |
| personnaliséDesc | Une fonction qui génère des informations de description personnalisées. Les paramètres transmis sont le nombre de journaux non envoyés avant le déchargement de la dernière page, l'ID de la demande actuelle, si l'ID de la demande provient du serveur et une chaîne est renvoyée. | fonction | /**
* @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
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| intervalle | L'intervalle entre l'envoi des journaux au serveur (millisecondes) | nombre | 10000 |
| maxErrorReq | Le nombre maximum d'erreurs consécutives lors de l'envoi de requêtes de log. Si ce nombre est dépassé, la requête ne sera plus envoyée (mais la requête sera toujours enregistrée dans la file d'attente). | nombre | 5 |
La méthode d'instance enregistre un journal d'informations et peut transmettre n'importe quel type et n'importe quel nombre de paramètres.
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ; Méthode d'instance, identique à info .
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;La méthode d'instance, enregistre un journal d'avertissement, peut transmettre n'importe quel type et n'importe quel nombre de paramètres.
logger . warn ( '这是一条警告日志！' ) ;La méthode d'instance enregistre un journal d'erreurs et peut transmettre n'importe quel type et n'importe quel nombre de paramètres.
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}Attribut de type tableau, la file d'attente de journaux actuelle à envoyer.
logger . queueAttribut de type chaîne, identifiant de demande de la page actuelle.
logger . reqIdAttribut de type booléen, indiquant si l'identifiant de la demande est généré par le serveur.
logger . idFromServerObjet statique, énumération des couleurs du journal Si vous souhaitez personnaliser la couleur du journal, vous pouvez modifier les propriétés de l'objet avant d'appeler la méthode d'instance. Objet par défaut :
Lajax . colorEnum = {
/**
* 信息日志颜色，默认宝蓝色
*/
info : 'DodgerBlue' ,
/**
* 警告日志颜色，默认橘黄色
*/
warn : 'orange' ,
/**
* 错误日志颜色，默认红色
*/
error : 'red' ,
/**
* ajax分组颜色，默认紫色
*/
ajaxGroup : '#800080' ,
/**
* 日志发送成功颜色，默认绿色
*/
sendSuccess : 'green' ,
/**
* 描述文字颜色，默认粉红色
*/
desc : '#d30775' ,
} Le journal envoyé au serveur via ajax doit être un tableau non vide. 2 journaux sont enregistrés ici en même temps :
logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;Les données de journal réelles envoyées seront les suivantes :
[{
"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 "
}]Description de chaque champ :
time : chaîne, l'heure de cet enregistrement de journal
level : chaîne, le niveau du journal, qui est divisé en trois types : info , warn et error .
messages : tableau. Le premier élément du tableau est l'identifiant de requête unique entouré d'accolades. Tous les éléments suivants correspondent au contenu du journal transmis en appelant logger[level]
url : string, l'URL de la page où se trouve le log
agent : string, l'agent utilisateur de la page où se trouve le log
Chaque journal envoyé au serveur contient un ID de demande. Dans la même requête, les ID de requête de tous les journaux doivent être les mêmes ; dans des requêtes différentes, les ID de requête des journaux enregistrés doivent être différents.
Par exemple : lorsque l'utilisateur A a accédé à index.html, lajax a enregistré et envoyé 10 journaux, et les ID de demande de ces 10 journaux étaient les mêmes ; l'utilisateur B a également visité la page et a également généré 10 journaux, ainsi que les ID de demande de ces journaux. was Il doit être identique, mais différent de l'identifiant de demande de l'utilisateur A.
L'objectif principal de l'ID de requête : vous permet de localiser avec précision tous les journaux associés lors d'une certaine requête côté serveur.
Génération et envoi de l'identifiant de la requête :
Si votre page est générée dynamiquement côté serveur et que vous souhaitez connecter les journaux côté serveur aux journaux front-end, vous pouvez générer un identifiant de demande côté serveur et l'envoyer au front-end. Lajax tentera successivement de trouver l'identifiant de la requête à partir du contenu <meta name="_reqId" content="xxxx-xxx"> de la page ou window._reqId ;
Si la recherche ci-dessus échoue, votre page est considérée comme une pure page frontale. Lajax générera un identifiant unique basé sur le temps comme identifiant de requête lors de l'initialisation. Avant le déchargement de la page, tous les journaux contiendront cet identifiant ;
Pour les requêtes ajax surveillées, l'identifiant de requête ci-dessus sera ajouté à l'en-tête de requête X-Request-Id . Vous pouvez enregistrer l'identifiant de requête dans le journal du serveur pour la corrélation.
Dans le répertoire ./demo , un simple exemple de serveur de journaux server.js basé sur node.js est inclus.
Démarrez le serveur de journaux :
> node server.jsL'interface de journal s'exécute sur http://127.0.0.1:2017/log Lors des tests locaux, définissez les paramètres d'initialisation de Lajax sur cette adresse :
const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;Cet exemple de serveur prend en charge les requêtes inter-domaines ajax :)
Accédez localement à la page ./test/index.html pour exécuter le test.
La licence MIT (MIT)
Copyright (c) 2017 Sun Zhenghua
L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :
L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.
LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE QUELQUE QUELCONQUE. RÉCLAMATION, DOMMAGES OU AUTRES RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES AFFAIRES DANS LE LOGICIEL.
