error report
1.0.0
소개: 단순성, 테스트 용이성 및 느슨한 결합의 관점에서 대부분의 프런트 엔드 개발자는 오류 보고의 이점을 누릴 수 있습니다. 프런트엔드 예외 정보 통합 처리의 문제점을 해결하기 위해 error-report는 복잡한 프런트엔드 예외 보고 기능을 제공합니다. 프런트 엔드 예외 정보를 기록하고, 연결이 끊어졌을 때 예외의 임시 저장을 지원하며, 온라인 후 임시 예외 정보를 자동으로 업로드합니다. Vue 예외, Axios 예외, 기본 Ajax 예외, JS에서 발생하는 예외, Promise 예외, Async 예외, 타사 CDN 리소스를 로드할 때의 예외 등을 다루며 프런트 엔드에 포함될 수 있는 거의 모든 예외를 다룹니다.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
예
| 재산 | 설명하다 | 유형 | 기본값 | 비어있을 수 있는지 |
|---|---|---|---|---|
| 보고서 URL | 예외신고주소 | 끈 | http://localhost:10300/errorReport | N |
| 지연시간 | 지연된 오류 보고 시간 | 숫자 | 3000 (단위: 밀리초) | 와이 |
| 앱 ID | 프로젝트 ID | 끈 | 와이 | |
| 앱 이름 | 프로젝트 이름 | 끈 | 와이 | |
| 브라우저 | 브라우저 이름 | 끈 | 내부 방법을 얻을 수 있습니다 | N |
| 장치 | 장치 이름 | 끈 | 내부 방법을 얻을 수 있습니다 | N |
| 사용자 ID | 사용자 ID | 끈 | 와이 | |
| 토큰 | 토큰 | 끈 | 와이 | |
| 시간 범위 | 데이터가 전송된 타임스탬프 | 숫자 | 매번 현재 타임스탬프를 가져옵니다. | 와이 |
| 정보 유형 | 정보 카테고리, 기본값은 오류입니다. | 끈 | 유형 | 와이 |
| 메시지 | 오류 세부정보 | 끈 | 오류 세부정보 | 와이 |
| 사용자 에이전트 | 사용자 에이전트 | 끈 | 사용자 에이전트 | 와이 |
| 페이지 URL | 신고 페이지 주소 | 끈 | 창.위치.href | 와이 |
| 스택 | 오류 스택 정보 | 끈 | 오류 스택 정보 | 와이 |
| 로컬스토리지키 | 고정된 키를 사용하는 것이 좋습니다. 다음 번에 사용자가 브라우저를 열면 비정상적인 데이터가 직접 복원되어 업로드될 수 있습니다. | 끈 | 로컬스토리지키 | N |
| 환경 | 환경: dev, test, uat, pro | 끈 | 개발 환경 | 와이 |
| 데이터 | 추가 오류 메시지 | 물체 | 추가 오류 메시지 | 와이 |
일부 프로젝트에서는 Native Ajax를 사용한다는 점을 고려하면 Ajax 예외도 네이티브로 가로채고, Axios를 사용하는 아동용 신발을 사용하는 경우 예외가 두 번 보고됩니다(이유: Axios 예외 가로채기 1회, 기본 Ajax 예외 가로채기 1회). 두 번 보고하고 싶지 않다면 다음 코드에 주석을 달도록 선택할 수 있습니다( Axios 예외 모니터링 및 Ajax 모니터링 중 하나면 충분합니다). error-report/src/plugins/errorReport.js에 있습니다.
참고 Axios 예외 모니터링 , Axios 예외는 보고되지 않습니다.
// 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);
});
또는 기본 Ajax 모니터링을 주석 처리하면 기본 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]);
};
구체적인 상황은 필요에 따라 다릅니다!
구체적인 상황은 필요에 따라 다릅니다!
구체적인 상황은 필요에 따라 다릅니다!
중요한 말을 세 번 말하세요! ! !
MIT 저작권 (c) 2019 sky9102
