ResizeObserver?loop?limit?exceeded報錯原因及解決方案

更新時間：2023年09月21日 11:41:44 作者：只愛喝白開水

這篇文章主要給大家介紹了關于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下

背景

? 公司內部搭建了前端監(jiān)控系統(tǒng)Sentry，我把一些項目接入進去，一周后發(fā)現(xiàn)上報數(shù)量最多的事件是ResizeObserver loop limit exceeded。這些事件上報得太多，給Sentry服務造成很大壓力，于是研究一番準備解決之。

問題原因

element ui中table組件的resize回調代碼如下

/* istanbul ignore next */
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

如果在一個動畫幀內，ResizeObserver不能處理所有的observations，就會觸發(fā)這個ResizeObserver loop limit exceeded。

解決方案

阻止table的重繪，例如給所有列都增加width，但是這個方案不好，無法自適應寬度。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址" width="180"> </el-table-column>
</el-table>

resize時，給回調進行節(jié)流，使其1幀內最多執(zhí)行一次。代碼如下：

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」問題
const fixElTableErr = (table) => {
    const oldResizeListener = table.methods.resizeListener;
    table.methods.resizeListener = function () {
        window.requestAnimationFrame(oldResizeListener.bind(this));
    };
};
// 一定要在Vue.use之前執(zhí)行此函數(shù)
fixElTableErr(Table);
Vue.use(ElementUI);
new Vue({
    el: '#app',
    render: (h) => h(App),
});

element ui 在最新的版本中已經使用decounce方法修復了這個問題，源碼如下：

/* istanbul ignore next */
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(debounce(16, resizeHandler));
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};