error report
1.0.0
Introdução: Do ponto de vista da simplicidade, testabilidade e baixo acoplamento, a maioria dos desenvolvedores front-end pode se beneficiar do relatório de erros. Para resolver o problema do processamento unificado de informações de exceção de front-end, o relatório de erros dá origem a relatórios complexos de exceções de front-end. Registre informações de exceção de front-end, suporte ao armazenamento temporário de exceções quando desconectado e carregue automaticamente informações de exceção temporárias depois de online. Abrange exceções Vue, exceções Axios, exceções nativas de Ajax, exceções lançadas por JS, exceções Promise, exceções Async, exceções ao carregar recursos CDN de terceiros, etc., cobrindo quase todas as exceções que podem estar envolvidas no front-end.
import ErrorReport from "./plugins/errorReport";
Vue.use(ErrorReport, {
reportUrl: "http://localhost:10300/errorReport",
env: "dev",
appId: "error-report-5c6pz3e4il59k2f3b6",
appName: "error-report"
});
exemplos
| propriedade | ilustrar | tipo | valor padrão | se pode estar vazio |
|---|---|---|---|---|
| reportUrl | Endereço de relatório de exceção | Corda | http://localhost:10300/errorReport | N |
| atrasoTempo | Tempo de relatório de erros atrasado | Número | 3000 (unidade: milissegundos) | S |
| ID do aplicativo | ID do projeto | Corda | S | |
| nome do aplicativo | Nome do projeto | Corda | S | |
| navegador | Nome do navegador | Corda | Métodos internos podem obter | N |
| dispositivo | Nome do dispositivo | Corda | Métodos internos podem obter | N |
| ID do usuário | ID do usuário | Corda | S | |
| ficha | ficha | Corda | S | |
| intervalo de tempo | O carimbo de data/hora em que os dados foram enviados | Número | Obtenha o carimbo de data/hora atual sempre | S |
| infoType | Categoria de informação, o padrão é erro | Corda | tipo | S |
| mensagem | Detalhes do erro | Corda | Detalhes do erro | S |
| agente do usuário | agente do usuário | Corda | agente do usuário | S |
| URL da página | Endereço da página do relatório | Corda | janela.localização.href | S |
| pilha | Informações da pilha de erros | Corda | Informações da pilha de erros | S |
| localStorageKey | Recomenda-se usar uma chave fixa Na próxima vez que o usuário abrir o navegador, os dados anormais poderão ser restaurados e carregados diretamente. | Corda | localStorageKey | N |
| ambiente | Ambiente: dev, teste, uat, pro | Corda | ambiente de desenvolvimento | S |
| dados | Mais mensagens de erro | Objeto | Mais mensagens de erro | S |
Considerando que alguns projetos usam Ajax nativo, as exceções do Ajax são interceptadas nativamente, e as exceções do Axios também são interceptadas. Se calçados infantis usando Axios forem usados, as exceções serão relatadas duas vezes (motivo: interceptador de exceção do Axios uma vez, interceptação de exceção do Ajax nativo uma vez). não quiser reportá-lo duas vezes, você pode optar por comentar o código a seguir (qualquer um dos monitoramentos de exceção Axios e monitoramento Ajax é suficiente). Em relatório de erros/src/plugins/errorReport.js.
Nota Monitoramento de exceção do Axios , as exceções do Axios não serão relatadas;
// 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 comente o monitoramento nativo do Ajax e as exceções nativas do Ajax não serão relatadas.
// 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]);
};
A situação específica depende das necessidades!
A situação específica depende das necessidades!
A situação específica depende das necessidades!
Diga coisas importantes três vezes! ! !
Direitos autorais do MIT (c) 2019 sky9102
