Tableless

Busca Menu

Capturando erros JS LIKE-A-BOSS

Seja o primeiro a comentar por

O evento onerror é disparado quando há erros no script. Estes erros geralmente pertencem a duas categorias:

Erros de sintaxe

Antes de serem executados, scripts passam por uma análise sintática (operação mais conhecida como parsing) – afim de encontrar erros de sintaxe antes da execução do script. Qualquer um dos erros abaixo são erros de sintaxe:

<!-- string não fechada -->
<script>"oops, fiz merd*</script>
<!-- for errado -->
<script>for(;)</script>
<!-- ??? (só pode ser coisa de estagiário) -->
<script>chamaFuncao() = 'estagiario maluco'</script>

Erros de runtime (Exceções não tratadas)

Um script pode até ser válido sintaticamente, ou seja, pode ter sido analisado com sucesso pelo parser JS, mas mesmo assim ainda pode haver erros em tempo de execução (runtime). Por exemplo:

// chamar métodos não definidos
dartVader.comerTorta() // clique aqui para mais informações.
// ler índices inexistentes
var lordSidious = jedi[ 'palpatine' ];
// ler propriedades inexistentes
var paciencia = hanSolo.paciencia;
// mensagens de erro manuais
throw 'Noooooooooooooooooooo!';

Erros: temos que pegar

Apenas precisamos tratar o evento onerror de window, e para isso precisamos definir o seguinte callback:

// navegadores antigos
window.onerror = function( message, filename, lineno ){
    // trate o erro
}

// navegadores modernos
window.addEventListener( 'error', function( event ){
    // a mensagem de erro
    console.log( event.message );
    // a url de onde ocorreu o erro
    console.log( event.filename );
    // o número da linha onde ocorreu o erro
    console.log( event.lineno );
});

// jQuery
$(window).on( 'error', function( event ){
    // event tem os mesmos dados do exemplo anterior
});

A função que trata o evento onerrorrecebe 3 valores (como mostrado acima):

  • Mensagem: A mensagem de erro que o navegador joga (message ou event.message dos trechos código acima). Por exemplo: “Uncaught ReferenceError: comerTorta is not defined“.
  • URL: O endereço URL de onde ocorreu o erro (filename ou event.filename dos trechos código acima).
  • Linha: O número da linha do documento ou script de onde ocorreu o erro (lineno ou event.lineno dos trechos de código acima). Pode ser no contexto de um documento HTML (se o script for inline) ou de um arquivo .js (se o script for externo). Neste caso, o valor de filename/event.filename será o caminho de um arquivo .js.

Por padrão, a função retorna false, o que significa que a mensagem de erro será jogada no console de erros. Se quisermos suprimir as mensagens de erro no console (não aconselhável), apenas precisamos retornar true:

window.addEventListener( 'error', function( event ){
    return true;
});

Customize mensagens de erro

Já que agora temos o poder de fazer o que quiser com nossas mensagens de erro, também podemos ter aparência customizada para elas. Podemos alcançar isso facilmente como no script abaixo:

window.addEventListener( 'error', function( event ){
    var boxError = document.createElement( 'div' );
    boxError.className  = 'box-error';

    boxError.innerHTML  = '<h4>Erro de JS:</h4>';
    boxError.innerHTML += '<p class="msg">'+ event.message +'</p>';
    boxError.innerHTML += '<p>Em: '+ event.filename +'</p>';
    boxError.innerHTML += '<p>Linha: '+ event.lineno +'</p>';

    document.body.appendChild( boxError );
    return false;
});

O script acima basicamente cria uma nova <div>, monta o conteúdo da mensagem e a mostra no final. Agora é só definir o CSS para a classe .box-error e voilá, mensagens de erro customizadas.

Tenha feedback da sua aplicação

A maior utilidade que encontrei para isso é a possibilidade de fazer logging de erros. Numa aplicação, poderíamos por exemplo, fazer uma requisição ajax para nosso servidor salvar as informações do erro corrente e uma base de dados qualquer, e assim poderíamos gerar relatórios de erros da nossa aplicação com base nestes dados coletados, ou seja, graças a estas informações, estaríamos promovendo uma atitude focada na melhoria constante dos serviços.

Mantendo as coisas simples com o Google Analytics

Pra quem já usa o Google Analytics, aqui vai uma idéia que iria simplificar bastante o ato de fazer log de erros: em vez de fazer uma requisição ajax para o servidor da nossa aplicação, poderíamos simplesmente disparar eventos customizados do Google Analytics (com o método _trackEvent()), e assim teríamos essas informações prontas com os relatórios bonitinhos da ferramenta – o que nos economizaria o trabalho de desenvolver toda uma estrutura para isso: criar uma tabela de erros no nosso banco de dados, escrever o backend que receberia as requisições ajax, e finalmente, implementar relatórios de erros.

Suporte

O evento window.onerror é suportado por todos os navegadores atuais: Chrome 13+, Firefox 6.0+, Opera 11.60+, Safari 5.1+ e Internet Explorer 5.5+ (quem diria!).

Publicado no dia