Vue应用中Grafana日志持续出现ResizeObserver未投递通知循环错误

我在Grafana日志中反复遇到Error: ResizeObserver loop completed with undelivered notifications.错误，但浏览器控制台无法直接捕获该报错，仅Grafana日志会记录。此前尝试了多种方法均未解决问题：

• 为输入框添加data-lpignore="true"和autocomplete="off"属性
• 测试有无LastPass扩展的场景，确认问题与该扩展无关
• 应用CSS隐藏webpack-dev-server客户端覆盖层iframe：iframe#webpack-dev-server-client-overlay{display:none!important;}，无效果
• 手动管理ResizeObserver生命周期，在组件卸载时断开连接并清理监听条目，无论监听单个输入框ref还是批量元素都无效，代码示例如下：

let resizeObserverEntries = []
    
const observer = new ResizeObserver((entries)=>{
 resizeObserverEntries = entries
})

if(inputRef.current) observer.observe(inputRef.current)

return () => {
  resizeObserverEntries.forEach((entry)=>entry.target.remove())
  observer.disconnect()
}

• 因表单基于Element-Plus构建，查其更新记录存在resize相关问题，遂将库更新至最新版本，问题仍未解决

实际有效的解决办法 #

1. 延迟处理ResizeObserver回调
   将回调逻辑包裹进requestAnimationFrame中，可避免循环未完成的通知问题：

const observer = new ResizeObserver((entries) => {
  requestAnimationFrame(() => {
    // 放置原本的回调处理逻辑
    resizeObserverEntries = entries;
  });
});

2. 全局过滤该错误
   若暂时无法从根源修复，可通过全局错误监听过滤该特定报错，避免污染Grafana日志：

window.addEventListener('error', (e) => {
  if (e.message.includes('ResizeObserver loop completed with undelivered notifications')) {
    e.stopImmediatePropagation();
    e.preventDefault();
  }
});

注意：此方法仅为抑制错误上报，并非从根本上修复问题，适合临时规避日志干扰的场景。

3. 升级Grafana版本
   如果是基于Grafana开发或嵌入Grafana组件，尝试将Grafana升级至最新稳定版，官方可能已修复内部ResizeObserver的使用问题。

内容的提问来源于stack exchange，提问作者Nichita Rusnac