error report
1.0.0
Introducción: desde la perspectiva de la simplicidad, la capacidad de prueba y el acoplamiento flexible, la mayoría de los desarrolladores de aplicaciones para el usuario pueden beneficiarse del informe de errores. Para resolver el problema del procesamiento unificado de la información de excepciones del front-end, error-report trae primavera a los complejos informes de excepciones del front-end. Registre información de excepciones de front-end, admita el almacenamiento temporal de excepciones cuando esté desconectado y cargue automáticamente información de excepciones temporales después de estar en línea. Cubre excepciones de Vue, excepciones de Axios, excepciones nativas de Ajax, excepciones lanzadas por JS, excepciones de Promise, excepciones de Async, excepciones al cargar recursos CDN de terceros, etc., cubriendo casi todas las excepciones que pueden estar involucradas en el front-end.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
ejemplos
| propiedad | ilustrar | tipo | valor predeterminado | si puede estar vacío |
|---|---|---|---|---|
| URL del informe | Dirección de notificación de excepciones | Cadena | http://localhost:10300/errorReport | norte |
| retrasoTiempo | Tiempo de informe de error retrasado | Número | 3000 (unidad: milisegundos) | Y |
| ID de aplicación | ID del proyecto | Cadena | Y | |
| nombre de la aplicación | Nombre del proyecto | Cadena | Y | |
| navegador | Nombre del navegador | Cadena | Los métodos internos pueden obtener | norte |
| dispositivo | Nombre del dispositivo | Cadena | Los métodos internos pueden obtener | norte |
| ID de usuario | ID de usuario | Cadena | Y | |
| simbólico | simbólico | Cadena | Y | |
| lapso de tiempo | La marca de tiempo cuando se enviaron los datos. | Número | Obtenga la marca de tiempo actual cada vez | Y |
| tipo de información | Categoría de información, el valor predeterminado es error | Cadena | tipo | Y |
| mensaje | Detalles del error | Cadena | Detalles del error | Y |
| agente de usuario | agente de usuario | Cadena | agente de usuario | Y |
| URL de página | Dirección de la página del informe | Cadena | ventana.ubicación.href | Y |
| pila | Información de la pila de errores | Cadena | Información de la pila de errores | Y |
| clave de almacenamiento local | Se recomienda utilizar una clave fija la próxima vez que el usuario abra el navegador, los datos anormales se pueden restaurar y cargar directamente. | Cadena | clave de almacenamiento local | norte |
| ambiente | Entorno: desarrollo, prueba, uat, pro | Cadena | entorno de desarrollo | Y |
| datos | Más mensajes de error | Objeto | Más mensajes de error | Y |
Teniendo en cuenta que algunos proyectos usan Ajax nativo, las excepciones de Ajax se interceptan de forma nativa y las excepciones de Axios también se interceptan. Si se usan zapatos para niños que usan Axios, las excepciones se informarán dos veces (motivo: el interceptor de excepciones de Axios una vez, la interceptación de excepciones nativa de Ajax una vez). Si no desea informarlo dos veces, puede optar por comentar el siguiente código (cualquiera de los monitoreos de excepciones de Axios y Ajax son suficientes). En error-report/src/plugins/errorReport.js.
Nota Monitoreo de excepciones de Axios , las excepciones de Axios no se informarán;
// 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);
});
O comente el monitoreo nativo de Ajax y no se informarán las excepciones nativas de 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]);
};
¡La situación específica depende de las necesidades!
¡La situación específica depende de las necesidades!
¡La situación específica depende de las necesidades!
¡Di cosas importantes tres veces! ! !
Copyright del MIT (c) 2019 sky9102
