前端页面出现问题ResizeObserver loop completed with undelivered notifications.

6269602025-10-13 13:46

报错内容

ai说是因为 "某个 ResizeObserver 的回调里又触发了尺寸变化，导致浏览器不得不跳过一帧通知，以避免无限循环。"

开发环境下 webpack-dev-server 会把这条警告通过 error-overlay 弹出来，生产环境不会崩，但看着烦。

解决方法1------把警告本身吞掉

在入口文件（src/index.js 或 main.ts 最顶部）加 3 行即可，只吞 ResizeObserver 的这条 loop 警告，其它报错照常吃：

cpp 复制代码

// src/index.js
if (typeof window !== 'undefined') {
  window.addEventListener('error', e =>
    e.message?.includes('ResizeObserver loop completed with undelivered notifications') && e.preventDefault()
  );
}

但是还是不行

解决方法2------直接关掉 dev-server 的 error-overlay

package.json的 scripts 里把启动命令改成

cpp 复制代码

"start": "webpack serve --client-overlay=false"

还是不行

解决方法3

在 App.vue 文件中加入防抖函数。

cpp 复制代码

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash'

// 防抖处理 ResizeObserver 回调
const debouncedResizeObserver = debounce(() => {
  // 这里可以添加需要防抖的逻辑
}, 100)

// 重写 ResizeObserver 构造函数
onMounted(() => {
  const OriginalResizeObserver = window.ResizeObserver
  
  window.ResizeObserver = class extends OriginalResizeObserver {
    constructor(callback) {
      const debouncedCallback = debounce(callback, 16) // 约60fps
      super(debouncedCallback)
    }
  }
})

onUnmounted(() => {
  // 清理
  debouncedResizeObserver.cancel()
})
</script>

成功解决