error report
1.0.0
Einführung: Unter dem Gesichtspunkt der Einfachheit, Testbarkeit und losen Kopplung können die meisten Front-End-Entwickler von Fehlerberichten profitieren. Um das Problem der einheitlichen Verarbeitung von Front-End-Ausnahmeinformationen zu lösen, bringt error-report den Frühling in die komplexe Front-End-Ausnahmeberichterstattung. Zeichnen Sie Front-End-Ausnahmeinformationen auf, unterstützen Sie die temporäre Speicherung von Ausnahmen, wenn die Verbindung getrennt wird, und laden Sie temporäre Ausnahmeinformationen nach dem Online-Vorgang automatisch hoch. Deckt Vue-Ausnahmen, Axios-Ausnahmen, native Ajax-Ausnahmen, von JS ausgelöste Ausnahmen, Promise-Ausnahmen, Async-Ausnahmen, Ausnahmen beim Laden von CDN-Ressourcen von Drittanbietern usw. ab und deckt fast alle Ausnahmen ab, die am Front-End beteiligt sein können.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
Beispiele
| Eigentum | veranschaulichen | Typ | Standardwert | ob es leer sein kann |
|---|---|---|---|---|
| reportUrl | Ausnahmemeldeadresse | Zeichenfolge | http://localhost:10300/errorReport | N |
| Verzögerungszeit | Verzögerte Fehlermeldezeit | Nummer | 3000 (Einheit: Millisekunden) | Y |
| appId | Projekt-ID | Zeichenfolge | Y | |
| AppName | Projektname | Zeichenfolge | Y | |
| Browser | Browsername | Zeichenfolge | Interne Methoden können erhalten werden | N |
| Gerät | Gerätename | Zeichenfolge | Interne Methoden können erhalten werden | N |
| Benutzer-ID | Benutzer-ID | Zeichenfolge | Y | |
| Token | Token | Zeichenfolge | Y | |
| Zeitspanne | Der Zeitstempel, als die Daten gesendet wurden | Nummer | Holen Sie sich jedes Mal den aktuellen Zeitstempel | Y |
| infoType | Informationskategorie, Standard ist Fehler | Zeichenfolge | Typ | Y |
| Nachricht | Fehlerdetails | Zeichenfolge | Fehlerdetails | Y |
| userAgent | userAgent | Zeichenfolge | userAgent | Y |
| pageUrl | Adresse der Berichtsseite | Zeichenfolge | window.location.href | Y |
| Stapel | Informationen zum Fehlerstapel | Zeichenfolge | Informationen zum Fehlerstapel | Y |
| localStorageKey | Es wird empfohlen, einen festen Schlüssel zu verwenden, wenn der Benutzer das nächste Mal den Browser öffnet, können die abnormalen Daten direkt wiederhergestellt und hochgeladen werden. | Zeichenfolge | localStorageKey | N |
| env | Umgebung: dev, test, uat, pro | Zeichenfolge | Entwicklungsumgebung | Y |
| Daten | Weitere Fehlermeldungen | Objekt | Weitere Fehlermeldungen | Y |
In Anbetracht der Tatsache, dass einige Projekte natives Ajax verwenden, werden Ajax-Ausnahmen nativ abgefangen, und Axios-Ausnahmen werden auch abgefangen. Wenn Kinderschuhe verwendet werden, werden Ausnahmen zweimal gemeldet (Grund: Axios-Ausnahme-Interceptor einmal, natives Ajax-Ausnahme-Abfangen einmal). Wenn Sie es nicht zweimal melden möchten, können Sie den folgenden Code kommentieren (jede Axios-Ausnahmeüberwachung oder Ajax-Überwachung reicht aus). In error-report/src/plugins/errorReport.js.
Hinweis Axios-Ausnahmeüberwachung : Axios-Ausnahmen werden nicht gemeldet.
// 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);
});
Oder kommentieren Sie die native Ajax-Überwachung aus, und native Ajax-Ausnahmen werden nicht gemeldet.
// 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]);
};
Die konkrete Situation hängt von den Bedürfnissen ab!
Die konkrete Situation hängt von den Bedürfnissen ab!
Die konkrete Situation hängt von den Bedürfnissen ab!
Sagen Sie wichtige Dinge dreimal! ! !
MIT Copyright (c) 2019 sky9102
