lajax
v1.1.6
log + ajax โซลูชันการบันทึกส่วนหน้า
lajax พยายามแก้ไขปัญหาเหล่านี้:
ไม่มีบันทึกที่ส่วนหน้า หรือมีบันทึกแต่ไม่มีการคงอยู่ ทำให้ยากต่อการติดตามและวิเคราะห์ปัญหาออนไลน์
แม้ว่าจะใช้ไลบรารีบันทึกส่วนหน้า แต่ก็มักจะต้องอาศัยนักพัฒนาในการบันทึกบันทึกด้วยตนเอง ซึ่งไม่น่าเชื่อถือ
ข้อยกเว้นที่ไม่ถูกตรวจจับในสภาพแวดล้อมการใช้งานจริงมักถูกละเลย
เบราว์เซอร์มือถือไม่สามารถมองเห็นบันทึกที่พิมพ์โดย console ในอดีต alert หรือ vConsole มักจะใช้เพื่อค้นหาปัญหา แต่ข้อเสียคือต้องแก้ไขซอร์สโค้ดเพื่อจุดประสงค์นี้โดยเฉพาะ
สำหรับเว็บเพจที่สร้างขึ้นแบบไดนามิกโดยเซิร์ฟเวอร์ บันทึกเซิร์ฟเวอร์ดั้งเดิมของระบบไม่สามารถเชื่อมโยงกับบันทึกส่วนหน้าได้
คุณสมบัติ
ตัวอย่างออนไลน์
เริ่มต้นอย่างรวดเร็ว
เอปี้
รูปแบบบันทึก
รหัสคำขอ
ตัวอย่างเซิร์ฟเวอร์
ทดสอบ
ใบอนุญาต
บันทึกบันทึกด้วยตนเอง รองรับ 3 ระดับบันทึก: info , warn และ error ;
บันทึกจะถูกพิมพ์ในคอนโซลของเบราว์เซอร์ในรูปแบบที่ปรับให้เหมาะสม
บันทึกข้อผิดพลาดของสคริปต์ที่ไม่ถูกตรวจจับโดยอัตโนมัติ
บันทึกข้อยกเว้นสัญญาที่ไม่ถูกตรวจจับโดยอัตโนมัติ
บันทึกการเริ่มต้นและสิ้นสุดคำขอ Ajax โดยอัตโนมัติ
สร้างรหัสคำขอโดยอัตโนมัติเพื่ออำนวยความสะดวกในการระบุตำแหน่งบันทึกและความสัมพันธ์
บันทึกจะถูกส่งเป็นชุดไปยังเซิร์ฟเวอร์บันทึกที่กำหนดค่าเป็นประจำ
กลไกการจัดการความเข้ากันได้และข้อยกเว้นที่ดี
http://eshengsky.github.io/lajax/
> npm install lajaxscript เพื่อแนะนำได้ < 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 ) ;
}โปรดดู API สำหรับเอกสารโดยละเอียด
Lajax ใช้ไวยากรณ์ ES2015 และจำเป็นต้องจัดทำแพ็กเกจโดยใช้ webpack + babel
> npm install > webpack ไดเร็กทอรีไฟล์ที่ทำแพ็กเกจคือ ./dist โดยที่ build.js เป็นเวอร์ชันที่ไม่มีการบีบอัด และ build.min.js เป็นเวอร์ชันบีบอัด
เตรียมใช้งานปลั๊กอินและส่งคืนอินสแตนซ์ของปลั๊กอิน
Options : สตริงหรือวัตถุ หากส่งสตริงเข้าไป จะถือเป็นที่อยู่เซิร์ฟเวอร์บันทึก:
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;หากคุณต้องการปรับแต่งการกำหนดค่าบางอย่าง โปรดส่งวัตถุ:
const logger = new Lajax ( {
url : 'https://path/to/your/log/server' ,
interval : 5000
} ) ;คุณสมบัติทั้งหมดที่ออบเจ็กต์รองรับมีดังนี้:
| ชื่อแอตทริบิวต์ | แสดงให้เห็น | ประเภทค่า | ค่าเริ่มต้น |
|---|---|---|---|
| URL | URL เซิร์ฟเวอร์บันทึก | เชือก | โมฆะ |
| autoLogError | ไม่ว่าจะบันทึกข้อผิดพลาดที่ไม่ถูกตรวจจับโดยอัตโนมัติหรือไม่ | บูลีน | จริง |
| การปฏิเสธบันทึกอัตโนมัติ | ไม่ว่าจะบันทึกข้อผิดพลาดของสัญญาโดยอัตโนมัติหรือไม่ | บูลีน | จริง |
| autoLogAjax | ไม่ว่าจะบันทึกคำขอ ajax โดยอัตโนมัติหรือไม่ | บูลีน | จริง |
| logAjaxFilter | Ajax จะบันทึกฟังก์ชันการกรองแบบมีเงื่อนไขโดยอัตโนมัติ พารามิเตอร์ของฟังก์ชันคือ URL และวิธีการของคำขอ หากส่งคืนค่า true แสดงว่าการบันทึกเป็นเท็จ และค่า false หมายความว่าไม่มีการบันทึก | การทำงาน | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| มีสไตล์ | ไม่ว่าจะจัดรูปแบบเนื้อหาที่พิมพ์โดยคอนโซลหรือไม่ | บูลีน | จริง |
| แสดงรายละเอียด | จะแสดงข้อมูลคำอธิบายหรือไม่ (พิมพ์บนคอนโซลเมื่อการกำหนดค่าเริ่มต้นเสร็จสมบูรณ์) | บูลีน | จริง |
| กำหนดเองคำอธิบาย | ฟังก์ชันที่สร้างข้อมูลคำอธิบายที่กำหนดเอง พารามิเตอร์ที่ส่งคือจำนวนบันทึกที่ยังไม่ได้ส่งก่อนที่จะยกเลิกการโหลดหน้าสุดท้าย รหัสคำขอปัจจุบัน ไม่ว่ารหัสคำขอจะมาจากเซิร์ฟเวอร์หรือไม่ และสตริงจะถูกส่งกลับ | การทำงาน | /**
* @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
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| ช่วงเวลา | ช่วงเวลาระหว่างการส่งบันทึกไปยังเซิร์ฟเวอร์ (มิลลิวินาที) | ตัวเลข | 10,000 |
| maxErrorReq | จำนวนข้อผิดพลาดติดต่อกันสูงสุดเมื่อส่งคำขอบันทึก หากเกินจำนวนนี้ คำขอจะไม่ถูกส่งอีกต่อไป (แต่คำขอจะยังคงถูกบันทึกไว้ในคิว) | ตัวเลข | 5 |
วิธีการอินสแตนซ์จะบันทึกบันทึกข้อมูลและสามารถส่งผ่านพารามิเตอร์ประเภทใดก็ได้และจำนวนเท่าใดก็ได้
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ; วิธีการอินสแตนซ์ เช่นเดียวกับ info
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;วิธีการอินสแตนซ์ บันทึกบันทึกคำเตือน และสามารถส่งผ่านพารามิเตอร์ประเภทใดก็ได้และจำนวนเท่าใดก็ได้
logger . warn ( '这是一条警告日志！' ) ;วิธีการอินสแตนซ์จะบันทึกบันทึกข้อผิดพลาดและสามารถส่งผ่านพารามิเตอร์ประเภทใดก็ได้และจำนวนเท่าใดก็ได้
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}แอตทริบิวต์ประเภทอาร์เรย์ คิวบันทึกปัจจุบันที่จะส่ง
logger . queueแอตทริบิวต์ประเภทสตริง รหัสคำขอของหน้าปัจจุบัน
logger . reqIdคุณลักษณะประเภทบูลีน ไม่ว่ารหัสคำขอจะถูกสร้างขึ้นโดยเซิร์ฟเวอร์หรือไม่
logger . idFromServerวัตถุคงที่ การแจงนับสีบันทึก หากคุณต้องการปรับแต่งสีบันทึก คุณสามารถแก้ไขคุณสมบัติของวัตถุก่อนที่จะเรียกวิธีการอินสแตนซ์ วัตถุเริ่มต้น:
Lajax . colorEnum = {
/**
* 信息日志颜色，默认宝蓝色
*/
info : 'DodgerBlue' ,
/**
* 警告日志颜色，默认橘黄色
*/
warn : 'orange' ,
/**
* 错误日志颜色，默认红色
*/
error : 'red' ,
/**
* ajax分组颜色，默认紫色
*/
ajaxGroup : '#800080' ,
/**
* 日志发送成功颜色，默认绿色
*/
sendSuccess : 'green' ,
/**
* 描述文字颜色，默认粉红色
*/
desc : '#d30775' ,
} บันทึกที่ส่งไปยังเซิร์ฟเวอร์ผ่าน Ajax จะต้องเป็นอาร์เรย์ที่ไม่ว่างเปล่า มีบันทึก 2 รายการที่นี่พร้อมกัน:
logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;ข้อมูลบันทึกจริงที่ส่งจะเป็นดังนี้:
[{
"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 "
}]คำอธิบายของแต่ละฟิลด์:
time : string, เวลาของบันทึกบันทึก
level : string ระดับของบันทึก ซึ่งแบ่งออกเป็นสามประเภท: info , warn และ error
messages : อาร์เรย์ องค์ประกอบแรกของอาร์เรย์คือ ID คำขอที่ไม่ซ้ำกันซึ่งอยู่ในวงเล็บปีกกา องค์ประกอบที่ตามมาทั้งหมดสอดคล้องกับเนื้อหาบันทึกที่ส่งผ่านโดยการเรียก logger[level]
url : string ซึ่งเป็น URL ของหน้าที่บันทึกอยู่
agent : string ตัวแทนผู้ใช้ของเพจที่มีบันทึกอยู่
แต่ละบันทึกที่ส่งไปยังเซิร์ฟเวอร์จะมีรหัสคำขอ ในคำขอเดียวกัน รหัสคำขอของบันทึกทั้งหมดจะต้องเหมือนกัน ในคำขอที่ต่างกัน รหัสคำขอของบันทึกที่บันทึกไว้จะต้องแตกต่างกัน
ตัวอย่างเช่น: เมื่อผู้ใช้ A เข้าถึง index.html lajax บันทึกและส่งบันทึก 10 รายการ และรหัสคำขอของบันทึกทั้ง 10 รายการเหมือนกัน ผู้ใช้ B เยี่ยมชมเพจนั้นด้วย และยังสร้างบันทึก 10 รายการ รวมถึงรหัสคำขอของบันทึกเหล่านี้ด้วย จะต้องเหมือนกัน แต่แตกต่างจากรหัสคำขอของผู้ใช้ A
วัตถุประสงค์หลักของ ID คำขอ: ช่วยให้คุณสามารถค้นหาบันทึกที่เกี่ยวข้องทั้งหมดได้อย่างแม่นยำในระหว่างการร้องขอบางอย่างบนฝั่งเซิร์ฟเวอร์
การสร้างและการส่งรหัสคำขอ:
หากเพจของคุณถูกสร้างขึ้นแบบไดนามิกบนฝั่งเซิร์ฟเวอร์ และคุณต้องการเชื่อมต่อบันทึกฝั่งเซิร์ฟเวอร์กับบันทึกส่วนหน้า คุณสามารถสร้างรหัสคำขอบนฝั่งเซิร์ฟเวอร์และส่งไปยังส่วนหน้าได้ Lajax จะพยายามค้นหารหัสคำขอจากเนื้อหา <meta name="_reqId" content="xxxx-xxx"> ของเพจหรือ window._reqId อย่างต่อเนื่อง
หากการค้นหาข้างต้นล้มเหลว เพจของคุณจะถูกพิจารณาว่าเป็นเพจส่วนหน้าเพียงอย่างเดียว Lajax จะสร้าง ID ที่ไม่ซ้ำกันตามเวลาเป็น ID คำขอในระหว่างการเตรียมใช้งาน ก่อนที่เพจจะถูกยกเลิกการโหลด บันทึกทั้งหมดจะมี ID คำขอนี้
สำหรับคำขอ Ajax ที่ได้รับการตรวจสอบ รหัสคำขอข้างต้นจะถูกเพิ่มลงในส่วนหัวคำขอ X-Request-Id คุณสามารถบันทึกรหัสคำขอในบันทึกของเซิร์ฟเวอร์เพื่อดูความสัมพันธ์ได้
ในไดเร็กทอรี ./demo จะมีการรวมเซิร์ฟเวอร์บันทึกตัวอย่างอย่าง server.js ที่ใช้ node.js ไว้ด้วย
เริ่มเซิร์ฟเวอร์บันทึก:
> node server.jsอินเทอร์เฟซบันทึกทำงานที่ http://127.0.0.1:2017/log เมื่อทดสอบในเครื่อง ให้ตั้งค่าพารามิเตอร์การเริ่มต้น Lajax เป็นที่อยู่นี้:
const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;เซิร์ฟเวอร์ตัวอย่างนี้รองรับคำขอข้ามโดเมน ajax :)
เข้าถึงหน้า ./test/index.html ในเครื่องเพื่อทำการทดสอบ
ใบอนุญาต MIT (MIT)
ลิขสิทธิ์ (c) 2017 ซันเจิ้งหัว
อนุญาตให้บุคคลใดก็ตามที่ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") อนุญาตโดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:
ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์นี้ให้มา "ตามที่เป็น" โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการซื้อขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิดไม่ว่าในกรณีใด ผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อสิ่งใดๆ การเรียกร้องค่าเสียหายหรืออื่น ๆ ความรับผิดไม่ว่าในการกระทำของสัญญา การละเมิด หรืออย่างอื่น ที่เกิดขึ้นจาก ออกจาก หรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ในซอฟต์แวร์
