error report
1.0.0
المقدمة: من منظور البساطة وقابلية الاختبار والاقتران غير المحكم، يمكن لمعظم مطوري الواجهة الأمامية الاستفادة من تقرير الأخطاء. لحل مشكلة المعالجة الموحدة لمعلومات استثناءات الواجهة الأمامية، يعمل تقرير الأخطاء على جلب التقارير المعقدة عن استثناءات الواجهة الأمامية. قم بتسجيل معلومات استثناءات الواجهة الأمامية، ودعم التخزين المؤقت للاستثناءات عند قطع الاتصال، وتحميل معلومات الاستثناء المؤقت تلقائيًا بعد الاتصال بالإنترنت. يغطي استثناءات Vue، واستثناءات Axios، واستثناءات Ajax الأصلية، والاستثناءات التي تم طرحها بواسطة JS، واستثناءات Promise، واستثناءات Async، والاستثناءات عند تحميل موارد CDN التابعة لجهات خارجية، وما إلى ذلك، وتغطي تقريبًا جميع الاستثناءات التي يمكن تضمينها في الواجهة الأمامية.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
أمثلة
| ملكية | يوضح | يكتب | القيمة الافتراضية | ما إذا كان يمكن أن تكون فارغة |
|---|---|---|---|---|
| ReportUrl | عنوان الإبلاغ عن الاستثناء | خيط | http://localhost:10300/errorReport | ن |
| تأخير الوقت | تأخر وقت الإبلاغ عن الأخطاء | رقم | 3000 (الوحدة: مللي ثانية) | ي |
| معرف التطبيق | معرف المشروع | خيط | ي | |
| اسم التطبيق | اسم المشروع | خيط | ي | |
| browser | اسم المتصفح | خيط | يمكن الحصول على الطرق الداخلية | ن |
| جهاز | اسم الجهاز | خيط | يمكن الحصول على الطرق الداخلية | ن |
| معرف المستخدم | معرف المستخدم | خيط | ي | |
| رمز مميز | رمز مميز | خيط | ي | |
| timeSpan | الطابع الزمني الذي تم فيه إرسال البيانات | رقم | احصل على الطابع الزمني الحالي في كل مرة | ي |
| نوع المعلومات | فئة المعلومات، الافتراضي هو الخطأ | خيط | يكتب | ي |
| رسالة | تفاصيل الخطأ | خيط | تفاصيل الخطأ | ي |
| userAgent | userAgent | خيط | userAgent | ي |
| pageUrl | عنوان صفحة التقرير | خيط | window.location.href | ي |
| كومة | معلومات مكدس الخطأ | خيط | معلومات مكدس الخطأ | ي |
| localStorageKey | يوصى باستخدام مفتاح ثابت في المرة التالية التي يفتح فيها المستخدم المتصفح، يمكن استعادة البيانات غير الطبيعية وتحميلها مباشرة. | خيط | localStorageKey | ن |
| بيئة | البيئة: ديف، اختبار، يوات، برو | خيط | بيئة التطوير | ي |
| بيانات | المزيد من رسائل الخطأ | هدف | المزيد من رسائل الخطأ | ي |
مع الأخذ في الاعتبار أن بعض المشاريع تستخدم Ajax الأصلي، يتم اعتراض استثناءات Ajax محليًا، كما يتم اعتراض استثناءات Axios أيضًا إذا تم استخدام أحذية الأطفال التي تستخدم Axios، فسيتم الإبلاغ عن الاستثناءات مرتين (السبب: اعتراض استثناء Axios مرة واحدة، واعتراض استثناء Axios الأصلي مرة واحدة). لا تريد الإبلاغ عنه مرتين، يمكنك اختيار التعليق على الكود التالي (أي مراقبة استثناءات Axios ومراقبة Ajax تكفي). في تقرير الخطأ/src/plugins/errorReport.js.
ملاحظة مراقبة استثناءات Axios ، لن يتم الإبلاغ عن استثناءات Axios؛
// Axios 异常监控
axios.interceptors.response.use(null, error => {
this.options.msg = error.message;
this.options.stack = this.processStackMsg(error);
this.options.data = JSON.stringify({
category: "Axios"
});
// 合并上报的数据，包括默认上报的数据和自定义上报的数据
const reportData = Object.assign({}, this.options);
this.saveReport(reportData);
return Promise.reject(error);
});
أو قم بالتعليق على مراقبة Ajax الأصلية، ولن يتم الإبلاغ عن استثناءات Ajax الأصلية.
// Ajax监控
const ajaxListener = {};
// 复制send方法
ajaxListener.tempSend = XMLHttpRequest.prototype.send;
// 复制open方法
ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
// 重写open方法,记录请求的url
XMLHttpRequest.prototype.open = function(method, url, boolen) {
ajaxListener.tempOpen.apply(this, [method, url, boolen]);
this.ajaxUrl = url;
};
const self = this;
// 发送
XMLHttpRequest.prototype.send = function(data) {
const tempReadystate = this.onreadystatechange;
this.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 300) {
tempReadystate && tempReadystate.apply(this, [data]);
return;
}
self.options.msg = "AJAX 请求错误";
self.options.stack = `错误码：${this.status}`;
self.options.data = JSON.stringify({
requestUrl: this.ajaxUrl,
category: "XMLHttpRequest",
text: this.statusText,
status: this.status
});
// 合并上报的数据，包括默认上报的数据和自定义上报的数据
const reportData = Object.assign({}, self.options);
// 把错误信息发送给后台
self.saveReport(reportData);
}
};
ajaxListener.tempSend.apply(this, [data]);
};
الوضع المحدد يعتمد على الاحتياجات!
الوضع المحدد يعتمد على الاحتياجات!
الوضع المحدد يعتمد على الاحتياجات!
قل أشياء مهمة ثلاث مرات! ! !
حقوق النشر لمعهد ماساتشوستس للتكنولوجيا (ج) 2019 Sky9102
