6

Quando eu defino true no parâmetro useCapture:

addEventListener(type, listener[, useCapture]);

Eu consigo pegar qualquer erro, no entanto eu não consigo pegar os detalhes do erro, vejam:

window.addEventListener('error', function(e) {
    console.log(e);
}, true);

Mas no console revirei o evento (variável e) e não há a mensagem com detalhes, a única coisa que consigo ver é o target.

Tentei usar isto:

window.onerror = function(msg, err, line) {
    console.log(msg, err, line);
};

Mas o problema é que window.onerror não captura todos eventos, como por exemplo os erros de HTTP.

Supondo que eu chame um script que não existe assim <script src="foo.js"></script>, o window.onerror não dispara e não tem como eu adicionar manualmente, levando em consideração que certas bibliotecas carregam coisas como <img>, <script> e <iframe> dinamicamente.

Note que tentei adicionar <script src="foo.js" onerror="alert(arguments[0]);"></script>, apenas pra testar, mas ele funciona diferente do window.onerror e não captura a mensagem de erro.

Existe alguma maneira de capturar qualquer erro (como erros de parse e erros HTTP), ou isto é impossível?

4
  • @GuilhermeNascimento De uma olhada nesse artigo, de uma atenção na parte Capture the Stack, onde é mencionado a propriedade stack. Talvez ajude em algo.
    – stderr
    Commented 4/08/2016 às 1:23
  • @zekk parece que infelizmente o event.error só fica disponível pra coisas como "parse", para coisas como new Image(); ou elementos DOM ele sempre retorna undefined
    – Syzoth
    Commented 4/08/2016 às 1:42
  • 1
    Talvez - e isso é só um palpite - erros como esses que você quer capturar só existam na fase de captura, e não na de borbulhamento (por isso usar useCapture falso não pega esses erros). E se o tratamento de erros na fase de captura for substancialmente diferente da fase de borbulhamento, talvez esses "detalhes do erro" sequer existam na forma como você espera. Seria necessário alguém com mais experiência comentar, pois pelo que eu vejo a fase de captura raramente é usada (eu próprio custei pra descobrir que ela sequer existia), o que dificulta encontrar detalhes do seu funcionamento.
    – mgibsonbr
    Commented 4/08/2016 às 19:39
  • 1
    @mgibsonbr acho que esta correto, quero dizer, não pelo useCapture, mas sim pelo momento, supondo que exista uma Interface chamada ErrorEvent, ela deve ser generica, sendo um erro no javascript ela terá mais propriedades no objeto, sendo erro HTTP ele usará apenas o básico da interface pra disparar o evento. Por exemplo, como o zekk disse, algumas propriedade só foram implementadas depois.
    – Syzoth
    Commented 4/08/2016 às 19:53

1 Resposta 1

3

Precisamos de dividir os tipos de eventos. Erros de HTTP e de compilação.
Eles são detetados/capturados de maneira diferente.

Vou referir primeiro a erros de HTTP que creio ser o foco da pergunta, e depois refiro-me a outros erros muito inspirado por esta resposta no SOen.

HTTP

Quando temos um recurso externo que precisa ser carregado, pode acontecer que esse recurso falhe a carregar. Porque não foi possível fazer o seu download, ou porque o seu conteúdo não pôde ser interpretado/compilado, ie não é executável.

Estes erros são difíceis de detectar e não sabemos muito sobre eles.

Há várias maneiras de carregar componentes externos. Via HTML com tags como script, img, link, via AJAX ou por exemplo via iframe.

Carregando no documento com script, img, link

Quando um recurso não carrega podemos detectar isso de maneira global ou localmente na tag.

