error report
1.0.0
Introduction: From the perspective of simplicity, testability and loose coupling, most front-end developers can benefit from error-report. To solve the pain point of unified processing of front-end exception information, error-report brings spring to complex front-end exception reporting. Record front-end exception information, support temporary storage of exceptions when disconnected, and automatically upload temporary exception information after online. Covers Vue exceptions, Axios exceptions, native Ajax exceptions, exceptions thrown by JS, Promise exceptions, Async exceptions, exceptions when loading third-party CDN resources, etc., covering almost all exceptions that can be involved in the front end.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
examples
| property | illustrate | type | default value | whether it can be empty |
|---|---|---|---|---|
| reportUrl | Exception reporting address | String | http://localhost:10300/errorReport | N |
| delayTime | Delayed error reporting time | Number | 3000 (unit: milliseconds) | Y |
| appId | Project ID | String | Y | |
| appName | Project name | String | Y | |
| browser | Browser name | String | Internal methods can obtain | N |
| device | Device name | String | Internal methods can obtain | N |
| userId | userId | String | Y | |
| token | token | String | Y | |
| timeSpan | The timestamp when the data was sent | Number | Get the current timestamp each time | Y |
| infoType | Information category, default is error | String | type | Y |
| msg | Error details | String | Error details | Y |
| userAgent | userAgent | String | userAgent | Y |
| pageUrl | Report page address | String | window.location.href | Y |
| stack | Error stack information | String | Error stack information | Y |
| localStorageKey | It is recommended to use a fixed key. Next time the user opens the browser, the abnormal data can be directly restored and uploaded. | String | localStorageKey | N |
| env | Environment: dev, test, uat, pro | String | development environment | Y |
| data | More error messages | Object | More error messages | Y |
Considering that some projects use native Ajax, Ajax exceptions are intercepted natively, and Axios exceptions are also intercepted. If children's shoes using Axios are used, exceptions will be reported twice (reason: Axios exception interceptor once, native Ajax exception interception once) If you don’t want to report it twice, you can choose to comment the following code (any one of Axios exception monitoring and Ajax monitoring is enough). In error-report/src/plugins/errorReport.js.
Note Axios exception monitoring , Axios exceptions will not be reported;
// 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);
});
Or comment out the native Ajax monitoring , and native Ajax exceptions will not be reported.
// 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]);
};
The specific situation depends on the needs!
The specific situation depends on the needs!
The specific situation depends on the needs!
Say important things three times! ! !
MIT Copyright (c) 2019 sky9102
