起因:项目中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
- 报错影响范围,严重程度?
无影响,属于可以忽略的报错 - 报错的来源?
nfes-antd 引用的 Ant Design 组件库报的错
我们监控了全局报错, 并发送至clog - 什么情况下会触发
报价页切换tab 和 某些交互,比如下拉框筛选 - 根本原因
此错误意味着ResizeObserver无法在单个动画帧中提供所有观察值。这是良性的
在重新渲染反应期间可能会触发ResizeObserver loop limit exceeded(多发于组件第一次注册和动态元素) - 为什么可以忽略,
该报错Ant Design官方处理方式是忽略 - 处理方法
项目中 错误监控加了判断,忽略此类型的报错
使用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%,去检测网站看了下,错误列表里面展示:Re
sizeOb
server l
oop limit exceeded;然后查了一圈,发现,应该是项目引入的
antd的Table造成的,排查一圈,发现是在开发中设置
antd的table横向滚动,其中x设置的都是300,然而表格的宽度 远远大于300,所以宽度溢出,造成的JS错误。将x轴的滚动去掉,就没有再
报错了。
公司内部搭建了前端监控系统Sentry,我把一些项目接入进去,一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多,给Sentry服务造成很大压力,于是研究一番准备解决之。
如果在一个动画帧内,ResizeObserver不能处理所有的observations,就会触发这个。
阻止table的重绘,例如给所有列都增加width,但是这个方案不好,无法自适应宽度。
resize时,给回调进行节流,使其1帧内最多执行一