ResizeObserver 相关问题解决方案

最新推荐文章于 2025-10-12 22:23:20 发布
原创 最新推荐文章于 2025-10-12 22:23:20 发布 · 384 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui

ResizeObserver 相关问题解决方案----错误抑制

一、问题背景

在使用 ResizeObserver 监测元素尺寸变化时（尤其在 Element Plus 等 UI 组件库中），常出现以下错误：

  • ResizeObserver loop completed with undelivered notifications：因元素尺寸快速连续变化，浏览器无法及时处理所有尺寸变化通知，导致循环错误
  • 关联错误如 Cannot convert object to primitive value：可能伴随 ResizeObserver 回调执行异常出现

这些错误通常不影响功能运行，但会污染控制台输出，干扰开发调试。

二、解决方案核心思路

通过拦截错误处理机制、包装 ResizeObserver 实例，实现对特定错误的抑制，同时不影响其他正常错误的监控。

三、具体实现方案

1. 错误识别规则

定义错误过滤函数，精准匹配需要忽略的错误特征：

javascript

运行

const shouldIgnoreError = (message) => {
  if (typeof message !== 'string') return false
  return message.includes('ResizeObserver') || 
         message.includes('loop completed with undelivered notifications') ||
         message.includes('Cannot convert object to primitive value')
}

2. 重写全局错误处理

  • 覆盖 window.onerror：拦截页面级错误，符合规则则阻止默认处理

    javascript

    运行

    const originalOnError = window.onerror
window.onerror = function(message) {
  if (shouldIgnoreError(message)) return true
  return originalOnError ? originalOnError.apply(this, arguments) : false
}

  • 拦截控制台输出：过滤 console.error 和 console.warn 中的目标错误

    javascript

    运行

    const originalConsoleError = console.error
console.error = function(...args) {
  const message = args.join(' ')
  if (!shouldIgnoreError(message)) {
    originalConsoleError.apply(console, args)
  }
}

// console.warn 处理逻辑与 error 一致，略

3. 监听错误事件

  • 捕获 error 事件：通过事件冒泡机制拦截错误，阻止传播

    javascript

    运行

    window.addEventListener('error', (e) => {
  if (shouldIgnoreError(e.message)) {
    e.stopImmediatePropagation()
    e.preventDefault()
  }
}, true)

  • 处理未捕获的 Promise 异常：拦截 Promise 链中抛出的相关错误

    javascript

    运行

    window.addEventListener('unhandledrejection', (e) => {
  if (e.reason && shouldIgnoreError(e.reason.message)) {
    e.preventDefault()
    e.stopPropagation()
  }
})

4. 包装 ResizeObserver 构造函数

通过延迟执行回调避免同步循环错误：

javascript

运行

if (typeof ResizeObserver !== 'undefined') {
  const originalResizeObserver = ResizeObserver
  window.ResizeObserver = class extends originalResizeObserver {
    constructor(callback) {
      super((entries, observer) => {
        // 用 setTimeout 打破同步循环，避免触发浏览器异常
        setTimeout(() => {
          try {
            callback(entries, observer)
          } catch (error) {
            if (!shouldIgnoreError(error.message)) {
              originalConsoleError.call(console, error)
            }
          }
        }, 0)
      })
    }
  }
}

四、使用方法

  1. 引入工具模块并执行初始化（模块加载时已自动生效核心逻辑）：

    javascript

    运行

    import { suppressResizeObserverErrors } from './resizeObserverFix.js'
suppressResizeObserverErrors() // 控制台输出"ResizeObserver 错误抑制已启用"

  2. 无需修改原有 ResizeObserver 使用方式，工具会自动拦截处理错误。

五、注意事项

  1. 本方案为错误抑制而非根本修复，适用于错误不影响功能的场景
  2. 若需彻底解决，需排查元素尺寸频繁变化的根源（如布局抖动）
  3. 避免过度依赖：长期应关注浏览器或组件库对 ResizeObserver 实现的优化
  4. 可能影响对目标错误的调试，开发阶段可暂时禁用以定位问题

六、参考代码

