起因:项目中onError监听到了异常

window.addEventListener('error', ()=>{})window.addEventListener('error', ()=>{})

并发现了报错
查询之后发现
https://github.com/ant-design/ant-design/issues/23246

antd忽略了该报错
https://github.com/ant-design/ant-design/blob/a51439cbbabef454e35218864fddf0da96e4801e/site/theme/template/Layout/index.jsx#L46

本地也忽略了这个异常

最后如何优雅的处理前端异常

如何优雅处理前端异常

最后总结:

关于JS报错:ResizeObserver loop limit exceeded

  1. 报错影响范围,严重程度?
    无影响,属于可以忽略的报错
  2. 报错的来源?
    nfes-antd 引用的 Ant Design 组件库报的错
    我们监控了全局报错, 并发送至clog
  3. 什么情况下会触发
    报价页切换tab 和 某些交互,比如下拉框筛选
  4. 根本原因
    此错误意味着ResizeObserver无法在单个动画帧中提供所有观察值。这是良性的
    在重新渲染反应期间可能会触发ResizeObserver loop limit exceeded(多发于组件第一次注册和动态元素)
  5. 为什么可以忽略,
    该报错Ant Design官方处理方式是忽略
  6. 处理方法
    项目中 错误监控加了判断,忽略此类型的报错
使用elementui的el-table时,出现错误:ResizeObserver loop limit exceeded。 在网上搜到很多解决方法,最后找到了对自己有效的解决办法。 在el-table里加一行这个就行了。 <el-table-column type="index"></el-table-column> 由于项目中使用了自定义指令v-adaptive动态修改表格的高,element ui table的 addResizeListener 监听,动态改变table的高,会多次渲染table,导致监控平台报错 错误调试方式: created() { window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, erro...
最近在给三月份开发的项目,引入公司使用的一个性能检测网站,然后看到JS错误率100%,去检测网站看了下,错误列表里面展示:ResizeObserver loop limit exceeded;然后查了一圈,发现,应该是项目引入的antd的Table造成的,排查一圈,发现是在开发中设置antd的table横向滚动,其中x设置的都是300,然而表格的宽度 远远大于300,所以宽度溢出,造成的JS错误。将x轴的滚动去掉,就没有再报错了。
​ 公司内部搭建了前端监控系统Sentry,我把一些项目接入进去,一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多,给Sentry服务造成很大压力,于是研究一番准备解决之。 如果在一个动画帧内,ResizeObserver不能处理所有的observations,就会触发这个。 阻止table的重绘,例如给所有列都增加width,但是这个方案不好,无法自适应宽度。 resize时,给回调进行节流,使其1帧内最多执行一