ResizeObserver loop limit exceeded报错解决方案

ResizeObserver loop limit exceeded报错解决方案

背景

​ 公司内部搭建了前端监控系统Sentry，我把一些项目接入进去，一周后发现上报数量最多的事件是ResizeObserver loop limit exceeded。这些事件上报得太多，给Sentry服务造成很大压力，于是研究一番准备解决之。

问题原因

1. element ui中table组件的resize回调代码如下

/* istanbul ignore next */exportconstaddResizeListener=function(element, fn){if(isServer)return;if(!element.__resizeListeners__){
    element.__resizeListeners__ =[];
    element.__ro__ =newResizeObserver(resizeHandler);
    element.__ro__.observe(element);}
  element.__resizeListeners__.push(fn);};

1. 如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个ResizeObserver loop limit exceeded。

解决方案

1. 阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。<el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"width="180"></el-table-column><el-table-columnprop="address"label="地址"width="180"></el-table-column><el-table-columnprop="address"label="地址"width="180"></el-table-column></el-table>
2. resize时，给回调进行节流，使其1帧内最多执行一次。代码如下：import Vue from'vue';import ElementUI,{ Table }from'element-ui';import'element-ui/lib/theme-chalk/index.css';import App from'./App.vue';// 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题constfixElTableErr=(table)=>{const oldResizeListener = table.methods.resizeListener; table.methods.resizeListener=function(){ window.requestAnimationFrame(oldResizeListener.bind(this));};};// 一定要在Vue.use之前执行此函数fixElTableErr(Table);Vue.use(ElementUI);newVue({el:'#app',render:(h)=>h(App),});
3. element ui 在最新的版本中已经使用decounce方法修复了这个问题，源码如下：/* istanbul ignore next */exportconstaddResizeListener=function(element, fn){if(isServer)return;if(!element.__resizeListeners__){ element.__resizeListeners__ =[]; element.__ro__ =newResizeObserver(debounce(16, resizeHandler)); element.__ro__.observe(element);} element.__resizeListeners__.push(fn);};