/**
 * ResizeObserver 错误抑制工具
 * 用于解决 Element Plus 等 UI 组件库中常见的 ResizeObserver 相关错误：
 * - ResizeObserver loop completed with undelivered notifications
 * - Cannot convert object to primitive value
 * 这些错误通常不影响功能但会污染控制台，本工具通过拦截错误处理机制实现精准过滤
 */

// 保存浏览器原生的错误处理方法，用于后续需要时调用原始逻辑
const originalOnError = window.onerror; // 保存原始window.onerror错误处理函数
const originalConsoleError = console.error; // 保存原始console.error输出方法
const originalConsoleWarn = console.warn; // 保存原始console.warn输出方法

/**
 * 判断错误信息是否为需要忽略的 ResizeObserver 相关错误
 * @param {string} message - 错误信息字符串
 * @returns {boolean} 是否需要忽略该错误
 */
const shouldIgnoreError = (message) => {
  // 非字符串类型的错误信息直接返回不忽略
  if (typeof message !== 'string') return false;
  // 匹配 ResizeObserver 相关的特征错误信息
  return message.includes('ResizeObserver') || 
         message.includes('loop completed with undelivered notifications') || // 特定循环错误
         message.includes('Cannot convert object to primitive value'); // 关联转换错误
};

/**
 * 重写 window.onerror 全局错误处理
 * 用于拦截页面级同步错误，对目标错误进行抑制
 */
window.onerror = function(message) {
  // 如果是需要忽略的错误，返回true表示已处理（阻止浏览器默认报错）
  if (shouldIgnoreError(message)) {
    return true; // 阻止默认错误处理
  }
  // 非目标错误，调用原始onerror方法保持原有逻辑
  if (originalOnError) {
    return originalOnError.apply(this, arguments);
  }
  return false;
};

/**
 * 重写 console.error 方法
 * 用于过滤控制台输出的目标错误信息
 */
console.error = function(...args) {
  // 将控制台参数拼接为字符串，便于错误识别
  const message = args.join(' ');
  // 如果是目标错误，不输出到控制台
  if (shouldIgnoreError(message)) {
    return; // 完全忽略这些错误的控制台输出
  }
  // 非目标错误，调用原始console.error输出
  originalConsoleError.apply(console, args);
};

/**
 * 重写 console.warn 方法
 * 用于过滤控制台输出的目标警告信息
 */
console.warn = function(...args) {
  const message = args.join(' ');
  if (shouldIgnoreError(message)) {
    return; // 忽略目标警告
  }
  originalConsoleWarn.apply(console, args);
};

/**
 * 监听全局 error 事件（捕获阶段）
 * 补充拦截通过事件冒泡传递的错误，确保全面性
 * 第三个参数true表示在捕获阶段处理，更早拦截错误
 */
window.addEventListener('error', (e) => {
  if (shouldIgnoreError(e.message)) {
    e.stopImmediatePropagation(); // 阻止事件继续传播给其他监听器
    e.preventDefault(); // 阻止默认处理
    return false;
  }
}, true);

/**
 * 监听未处理的 Promise 拒绝事件
 * 处理 Promise 链中未捕获的目标错误，避免控制台报错
 */
window.addEventListener('unhandledrejection', (e) => {
  // 检查 Promise 拒绝原因中的错误信息
  if (e.reason && shouldIgnoreError(e.reason.message)) {
    e.preventDefault(); // 阻止浏览器默认处理（如控制台输出）
    e.stopPropagation(); // 阻止事件传播
    return false;
  }
});

/**
 * 包装 ResizeObserver 构造函数
 * 通过延迟执行回调打破同步循环，从根源减少错误触发
 */
if (typeof ResizeObserver !== 'undefined') { // 兼容不支持ResizeObserver的环境
  const originalResizeObserver = ResizeObserver; // 保存原生构造函数
  // 自定义ResizeObserver类继承原生类
  window.ResizeObserver = class extends originalResizeObserver {
    /**
     * 重写构造函数，包装回调函数
     * @param {Function} callback - 尺寸变化时的回调函数
     */
    constructor(callback) {
      // 调用父类构造函数，传入包装后的回调
      super((entries, observer) => {
        // 使用setTimeout将回调延迟到下一个事件循环执行
        // 目的：打破同步尺寸变化导致的循环通知，避免浏览器抛出异常
        setTimeout(() => {
          try {
            // 执行用户传入的原始回调
            callback(entries, observer);
          } catch (error) {
            // 回调执行中发生的错误，同样进行过滤
            if (shouldIgnoreError(error.message)) {
              return; // 静默忽略
            }
            // 非目标错误，使用原始console.error输出
            originalConsoleError.call(console, error);
          }
        }, 0);
      });
    }
  };
}

