Experimente o Atatus, que fornece rastreamento avançado de erros e monitoramento real de usuários para aplicativos da web modernos.
https://www.atatus.com/
Deixe-me explicar como obter rastreamentos de pilha razoavelmente completos em todos os navegadores.
Tratamento de erros em JavaScript
O Chrome e o Opera modernos são totalmente compatíveis com as especificações de rascunho do HTML 5 para ErrorEvent e window.onerror. Nos dois navegadores, você pode usar window.onerrorou vincular o evento 'error' corretamente:
// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
console.log(message, "from", error.stack);
// You can send data to your server
// sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
console.log(e.error.message, "from", e.error.stack);
// You can send data to your server
// sendError(data);
})
Infelizmente, o Firefox, o Safari e o IE ainda estão por aí e também precisamos apoiá-los. Como o stacktrace não está disponível window.onerror, precisamos trabalhar um pouco mais.
Acontece que a única coisa que podemos fazer para obter rastreamentos de pilha de erros é agrupar todo o nosso código em um try{ }catch(e){ }bloco e depois examinar e.stack. Podemos tornar o processo um pouco mais fácil com uma função chamada wrap que pega uma função e retorna uma nova função com boa manipulação de erros.
function wrap(func) {
// Ensure we only wrap the function once.
if (!func._wrapped) {
func._wrapped = function () {
try{
func.apply(this, arguments);
} catch(e) {
console.log(e.message, "from", e.stack);
// You can send data to your server
// sendError(data);
throw e;
}
}
}
return func._wrapped;
};
Isso funciona. Qualquer função que você agrupar manualmente terá um bom tratamento de erros, mas na verdade podemos fazer isso automaticamente na maioria dos casos.
Alterando a definição global de addEventListenerpara que ele agrupe automaticamente o retorno de chamada, podemos inserir automaticamente a try{ }catch(e){ }maioria dos códigos. Isso permite que o código existente continue a funcionar, mas adiciona o rastreamento de exceções de alta qualidade.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Também precisamos garantir que isso removeEventListenercontinue funcionando. No momento, não será porque o argumento para addEventListenerfoi alterado. Novamente, só precisamos consertar isso no prototypeobjeto:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Transmitir dados de erro para o seu back-end
Você pode enviar dados de erro usando a tag de imagem da seguinte maneira
function sendError(data) {
var img = newImage(),
src = 'http://yourserver.com/jserror&data=' + encodeURIComponent(JSON.stringify(data));
img.crossOrigin = 'anonymous';
img.onload = function success() {
console.log('success', data);
};
img.onerror = img.onabort = function failure() {
console.error('failure', data);
};
img.src = src;
}
Isenção de responsabilidade: Sou desenvolvedor da Web em https://www.atatus.com/ .
