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"
});
ตัวอย่าง
| คุณสมบัติ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น | ไม่ว่าจะว่างเปล่าหรือไม่ |
|---|---|---|---|---|
| รายงาน URL | ที่อยู่การรายงานข้อยกเว้น | สตริง | http://localhost:10300/errorReport | เอ็น |
| เวลาล่าช้า | เวลารายงานข้อผิดพลาดล่าช้า | ตัวเลข | 3000 (หน่วย: มิลลิวินาที) | ย |
| รหัสแอป | รหัสโครงการ | สตริง | ย | |
| ชื่อแอป | ชื่อโครงการ | สตริง | ย | |
| เบราว์เซอร์ | ชื่อเบราว์เซอร์ | สตริง | วิธีการภายในสามารถรับได้ | เอ็น |
| อุปกรณ์ | ชื่ออุปกรณ์ | สตริง | วิธีการภายในสามารถรับได้ | เอ็น |
| รหัสผู้ใช้ | รหัสผู้ใช้ | สตริง | ย | |
| โทเค็น | โทเค็น | สตริง | ย | |
| ช่วงเวลา | การประทับเวลาเมื่อมีการส่งข้อมูล | ตัวเลข | รับการประทับเวลาปัจจุบันในแต่ละครั้ง | ย |
| infoType | หมวดหมู่ข้อมูล ค่าเริ่มต้นคือข้อผิดพลาด | สตริง | พิมพ์ | ย |
| ผงชูรส | รายละเอียดข้อผิดพลาด | สตริง | รายละเอียดข้อผิดพลาด | ย |
| userAgent | userAgent | สตริง | userAgent | ย |
| URL ของหน้า | ที่อยู่หน้ารายงาน | สตริง | window.location.href | ย |
| สแต็ค | ข้อมูลสแต็กข้อผิดพลาด | สตริง | ข้อมูลสแต็กข้อผิดพลาด | ย |
| localStorageKey | ขอแนะนำให้ใช้คีย์คงที่ในครั้งต่อไปที่ผู้ใช้เปิดเบราว์เซอร์ ข้อมูลที่ผิดปกติสามารถกู้คืนและอัปโหลดได้โดยตรง | สตริง | localStorageKey | เอ็น |
| สิ่งแวดล้อม | สภาพแวดล้อม: dev, ทดสอบ, uat, pro | สตริง | สภาพแวดล้อมการพัฒนา | ย |
| ข้อมูล | ข้อความแสดงข้อผิดพลาดเพิ่มเติม | วัตถุ | ข้อความแสดงข้อผิดพลาดเพิ่มเติม | ย |
เมื่อพิจารณาว่าบางโปรเจ็กต์ใช้ Ajax แบบเนทีฟ ข้อยกเว้นของ Ajax จะถูกดักจับโดยกำเนิด และข้อยกเว้นของ Axios ก็จะถูกดักด้วย หากใช้รองเท้าสำหรับเด็กที่ใช้ Axios ข้อยกเว้นจะถูกรายงานสองครั้ง (เหตุผล: ตัวดักจับข้อยกเว้น Axios หนึ่งครั้ง การสกัดกั้นข้อยกเว้น Ajax ดั้งเดิมหนึ่งครั้ง) หากคุณ ไม่ต้องการรายงานสองครั้ง คุณสามารถเลือกที่จะแสดงความคิดเห็นในโค้ดต่อไปนี้ได้ ( การตรวจสอบข้อยกเว้นของ Axios และ การตรวจสอบ Ajax รายการใดรายการหนึ่งก็เพียงพอแล้ว) ใน error-report/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]);
};
สถานการณ์เฉพาะขึ้นอยู่กับความต้องการ!
สถานการณ์เฉพาะขึ้นอยู่กับความต้องการ!
สถานการณ์เฉพาะขึ้นอยู่กับความต้องการ!
พูดเรื่องสำคัญสามครั้ง! - -
ลิขสิทธิ์ของ MIT (c) 2019 sky9102
