lajax
v1.1.6
log + Ajax, Front-End-Protokollierungslösung.
lajax versucht, diese Probleme zu lösen:
Es gibt keine Protokolle im Frontend oder es gibt Protokolle, aber keine Persistenz, was es schwierig macht, Online-Probleme zu verfolgen und zu analysieren;
Selbst wenn eine Front-End-Protokollbibliothek verwendet wird, ist sie normalerweise darauf angewiesen, dass Entwickler Protokolle manuell aufzeichnen, was unzuverlässig ist.
Nicht abgefangene Ausnahmen in Produktionsumgebungen werden oft ignoriert;
Der mobile Browser kann die von console gedruckten Protokolle nicht sehen. In der Vergangenheit wurde normalerweise alert oder vConsole verwendet, um das Problem zu lokalisieren. Der Nachteil besteht jedoch darin, dass der Quellcode speziell für diesen Zweck geändert werden muss.
Bei vom Server dynamisch generierten Webseiten können die ursprünglichen Serverprotokolle des Systems nicht mit den Front-End-Protokollen korreliert werden.
Merkmale
Online-Beispiel
Schnellstart
API
Protokollformat
Anfrage-ID
Serverbeispiel
prüfen
Lizenz
Zeichnen Sie Protokolle manuell auf und unterstützen Sie dabei drei Protokollebenen: info , warn und error .
Das Protokoll wird in einem optimierten Format in der Browserkonsole gedruckt;
Nicht erfasste Skriptfehler automatisch protokollieren;
Nicht abgefangene Promise-Ausnahmen automatisch protokollieren;
Den Start und Abschluss von Ajax-Anfragen automatisch aufzeichnen;
Generieren Sie automatisch Anforderungs-IDs, um die Lokalisierung und Korrelation von Protokollen zu erleichtern.
Protokolle werden regelmäßig stapelweise an den konfigurierten Protokollserver gesendet.
Gute Kompatibilität und Mechanismus zur Ausnahmebehandlung.
http://eshengsky.github.io/lajax/
> npm install lajaxscript Tag verwenden < 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 ) ;
}Eine ausführliche Dokumentation finden Sie in der API.
Lajax verwendet die ES2015-Syntax und muss mit Webpack + Babel gepackt werden.
> npm install > webpack Das Verzeichnis der gepackten Dateien ist ./dist , wobei build.js die unkomprimierte Version und build.min.js die komprimierte Version ist.
Initialisieren Sie das Plug-in und geben Sie eine Instanz des Plug-ins zurück.
Options : Zeichenfolge oder Objekt. Wenn eine Zeichenfolge übergeben wird, wird diese als Protokollserveradresse betrachtet:
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;Wenn Sie eine Konfiguration anpassen möchten, übergeben Sie bitte ein Objekt:
const logger = new Lajax ( {
url : 'https://path/to/your/log/server' ,
interval : 5000
} ) ;Alle vom Objekt unterstützten Eigenschaften sind wie folgt:
| Attributname | veranschaulichen | Werttyp | Standardwert |
|---|---|---|---|
| URL | URL des Protokollservers | Zeichenfolge | null |
| autoLogError | Ob nicht erfasste Fehler automatisch protokolliert werden sollen | Boolescher Wert | WAHR |
| autoLogRejection | Ob Promise-Fehler automatisch aufgezeichnet werden sollen | Boolescher Wert | WAHR |
| autoLogAjax | Ob Ajax-Anfragen automatisch aufgezeichnet werden sollen | Boolescher Wert | WAHR |
| logAjaxFilter | Ajax zeichnet die bedingte Filterfunktion automatisch auf. Die von der Funktion übergebenen Parameter sind die URL und die Methode der Anforderung. Wenn „true“ zurückgegeben wird, bedeutet dies, dass das Protokoll aufgezeichnet wird, und „false“ bedeutet, dass das Protokoll nicht aufgezeichnet wird. | Funktion | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| stilisieren | Ob der von der Konsole gedruckte Inhalt formatiert werden soll | Boolescher Wert | WAHR |
| showDesc | Ob Beschreibungsinformationen angezeigt werden sollen (werden auf der Konsole gedruckt, wenn die Initialisierung abgeschlossen ist) | Boolescher Wert | WAHR |
| customDesc | Eine Funktion, die benutzerdefinierte Beschreibungsinformationen generiert. Die übergebenen Parameter sind die Anzahl der nicht gesendeten Protokolle vor dem Entladen der letzten Seite, die aktuelle Anforderungs-ID, ob die Anforderungs-ID vom Server stammt, und eine zurückgegebene Zeichenfolge. | Funktion | /**
* @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
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| Intervall | Das Intervall zwischen dem Senden von Protokollen an den Server (Millisekunden) | Nummer | 10000 |
| maxErrorReq | Die maximale Anzahl aufeinanderfolgender Fehler beim Senden von Protokollanfragen. Wenn diese Anzahl überschritten wird, wird die Anfrage nicht mehr gesendet (die Anfrage wird jedoch weiterhin in der Warteschlange aufgezeichnet). | Nummer | 5 |
Die Instanzmethode zeichnet ein Informationsprotokoll auf und kann jeden Typ und jede beliebige Anzahl von Parametern übergeben.
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ; Instanzmethode, dasselbe wie info .
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;Instanzmethode, zeichnet ein Warnprotokoll auf, kann jeden Typ und jede beliebige Anzahl von Parametern übergeben.
logger . warn ( '这是一条警告日志！' ) ;Die Instanzmethode zeichnet ein Fehlerprotokoll auf und kann jeden Typ und jede beliebige Anzahl von Parametern übergeben.
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}Array-Typ-Attribut, die aktuell zu sendende Protokollwarteschlange.
logger . queueString-Typ-Attribut, Anfrage-ID der aktuellen Seite.
logger . reqIdAttribut vom Typ boolean: Gibt an, ob die Anforderungs-ID vom Server generiert wird.
logger . idFromServerStatisches Objekt, Aufzählung der Protokollfarben. Wenn Sie die Protokollfarbe anpassen möchten, können Sie die Eigenschaften des Objekts ändern, bevor Sie die Instanzmethode aufrufen. Standardobjekt:
Lajax . colorEnum = {
/**
* 信息日志颜色，默认宝蓝色
*/
info : 'DodgerBlue' ,
/**
* 警告日志颜色，默认橘黄色
*/
warn : 'orange' ,
/**
* 错误日志颜色，默认红色
*/
error : 'red' ,
/**
* ajax分组颜色，默认紫色
*/
ajaxGroup : '#800080' ,
/**
* 日志发送成功颜色，默认绿色
*/
sendSuccess : 'green' ,
/**
* 描述文字颜色，默认粉红色
*/
desc : '#d30775' ,
} Das über Ajax an den Server gesendete Protokoll muss ein nicht leeres Array sein. Hier werden 2 Protokolle gleichzeitig aufgezeichnet:
logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;Die tatsächlich gesendeten Protokolldaten lauten wie folgt:
[{
"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 "
}]Beschreibung jedes Feldes:
time : Zeichenfolge, die Zeit dieses Protokolldatensatzes
level : Zeichenfolge, die Ebene des Protokolls, die in drei Typen unterteilt ist: info , warn und error .
messages : Array. Das erste Element des Arrays ist die eindeutige Anforderungs-ID in geschweiften Klammern. Alle nachfolgenden Elemente entsprechen dem Protokollinhalt, der durch den Aufruf von logger[level]
url : Zeichenfolge, die URL der Seite, auf der sich das Protokoll befindet
agent : Zeichenfolge, der Benutzeragent der Seite, auf der sich das Protokoll befindet
Jedes an den Server gesendete Protokoll enthält eine Anforderungs-ID. In derselben Anfrage müssen die Anfrage-IDs aller Protokolle gleich sein; in verschiedenen Anfragen müssen die Anfrage-IDs der aufgezeichneten Protokolle unterschiedlich sein.
Beispiel: Als Benutzer A auf index.html zugegriffen hat, hat Lajax 10 Protokolle aufgezeichnet und gesendet, und die Anforderungs-IDs dieser 10 Protokolle waren dieselben. Benutzer B besuchte auch die Seite und generierte ebenfalls 10 Protokolle sowie die Anforderungs-IDs dieser Protokolle Es muss mit der Anforderungs-ID von Benutzer A identisch sein, sich jedoch von dieser unterscheiden.
Der Hauptzweck der Anforderungs-ID besteht darin, alle zugehörigen Protokolle während einer bestimmten Anforderung auf der Serverseite genau zu lokalisieren.
Generierung und Versand der Anfrage-ID:
Wenn Ihre Seite serverseitig dynamisch generiert wird und Sie die serverseitigen Protokolle mit den Front-End-Protokollen verbinden möchten, können Sie serverseitig eine Anforderungs-ID generieren und diese an das Front-End senden. Lajax wird nacheinander versuchen, die Anforderungs-ID aus dem <meta name="_reqId" content="xxxx-xxx"> Inhalt der Seite oder window._reqId zu finden._reqId ;
Wenn die obige Suche fehlschlägt, wird Ihre Seite als reine Frontend-Seite betrachtet. Während der Initialisierung wird die Seite in allen Protokollen entladen.
Bei überwachten Ajax-Anfragen wird die obige Anfrage-ID zum X-Request-Id Anfrageheader hinzugefügt. Sie können die Anfrage-ID zur Korrelation im Serverprotokoll aufzeichnen.
Im Verzeichnis ./demo ist ein einfacher Protokollserver-Beispielserver.js basierend auf node.js enthalten.
Starten Sie den Protokollserver:
> node server.jsDie Protokollschnittstelle wird unter http://127.0.0.1:2017/log ausgeführt. Legen Sie beim lokalen Testen die Lajax-Initialisierungsparameter auf diese Adresse fest:
const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;Dieser Beispielserver unterstützt domänenübergreifende Ajax-Anfragen :)
Greifen Sie lokal auf die Seite ./test/index.html zu, um den Test auszuführen.
Die MIT-Lizenz (MIT)
Copyright (c) 2017 Sun Zhenghua
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND DER NICHTVERLETZUNG VON RECHTEN ANSPRÜCHE, SCHÄDEN ODER ANDERES HAFTUNG, SEI ES AUS VERTRAG, unerlaubter Handlung oder auf andere Weise, die sich aus, aus oder im Zusammenhang mit der SOFTWARE oder der NUTZUNG ODER ANDEREN HANDELN MIT DER SOFTWARE ergibt.