/**
 * 工具初始化函数
 * 模块加载时已自动执行核心逻辑，此函数用于标识工具已启用
 */
export const suppressResizeObserverErrors = () => {
  console.log('ResizeObserver 错误抑制已启用');
};

// 默认导出工具对象
export default {
  suppressResizeObserverErrors
};

通过以上方案，可有效消除 ResizeObserver 相关的冗余错误输出，提升开发体验。

抽象牛马
关注
Vue3 - ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit excee）
🏆 前端领域优质创作者
08-15 1万+
vue3elementPlus表格组件el-table报错，vue表格el-table浏览器拉伸缩放频繁报错，vue3使用element-plus表格el-table反复报错出现ResizeObserverlooplimitexceeded错误解决方法，vue3elementplus报错ResizeObserverlooplimitexceeded如何解决，element-plus报错ResizeObserverlooplimitexceeded，vue3+elemen
vue + element plus：ResizeObserver loop completed with undelivered notifications
weixin_44384273的博客
04-10 1万+
ResizeObserver loop completed with undelivered notifications.
ResizeObserver loop completed with undelivered notifications.
热门推荐
yes_catherine的博客
02-04 2万+
ResizeObserver介绍 ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。 const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px'; ...
前端页面出现问题ResizeObserver loop completed with undelivered notifications.
最新发布
qq_55930097的博客
10-12 378
本文介绍了解决ResizeObserver循环警告的三种方法：1）通过添加事件监听器屏蔽特定警告；2）关闭webpack-dev-server的error-overlay；3）在Vue组件中使用防抖函数重写ResizeObserver。前两种方法未能奏效，最终通过第三种方案成功解决问题。该方法在App.vue中使用lodash的防抖函数包装ResizeObserver回调，有效避免了因频繁尺寸变化导致的警告弹出，同时保持了组件卸载时的清理功能。
【性能优化】使用 ResizeObserver解决页面尺寸变动,echarts或地图等自适应的一种方法(监听特定DOM元素尺寸变化)
Summer_Uncle的博客
04-23 2239
项目中,页面做了响应式布局.大量使用了弹性布局,导致盒子没有固定的宽高,在菜单切换或者窗口缩放时,echarts或者地图元素就会出现扭曲,错版,填充不完全,溢出等问题.当通过监听window的resize事件时,难以精准捕捉目标容器,同时echarts的resize()方法并不一定达到效果。
ResizeObserver使用方法
05-22 1224
没有元素会无缘无故的发生变化，可能是窗口大小发生变化，我们可以监听window的resize事件；但很多情况是由于页面元素的变化（添加，删除）引起的，这种情况处理起来就比较麻烦了，大多数情况也是通过自定义事件来处理。ResizeObserver提供了更直接的方法，直接监听元素的尺寸变化。由上图可以看到，每个对象都有。如何检测元素大小发生变化？
实现 ECharts 图表响应式布局：基于 ResizeObserver 的终极方案
wusandaofwy的博客
03-28 1095
通过的组合方案，可实现精准、高效、安全的图表自适应效果。此方案已在实际项目中验证，支持多场景动态布局，推荐作为 ECharts 响应式开发的标配方案。扩展阅读•ECharts 官方自适应文档•ResizeObserver API 详解效果演示希望这篇博客能帮助开发者彻底解决 ECharts 自适应难题！🚀。
Vue3+TS在main.ts中解决Uncaught ResizeObserver loop completed with undelivered notifications.
BillKu的博客
08-30 858
方法推荐度原理效果​​方法一：防抖​​⭐⭐⭐⭐⭐限制回调执行频率从根本上减少触发，效果良好​​方法二：requestAnimationFrame​​⭐⭐⭐⭐利用浏览器渲染周期延迟回调符合浏览器机制，通常有效​​方法三：忽略错误​​⭐⭐捕获并隐藏特定错误仅隐藏警告，未解决根本问题对于大多数项目，​​推荐优先尝试方法一（防抖）​​，它通常能很好地解决问题且对性能影响最小。如果担心防抖的延迟影响，可以尝试方法二。方法三可作为开发环境下的临时应对措施。
resize-observer-lite:具有ResizeObserver功能受限的ResizeObserver Polyfill
05-13
**ResizeObserver Lite: 有限功能的...综上所述，`ResizeObserver Lite`是为了解决`ResizeObserver` API的兼容性问题而设计的，尽管它在功能上可能有所限制，但对于大部分基础的尺寸监听需求，它是一个可靠的解决方案。
vue3 ts项目中 element-plus 报错 ResizeObserver loop limit exceeded 解决
08-09
通常，当使用Element Plus的Table组件时，报错"ResizeObserver loop limit exceeded"是由于ResizeObserver被触发...希望这个解决方案能够帮助到你。如果问题仍然存在，请提供更多的信息，以便我可以提供更准确的解答。
ResizeObserver API
EmotionComputer
08-21 1256
当我们需要知道一个元素的大小变化或者屏幕横竖屏时，我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题；并且window.resize事件只有在window对象上才有，而不是具体到某个元素的变化。而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于： 某个节点的出现和隐藏 某个节点的大小变化 ResizeObserver AP
window.onresize只能侦听窗口的变化，但是某个div的宽高是无法使用resize侦听的，可以使用ResizeObserver
m0_50441807的博客
09-07 608
【代码】window.onresize只能侦听窗口的变化，但是某个div的宽高是无法使用resize侦听的，可以使用ResizeObserver。
Web API：ResizeObserver——监听元素大小的变化
weixin_41897680的博客
08-20 9844
Web API：ResizeObserver——监听元素大小的变化
ResizeObserver实现区域内容窗口自适应布局响应式
不定期进行技术分享
06-11 351
【代码】ResizeObserver实现区域内容窗口自适应布局响应式。
ResizeObserver 深入全面讲解
软考鸭
07-14 2215
核心优势：精准监听元素尺寸变化，避免传统resize事件的局限性。最佳实践优先使用现代浏览器，必要时引入 Polyfill。合理管理观察器实例，避免内存泄漏。结合防抖、节流优化性能。未来方向：随着浏览器支持完善，ResizeObserver 将成为响应式设计的核心工具之一。
ResizeObserver理解与用途
Only_ruiwen的博客
05-09 6938
ResizeObserver ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ） 换句话来说，ResizeObserver是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。 <!DOCTYPE html> <html lang="en"> <head> <me
监听尺寸变化还在用 resize？你可能已经错过了 ResizeObserver！
SailingCoder的博客
04-21 663
总结一句话：ResizeObserver =更轻量、更精准、更高效的尺寸变化监听方案。避免在回调中同步读取布局（如），防止引发强制回流，造成性能抖动。多元素监听需防抖/节流控制频率，降低回调频率，避免卡顿。组件内要在生命周期正确绑定/解绑，防止内存泄漏。IE 不支持，需用 Polyfill 兼容（或者。
前端监控容器大小ResizeObserver方法的使用
weixin_44177413的博客
09-26 377
观察者模式，可以监听多个对象，某些需要监听dom大小变化的场景下很便利，还可以配合throttle/debounce进行性能优化。监控页面大小改变通常使用window.resize方法来进行监控。但有时是需要监控一些容器。
ResizeObserver+grid 实现响应式布局
讨口子
09-22 262
【代码】ResizeObserver+grid-column-start 实现响应式布局。
ResizeObserver loop completed with undelivered notifications，vue怎么解决
04-10
确保使用的UI库（如element-plus、Ant Design Vue）为最新版本，部分版本已修复ResizeObserver相关兼容性问题[^2][^3]。 --- #### 根本原因与预防 该错误本质是**布局抖动（Layout Thrashing）**，可通过以下方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值