error report
1.0.0
Pendahuluan: Dari perspektif kesederhanaan, kemampuan pengujian, dan penggabungan yang longgar, sebagian besar pengembang front-end dapat memperoleh manfaat dari laporan kesalahan. Untuk mengatasi masalah pemrosesan terpadu informasi pengecualian front-end, laporan kesalahan membawa pegas ke pelaporan pengecualian front-end yang kompleks. Rekam informasi pengecualian front-end, dukung penyimpanan sementara pengecualian saat terputus, dan unggah informasi pengecualian sementara secara otomatis setelah online. Mencakup pengecualian Vue, pengecualian Axios, pengecualian Ajax asli, pengecualian yang diberikan oleh JS, pengecualian Promise, pengecualian Async, pengecualian saat memuat sumber daya CDN pihak ketiga, dll., mencakup hampir semua pengecualian yang dapat terlibat di front end.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
contoh
| milik | menjelaskan | jenis | nilai bawaan | apakah itu bisa kosong |
|---|---|---|---|---|
| laporanUrl | Alamat pelaporan pengecualian | Rangkaian | http://localhost:10300/errorReport | N |
| waktu tunda | Waktu pelaporan kesalahan tertunda | Nomor | 3000 (satuan: milidetik) | Y |
| appId | ID Proyek | Rangkaian | Y | |
| nama aplikasi | Nama proyek | Rangkaian | Y | |
| peramban | Nama peramban | Rangkaian | Metode internal dapat diperoleh | N |
| perangkat | Nama perangkat | Rangkaian | Metode internal dapat diperoleh | N |
| ID pengguna | ID pengguna | Rangkaian | Y | |
| token | token | Rangkaian | Y | |
| rentang waktu | Stempel waktu saat data dikirim | Nomor | Dapatkan stempel waktu saat ini setiap saat | Y |
| infoType | Kategori informasi, defaultnya adalah kesalahan | Rangkaian | jenis | Y |
| pesan | Detail kesalahan | Rangkaian | Detail kesalahan | Y |
| agen pengguna | agen pengguna | Rangkaian | agen pengguna | Y |
| halamanUrl | Alamat halaman laporan | Rangkaian | jendela.lokasi.href | Y |
| tumpukan | Informasi tumpukan kesalahan | Rangkaian | Informasi tumpukan kesalahan | Y |
| kunci penyimpanan lokal | Disarankan untuk menggunakan kunci tetap. Saat pengguna membuka browser lagi, data abnormal dapat langsung dipulihkan dan diunggah. | Rangkaian | kunci penyimpanan lokal | N |
| env | Lingkungan: dev, test, uat, pro | Rangkaian | lingkungan pengembangan | Y |
| data | Lebih banyak pesan kesalahan | Obyek | Lebih banyak pesan kesalahan | Y |
Mengingat beberapa proyek menggunakan Ajax asli, pengecualian Ajax dicegat secara asli, dan pengecualian Axios juga dicegat. Jika sepatu anak-anak yang menggunakan Axios digunakan, pengecualian akan dilaporkan dua kali (alasan: intersepsi pengecualian Axios satu kali, intersepsi pengecualian asli Ajax satu kali) Jika Anda tidak ingin melaporkannya dua kali, Anda dapat memilih untuk mengomentari kode berikut (salah satu dari pemantauan pengecualian Axios dan pemantauan Ajax sudah cukup). Di laporan kesalahan/src/plugins/errorReport.js.
Catatan Pemantauan pengecualian Axios , pengecualian Axios tidak akan dilaporkan;
// 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);
});
Atau beri komentar pada pemantauan Ajax asli, dan pengecualian Ajax asli tidak akan dilaporkan.
// 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]);
};
Situasi spesifiknya tergantung pada kebutuhan!
Situasi spesifiknya tergantung pada kebutuhan!
Situasi spesifiknya tergantung pada kebutuhan!
Katakan hal-hal penting tiga kali! ! !
Hak Cipta MIT (c) 2019 sky9102
