error report
1.0.0
Introduction : Du point de vue de la simplicité, de la testabilité et du couplage lâche, la plupart des développeurs front-end peuvent bénéficier du rapport d'erreurs. Pour résoudre le problème du traitement unifié des informations sur les exceptions frontales, le rapport d'erreurs apporte du ressort aux rapports complexes sur les exceptions frontales. Enregistrez les informations sur les exceptions frontales, prenez en charge le stockage temporaire des exceptions en cas de déconnexion et téléchargez automatiquement les informations sur les exceptions temporaires après la mise en ligne. Couvre les exceptions Vue, les exceptions Axios, les exceptions Ajax natives, les exceptions levées par JS, les exceptions Promise, les exceptions Async, les exceptions lors du chargement de ressources CDN tierces, etc., couvrant presque toutes les exceptions pouvant être impliquées dans le front-end.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
exemples
| propriété | illustrer | taper | valeur par défaut | s'il peut être vide |
|---|---|---|---|---|
| URL du rapport | Adresse de rapport d'exception | Chaîne | http://localhost:10300/errorReport | N |
| delayTime | Délai de rapport d'erreur retardé | Nombre | 3000 (unité : millisecondes) | Oui |
| identifiant d'application | ID du projet | Chaîne | Oui | |
| Nom de l'application | Nom du projet | Chaîne | Oui | |
| navigateur | Nom du navigateur | Chaîne | Les méthodes internes peuvent obtenir | N |
| appareil | Nom de l'appareil | Chaîne | Les méthodes internes peuvent obtenir | N |
| ID de l'utilisateur | ID de l'utilisateur | Chaîne | Oui | |
| jeton | jeton | Chaîne | Oui | |
| durée | L'horodatage de l'envoi des données | Nombre | Obtenez l'horodatage actuel à chaque fois | Oui |
| infoType | Catégorie d'informations, la valeur par défaut est erreur | Chaîne | taper | Oui |
| message | Détails de l'erreur | Chaîne | Détails de l'erreur | Oui |
| agentutilisateur | agentutilisateur | Chaîne | agentutilisateur | Oui |
| URL de la page | Adresse de la page de rapport | Chaîne | fenêtre.emplacement.href | Oui |
| empiler | Informations sur la pile d'erreurs | Chaîne | Informations sur la pile d'erreurs | Oui |
| clé de stockage locale | Il est recommandé d'utiliser une clé fixe. La prochaine fois que l'utilisateur ouvrira le navigateur, les données anormales pourront être directement restaurées et téléchargées. | Chaîne | clé de stockage locale | N |
| env | Environnement : dev, test, uat, pro | Chaîne | environnement de développement | Oui |
| données | Plus de messages d'erreur | Objet | Plus de messages d'erreur | Oui |
Étant donné que certains projets utilisent Ajax natif, les exceptions Ajax sont interceptées de manière native et les exceptions Axios sont également interceptées. Si des chaussures pour enfants utilisant Axios sont utilisées, les exceptions seront signalées deux fois (raison : intercepteur d'exceptions Axios une fois, interception d'exceptions Ajax native une fois). Si vous ne voulez pas le signaler deux fois, vous pouvez choisir de commenter le code suivant (n'importe laquelle des surveillances des exceptions Axios et Ajax suffit). Dans error-report/src/plugins/errorReport.js.
Remarque Surveillance des exceptions Axios , les exceptions Axios ne seront pas signalées ;
// 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);
});
Ou commentez la surveillance Ajax native, et les exceptions Ajax natives ne seront pas signalées.
// 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 situation spécifique dépend des besoins !
La situation spécifique dépend des besoins !
La situation spécifique dépend des besoins !
Dites les choses importantes trois fois ! ! !
Copyright MIT (c) 2019 sky9102
