تنزيل web monitoring - تنزيل رمز مصدر web monitoring

web monitoring

بيانات الموقع

v1.0.0

تنزيل

مراقبة الويب

[قائمة الوظائف]

السماح للمستخدمين بإنشاء مواقع مراقبة متعددة
إحصائيات وصول المستخدم من أبعاد مختلفة
وقت الاستعلام المخصص
مخططات مختلفة
يدعم التقارير المخصصة (أخطاء JS ، طلبات API ، معلومات الأداء)
تتبع مسار وصول المستخدم
عتبة مخصصة (مستخدم مسجل)
وظيفة التنبيه التلقائي ، أرسل تذكير البريد الإلكتروني الإنذار (مستخدم مسجل)

[الدعم الفني]

الواجهة الأمامية: Angular5+، تصميم النمل
الخلفية: Nodejs+Express
قاعدة البيانات: mongoose+mongodb
Docker: بنقرة واحدة نشر بيئة Docker

يركز منصة المراقبة الأمامية على مراقبة بيانات تجربة الويب. ثلاثة جوانب لمراقبة صحة صفحة الويب:

سرعة فتح الصفحة (قياس السرعة)
استقرار الصفحة (خطأ JS)
معدل نجاح استدعاء الخدمة الخارجية (API)

ثم تحليل تجربة المستخدم من خطوط العرض المختلفة.

قم بزيارة الصفحة
سرعة الوصول
طلب API
الجغرافيا
صالة

الرجوع إلى:

http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days

مراقبة الواجهة الأمامية لألبابا السحابة

سرعة فتح الصفحة

يمكن الحصول على بيانات الشبكة المستهلكة لوقت مع واجهة توقيت التنقل المذكورة أعلاه. وبالمثل ، يمكن أن يحصل توقيت الموارد على التحميل المستهلك للوقت لجميع الموارد الثابتة على الصفحة. من خلال هذه الواجهة ، يمكنك بسهولة الحصول على DNS و TCP و First Byte و HTML Transmission وغيرها من الوقت المستهلكة للوقت. مخطط الواجهة لتوقيت التنقل هو كما يلي:

قائمة الملفات

طلب API

افتراضيًا ، يتم استخدام XMLHTTP لاعتراض طلبات المستخدم ، وبعد أن يكون الطلب ناجحًا/فشل ، احسب الوقت والإبلاغ عن الطلب. يمكن للمستخدمين الإبلاغ يدويًا باستخدام ** __ ml.api (API ، النجاح ، الوقت ، الكود ، MSG) **.

 api:请求接口
 success:上传是否成功( true / false )
 time:耗时( ms )
 code:返回码
 msg:消息( string / object )

خطأ JS

افتراضيًا ، يتم استخدام Window.Orror للاستماع إلى برامج نصية خطأ المستخدم والإبلاغ عنها تلقائيًا. ستقوم بعض الأطر الأمامية المستخدمة من قبل المستخدمين بتقديم أخطاء JS ، ولن يتم إلقاء رسالة الخطأ في Window.Orror. يتطلب هذا الموقف من المستخدم أن يطلق عليه يدويًا. على سبيل المثال في Angular2+، اتصل ** __ ml.error (erroroBj) ** حيث يمسك إطارك على مستوى العالم بالأخطاء

  export class MyErrorHandler implements ErrorHandler {
      handleError ( error ) {
        console . error ( error ) ;
        window . __ml && window . __ml . error && window . __ml . error ( error . stack ||     error ) ;
      }
    }
    @ NgModule ( {
      declarations : [ ] ,
      imports : [ ] ,
      providers : [ { provide : ErrorHandler , useClass : MyErrorHandler } ] ,
      bootstrap : [ ]
    } )
    export class AppModule { }

في Vue:

 import Vue from 'vue'
const errorHandler = ( error , vm ) => {
 console . error ( error ) ;
 window . __ml && window . __ml . error && window . __ml . error ( error ) ;
}
Vue . config . errorHandler = errorHandler ;
Vue . prototype . $throw = ( error ) => errorHandler ( error , this ) ;