lajax
v1.1.6
log + ajax، حل التسجيل الأمامي.
يحاول Lajax حل هذه المشاكل:
لا توجد سجلات على الواجهة الأمامية، أو توجد سجلات ولكن لا يوجد استمرار، مما يجعل من الصعب تتبع المشكلات عبر الإنترنت وتحليلها؛
حتى إذا تم استخدام مكتبة سجل الواجهة الأمامية، فإنها تعتمد عادةً على المطورين لتسجيل السجلات يدويًا، وهو أمر غير موثوق به؛
غالبًا ما يتم تجاهل الاستثناءات التي لم يتم اكتشافها في بيئات الإنتاج؛
لا يمكن لمتصفح الهاتف المحمول رؤية السجلات المطبوعة بواسطة console . في الماضي، تم استخدام alert أو vConsole عادةً لتحديد المشكلة، ولكن العيب هو أن كود المصدر يحتاج إلى تعديل خصيصًا لهذا الغرض؛
بالنسبة لصفحات الويب التي تم إنشاؤها ديناميكيًا بواسطة الخادم، لا يمكن ربط سجلات الخادم الأصلية للنظام بسجلات الواجهة الأمامية.
سمات
مثال على الانترنت
بداية سريعة
واجهة برمجة التطبيقات
تنسيق السجل
معرف الطلب
مثال الخادم
امتحان
رخصة
تسجيل السجلات يدويًا، ودعم 3 مستويات للسجل: info ، warn ، error ؛
ستتم طباعة السجل في وحدة تحكم المتصفح بتنسيق محسن؛
تسجيل أخطاء البرنامج النصي التي لم يتم اكتشافها تلقائيًا؛
تسجيل استثناءات الوعد التي لم يتم اكتشافها تلقائيًا؛
تسجيل بداية واستكمال طلبات اياكس تلقائيا؛
إنشاء معرفات الطلب تلقائيًا لتسهيل موقع السجل والارتباط؛
سيتم إرسال السجلات على دفعات إلى خادم السجل الذي تم تكوينه بانتظام؛
التوافق الجيد وآلية معالجة الاستثناءات.
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 ) ;
}يرجى الاطلاع على واجهة برمجة التطبيقات للحصول على وثائق مفصلة.
يستخدم 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 لخادم السجل | خيط | باطل |
| خطأ سجل تلقائي | ما إذا كان سيتم تسجيل الأخطاء التي لم يتم اكتشافها تلقائيًا | منطقية | حقيقي |
| autoLogRejection | ما إذا كان سيتم تسجيل أخطاء الوعد تلقائيًا أم لا | منطقية | حقيقي |
| autoLogAjax | ما إذا كان سيتم تسجيل طلبات اياكس تلقائيًا أم لا | منطقية | حقيقي |
| logAjaxFilter | يقوم Ajax تلقائيًا بتسجيل وظيفة التصفية الشرطية. معلمات الوظيفة هي عنوان URL وطريقة الطلب. إذا تم إرجاع صحيح، فهذا يعني التسجيل، وخطأ يعني عدم تسجيل أي سجل. | وظيفة | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| أسلب | ما إذا كان سيتم تنسيق المحتوى المطبوع بواسطة وحدة التحكم | منطقية | حقيقي |
| showDesc | ما إذا كان سيتم عرض معلومات الوصف (مطبوعة على وحدة التحكم عند اكتمال التهيئة) | منطقية | حقيقي |
| customDesc | وظيفة تقوم بإنشاء معلومات وصف مخصصة. المعلمات التي تم تمريرها هي عدد السجلات غير المرسلة قبل إلغاء تحميل الصفحة الأخيرة، ومعرف الطلب الحالي، وما إذا كان معرف الطلب يأتي من الخادم، أم لا، ويتم إرجاع السلسلة. | وظيفة | /**
* @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
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| فاصلة | الفاصل الزمني بين إرسال السجلات إلى الخادم (ملي ثانية) | رقم | 10000 |
| 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 مصفوفة غير فارغة. يتم تسجيل سجلين هنا في نفس الوقت:
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 : السلسلة، وقت تسجيل السجل
level : سلسلة، مستوى السجل، والذي ينقسم إلى ثلاثة أنواع: info ، warn ، error .
messages : العنصر الأول في المصفوفة هو معرف الطلب الفريد المغلف بين قوسين متعرجين. تتوافق جميع العناصر اللاحقة مع محتوى السجل الذي تم تمريره عن طريق استدعاء logger[level]
url : سلسلة، عنوان URL للصفحة التي يوجد بها السجل
agent : سلسلة، وكيل المستخدم للصفحة التي يوجد بها السجل
يحتوي كل سجل يتم إرساله إلى الخادم على معرف الطلب. في نفس الطلب، يجب أن تكون معرفات الطلب لجميع السجلات هي نفسها في الطلبات المختلفة، ويجب أن تكون معرفات الطلب للسجلات المسجلة مختلفة.
على سبيل المثال: عندما وصل المستخدم "أ" إلى ملف Index.html، سجل lajax وأرسل 10 سجلات، وكانت معرفات الطلب لهذه السجلات العشرة هي نفسها؛ كما قام المستخدم "ب" بزيارة الصفحة، وأنشأ أيضًا 10 سجلات، ومعرفات الطلب لهذه السجلات يجب أن يكون هو نفسه، ولكنه مختلف عن معرف طلب المستخدم أ.
الغرض الرئيسي من معرف الطلب: يسمح لك بتحديد موقع جميع السجلات ذات الصلة بدقة أثناء طلب معين على جانب الخادم.
إنشاء وإرسال معرف الطلب:
إذا تم إنشاء صفحتك ديناميكيًا على جانب الخادم وتريد ربط السجلات من جانب الخادم بسجلات الواجهة الأمامية، فيمكنك إنشاء معرف طلب على جانب الخادم وإرساله إلى الواجهة الأمامية. سيحاول Lajax على التوالي العثور على معرف الطلب من <meta name="_reqId" content="xxxx-xxx"> للصفحة أو window._reqId ؛
إذا فشل البحث أعلاه، فسيتم اعتبار صفحتك صفحة أمامية خالصة. سيقوم Lajax بإنشاء معرف فريد يعتمد على الوقت كمعرف الطلب أثناء التهيئة. قبل إلغاء تحميل الصفحة، ستحتوي جميع السجلات على هذا الطلب.
بالنسبة لطلبات Ajax المراقبة، ستتم إضافة معرف الطلب أعلاه إلى رأس طلب X-Request-Id ، ويمكنك تسجيل معرف الطلب في سجل الخادم للارتباط.
في الدليل ./demo ، يتم تضمين مثال خادم السجل البسيط server.js المستند إلى العقدة 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)
حقوق الطبع والنشر (ج) 2017 لشركة صن تشنغ هوا
يُمنح الإذن مجانًا لأي شخص يحصل على نسخة من هذا البرنامج وملفات الوثائق المرتبطة به ("البرنامج")، للتعامل في البرنامج دون قيود، بما في ذلك، على سبيل المثال لا الحصر، حقوق الاستخدام والنسخ والتعديل والدمج. ونشر و/أو توزيع وترخيص من الباطن و/أو بيع نسخ من البرنامج، والسماح للأشخاص الذين تم توفير البرنامج لهم بالقيام بذلك، وفقًا للشروط التالية:
يجب تضمين إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.
يتم توفير البرنامج "كما هو"، دون أي ضمان من أي نوع، صريحًا أو ضمنيًا، بما في ذلك على سبيل المثال لا الحصر ضمانات القابلية للتسويق والملاءمة لغرض معين وعدم الانتهاك، ولا يتحمل المؤلفون أو أصحاب حقوق الطبع والنشر بأي حال من الأحوال المسؤولية عن أي شيء. المطالبة أو الأضرار أو غيرها المسؤولية، سواء في دعوى العقد أو الضرر أو غير ذلك، الناشئة عن أو خارج أو فيما يتعلق بالبرنامج أو الاستخدام أو المعاملات الأخرى في البرنامج.
