vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别

最新推荐文章于 2024-07-03 16:08:17 发布

妍崽崽@

最新推荐文章于 2024-07-03 16:08:17 发布

阅读量6.8k

点赞数 11

分类专栏： js vue 文章标签： vue监听报错 onerror

本文链接：https://blog.csdn.net/weixin_44727080/article/details/113347346

版权

vue 同时被 2 个专栏收录

138 篇文章

订阅专栏

22 篇文章

订阅专栏

前言：

监听页面上的报错信息

项目中使用：判断路径上有没有这个版本号...具体内容可根据实际情况来

const asyncVersion = '20210128'
window.addEventListener('error', handleListenerError, true);
    function handleListenerError (eventErr){
      if (eventErr.srcElement.localName.includes('link' || 'script') && !window.location.href.includes('version=' + asyncVersion)) {
        // alert('因版本更新，页面需重新载入，请核对当次操作数据');
        window.location.href= window.location.host + window.location.pathname + '?version=' + VUE_APP_Version
      }
      eventErr.preventDefault()
    }

window.onerror

window.onerror是一个全局变量，默认值为null。当有js运行时错误触发时，window会触发error事件，并执行window.onerror()。onerror可以接受多个参数。

window.onerror = function(message, source, lineno, colno, error) { ... }

函数参数：

*   message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
*   source：发生错误的脚本URL（字符串）
*   lineno：发生错误的行号（数字）
*   colno：发生错误的列号（数字）
*   error：Error对象

若该函数返回true，则阻止执行默认事件处理函数，如异常信息不会在console中打印。没有返回值或者返回值为false的时候，异常信息会在console中打印

addEventListener('error')

监听js运行时错误事件，会比window.onerror先触发，与onerror的功能大体类似，不过事件回调函数传参只有一个保存所有错误信息的参数，不能阻止默认事件处理函数的执行，但可以全局捕获资源加载异常的错误

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

当资源（如img或script）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，但可以在捕获阶段被捕获
因此如果要全局监听资源加载错误，需要在捕获阶段捕获事件
//图片加载失败使用默认图片，依旧加载失败超过三次使用base64图片
window.addEventListener('error',function(e){
    let target = e.target, // 当前dom节点
        tagName = target.tagName,
        count = Number(target.dataset.count ) || 0, // 以失败的次数，默认为0
        max= 3; // 总失败次数，此时设定为3
    // 当前异常是由图片加载异常引起的
    if( tagName.toUpperCase() === 'IMG' ){
        if(count >= max){
            target.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//AK3/ALYH+5hX6FV5N4Y/5GHwx/vyf+iJa9ZrysPhoYVShDZu/potDmwWFhhIzhT2bv6aLQ//Z';
        }else{
            target.dataset.count = count + 1;
            target.src = '//xxx/default.jpg';
        }
    }
},true)