error-reports
v0.0.7
Published
FE 异常上报
Downloads
9
Maintainers
Readme
前端异常上报
简介:从简单性、可测试性和松耦合性角度而言,绝大部分前端开发者都可以从error-report中受益。解决前端异常信息统一处理的痛点,error-report给复杂的前端异常上报带来了春天。记录前端异常信息,支持断网暂存异常,在线后自动上传暂存异常信息。涵盖 Vue 异常、Axios 异常、原生Ajax 异常、JS 抛出的异常、Promise 异常、Async 异常、加载第三方CDN资源异常等,几乎涵盖了前端所有能涉及到的异常。
- 目的:解决前端异常信息统一处理的痛点
- 功能:记录前端异常信息,支持断网暂存异常,在线后自动上传暂存异常信息
- 范围:任何前端应用
- 使用:两行代码搞定,使用的复杂度几乎降低到了零
特点
- 可拔插
- 代码侵入量小
- 使用灵活方便
使用
import ErrorReport from "error-reports";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
Demo
配置参数 options
属性|说明|类型|默认值|是否可以为空 --|:--:|--:|--:|--: reportUrl|异常上报地址|String|http://localhost:10300/errorReport|N| delayTime|延时上报Error时间|Number|3000 (单位:毫秒)|Y appId|项目ID|String||Y appName|项目名称|String||Y browser|浏览器名称|String|内部方法可以获取|N| device|设备名称|String|内部方法可以获取|N| userId|userId|String||Y| token|token|String||Y| timeSpan|发送数据时的时间戳|Number|每次取当前的时间戳|Y| infoType|信息类别,默认为error|String|type|Y| msg|错误的具体信息|String|错误的具体信息|Y| userAgent|userAgent|String|userAgent|Y| pageUrl|上报页面地址|String|window.location.href|Y| stack|错误堆栈信息|String|错误堆栈信息|Y| localStorageKey|建议使用固定的key,下次用户打开浏览器可以直接恢复异常数据并上传|String|localStorageKey|N| dev|环境:dev、test、uat、pro|String|开发环境|Y| data|更多错误信息|Object|更多错误信息|Y|
注意事项
考虑到有些项目使用原生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,项目文档采用 署名-禁止演绎 4.0 国际协议许可
问题
- 开发者有问题或者好的建议可以用Issues反馈交流,请给出详细信息。
- 如果有问题需要提问,请在提问前先完成以下过程:
- 请仔细阅读本项目文档,查看能否解决;
- 请提问前尽可能做一些DEBUG或者思考分析,然后提问时给出详细的错误相关信息以及个人对问题的理解。