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)
stack
. Talvez ajude em algo.event.error
só fica disponível pra coisas como "parse", para coisas comonew Image();
ou elementos DOM ele sempre retornaundefined
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.