这次的实验,针对的是页面error处理的
<html>
<head>
<style>
.container {
border: 1px solid gray;
margin: auto;
max-width: 600px;
height: 600px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
}
.container>div {
display: inline;
background-color: pink;
box-sizing: border-box;
}
.container>div:nth-child(1) {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
margin-right: 2px;
}
img.err {
display: none;
}
</style>
<script>
</script>
<script src="https://cdn.bootcss.com/vue/2.6.101/vue.min.js"></script>
<script>
window.addEventListener('error', (e) => {
let {
target
} = e
let ec = Object.getPrototypeOf(e).constructor
if (ec == Event) {
let type = target.nodeName.toLowerCase()
console.log(type)
} else if (ec == ErrorEvent) {
console.log(e.message)
}
}, true)
</script>
</head>
<body>
<script>
console.log(2)
</script>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>
<img src="https://user-gold-cdn.xitu.io/2019/9/17/16d3e878fdsa371125e0?imageView2/1/w/120/h/120/q/85/format/webp/interlace/1" onload="console.log('img loaded')" />
</div>
</div>
<script>
setTimeout(()=>{
console.log(varNotExits.pro);
},1000)
</script>
</body>
</html>
其他语言,有全局捕获异常的方式,web里面有没有呢,经过一番查找发现也是有的
以下链接是文档描述 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
Error事件当js运行时异常,或者资源错误(img或者script)加载失败 会被抛出,使用window.addEventListener('error',fn)去捕捉
但是我实验了下,资源异常,使用window.addEventListener('error',fn)捕捉不到。再仔细看看了描述,mdn上有述资源异常,window.addEventListener('error',fn,useCapture)去捕捉
addEventListener文档描述如下
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
最终如上面code所示,意在处理,脚本加载错误,图片加载错误,运行时错误(如访问不存在变量)。。。
发现我们捕获到了img加载错误,以及运行时错误,但是脚本错误没有捕获到,为什么?因为脚本放置顺序在注册error事件之前,换下位置就可以了。
这里又有个tip了,比如在这里可以做个统一的错误上报处理,或者图片加载失败替换为默认暂未图等操作,发挥舞台很大