Estive a comparar os eventos que recebemos de window.addEventListener('error', e <script onerror= e parece-me que ambos têm a mesma informação.

		// usei este script para percorrer os eventos e comparar 
		// o seu conteúdo nos dois primeiros níveis
        for (var k in e) {
            if (e[k] &&typeof e[k] == 'string') console.log(k, e[k])
            if (typeof e[k] == 'object') {
                for (var p in e[k]) {
                    if (e[k][p] && typeof e[k][p] == 'string') console.log(p, e[k][p])
                }
            }
        }

Assim usando:

window.addEventListener('error', function(e) {
    getDetails(e, 'global');
}, true);

ou usando:

<div onerror="console.log(event, 'div')">
    <script onerror="getDetails(event, 'script')" src="lfdghjdf.js"></script>
</div>

Obti os mesmos resultados. Naturalmente que <div onerror nunca é chamado pois o evento error não se propaga no DOM.

O teste que fiz foi:

<script>
    function getDetails(e, where) {
        var info = {
            targetInfo: {}
        };
        var props = ["type", "bubbles", "cancelable", "view", "detail", "message"];
        props.forEach(function(prop) {
            info[prop] = e[prop];
        });

        ["tagName", "outerHTML", "src"].forEach(function(prop) {
            info.targetInfo[prop] = e.target[prop];
        });
        info.targetInfo.srcValue = e.target.attributes.src.value;
        var json = JSON.stringify(info, null, 4);
        console.log(where);
        console.log(json);
        console.log('-----------------');
    }
    window.addEventListener('error', function(e) {
        getDetails(e, 'global');
    }, true);

</script>

<div onerror="console.log(event, 'div')">
    <script onerror="getDetails(event, 'script')" src="lfdghjdf.js"></script>
</div>

E o resultado:

global
{
    "targetInfo": {
        "tagName": "SCRIPT",
        "outerHTML": "<script onerror=\"getDetails(event, 'script')\" src=\"lfdghjdf.js\"></script>",
        "src": "https://fiddle.jshell.net/toyubp9L/show/lfdghjdf.js",
        "srcValue": "lfdghjdf.js"
    },
    "type": "error",
    "bubbles": false,
    "cancelable": false
}
-----------------
{
    "targetInfo": {
        "tagName": "SCRIPT",
        "outerHTML": "<script onerror=\"getDetails(event, 'script')\" src=\"lfdghjdf.js\"></script>",
        "src": "https://fiddle.jshell.net/toyubp9L/show/lfdghjdf.js",
        "srcValue": "lfdghjdf.js"
    },
    "type": "error",
    "bubbles": false,
    "cancelable": false
}

Este método deteta falhas no acesso ao recurso, para falhar de compilação falo na proxima secção.

Carregando via iframe

Aqui estamos de mãos atadas. Tanto quanto sei, sem acesso à window da iframe não há como saber que um erro ocorreu.

Carregando via AJAX

Supondo que carregamos todos os recursos externos via AJAX é possível qual o componente que teve problemas pois podemos isolar cada componente muito melhor. Não me vou alongar com ajax por agora, mas o ajax tem o seu próprio evento error que podemos usar e uma vez que chamamos um recurso um a um sabemos qual falha.

Erros de compilação

Aqui temos mais informação sobre o que se passa pois o browser tenta compilar código e ao falhar partilha via window.onerror.

Note-se que o window.onerror recebe muito mais informação que o elemento.onerror, daí que seja preferível para debug.

Os tipos de erro que ele regista:

erros não silenciados

  • Throw "mensagens do browser"
  • variaveis_nao_defenidas();
  • cross_origin_iframe.contentWindow.document;, falhas de segurança como CORS

erros de compilação

  • <script>{</script>
  • <script>for(;)</script>
  • <script>"oops</script>
  • setTimeout("{", 10);, porque "{" vai ser compilado com script

Um exemplo de código que vai dar erro de compilação (parse error) poderia ser:

function foo(){

{{{...

ou mais natural de acontecer:

var hoje = new Date();
alert(hoj); // esqueci o "e"

Isto poderia ser detectado com

window.onerror = function(msg, url, line, col, error) {
   // col & error são recentes, inseriram-se no HTML5
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);
   return true; // para evitar alert no IE
};

Um exemplo seria:

<script>
    window.onerror = function(msg, url, line, col, error) {
        // col & error são recentes, inseriram-se no HTML5
        var extra = !col ? '' : '\ncolumn: ' + col;
        extra += !error ? '' : '\nerror: ' + error;
        alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);
        return true; // para evitar alert no IE
    };

</script>
<script>!{..</script>

Este método pode ser muito útil para scripts locais, e com esta informação enviar por exemplo com AJAX informação de erros para o servidor e assim detectar-se erros nos clientes.

Contudo, se o script que tiver problemas de compilação for externo, ele vai ser interpretado/compilado no contexto global e não conseguimos saber nada dele... só que aconteceu.


Nota:

O addEventListener não detecta erros de compilação. Por isso uso esse método. O onerror é melhor em erros de compilação pois passa mais argumentos.

Fica um exemplo que testei no Chrome: https://jsfiddle.net/bj7478g4/

Referências:

(Em Inglês)

2
  • Algum motivo em especial para usar window.addEventListener('error', callback) para erros no HTML e window.onerror para erros de compilação? aparentemente o window.addEventListener('error', callback) também consegue tratar erros de compilação.: jsfiddle.net/TobyMosque/6vou4rdy Commented 4/08/2016 às 14:11
  • @TobyMosque sim, juntei isso à resposta, bem visto.
    – Sergio
    Commented 4/08/2016 às 14:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .