window.onerror: url property empty when error in dynamically added script (via script tag)

Question

我想做的是知道动态添加的脚本是否发生错误。这应该通过检查 onerror 事件参数的 url 属性来完成。

但是，当我在脚本的开头添加事件侦听器时，即在动态添加脚本标记之前，如果动态添加的内部出现错误，url 属性为空脚本出现。

所以我尝试在添加脚本标签后重新绑定事件

document.head.appendChild(scriptElement);
document.getElementById(scriptTagId).addEventListener('onerror',someErrorFunction);

以及

scriptElement.setAttribute('onerror','someErrorFunction(event);');
document.head.appendChild(scriptElement);

也喜欢

document.head.appendChild(scriptElement);
window.addEventListener('onerror',someErrorFunction);

但无济于事。实际上，使用第一种方法甚至只能捕获错误，即在脚本开头绑定 onerror 事件。

Answer 1

我认为您在按 ID 获取脚本元素时遇到了问题。您可以使用简单的脚本加载器来实现最终结果。主要区别在于它绑定到脚本元素的 onerror 和 onload 属性，而不是使用事件侦听器

编辑

我对使用 window.onerror 并绑定到 onafterscriptexecute 而不是 onload 并使用 document.currentScript 获取脚本标签的脚本没有任何问题抛出错误。

window.onerror = function(message, source, lineno, colno, error){
  console.log('window.error', {
    message,
    source,
    lineno,
    colno,
    error,
    src: document.currentScript.src
  })
}

function loadScript(src, callback) {
  console.log('loading: ' + src)
  const script = document.createElement('script')
  script.onerror = function() {
    console.log('error loading script: ' + src)
  }
  script.onafterscriptexecute = callback
  script.src = src
  document.head.appendChild(script)
}

loadScript('http://codepen.io/synthet1c/pen/BLwWOb.js', function(){
  console.log('this aint gonna happen')
})

loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', function(){
  console.log('success loaded jQuery')
})

window.onerror: url property empty when error in dynamically added script (via script tag)

window.onerror: url property empty when error in dynamically added script (via script tag)

javascript

events

dynamic

onerror

编辑