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

前言：

监听页面上的报错信息

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

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, // 以失败的次数，默认为0max= 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)

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

vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
【vue打包】线上部署报错net::ERR_ABORTED 404 (Not Found)
文章目录一.问题: 二.分析: 三.解决: 四.扩展: 一.问题: 线上部署报错net::ERR_ABORTED 404 (Not Found),但本地部署到nginx里面却没问题二.分析: pu ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
【vue】文件批量上传报错问题解决Uncaught TypeError: Cannot set properties of undefined (setting ‘status‘)
一.问题描述最近在vue项目上,使用el-upload组件实现多文件上传功能时出现了如下的报错内容. Uncaught TypeError: Cannot set properties of und ...
vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
Vue监听页面元素高度变化
使用Vue时,有时候需要获取页面渲染完成后某个元素的高度,但由于数据没有渲染完成,可能获取不到准确的高度,这时需要使用 watch结合this.$nextTick()来解决 watch:{listDa ...
vue监听页面滑动到底部
mounted () {let _this = this;window.onscroll = function(){//变量scrollTop是滚动条滚动时,距离顶部的距离var scrollTop ...
Jmeter上传大文件无法上传报错的处理方法（Socket write error）
这时候,我们需要设置两个地方: 1)我们需要不勾选上传文件步骤中的KeepAlive 2)修改apache-jmeter-5.1.1\bin\jmeter.properties httpclient4 ...

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

前言：

监听页面上的报错信息

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

更多：

window.onerror

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

addEventListener('error')

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

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

最新文章

热门文章