ResizeObserver循环未送达通知报错排查求助

问题背景 #

Vue3结合Quasar的项目中，页面切换时（通过showUserToolBar计算属性控制组件挂载/卸载），频繁触发ResizeObserver loop completed with undelivered notifications错误。尝试过setTimeout延迟状态变更、点击事件控制组件增删均无效；errorCaptured无法捕获该错误，但window.onerror可以捕获，页面重载后错误暂时消失。

报错信息 #

ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError (webpack-internal:///./node_modules/webpack-devserver/client/overlay.js:252:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:271:7)

相关代码 #

组件模板 #

<q-header reveal height-hint="107" class="bg-white ctitle">
  <q-toolbar class="text-center">
    <q-toolbar-title style="padding-top: 8px;">
      <funo-text-icon style="height: 30px;" />
    </q-toolbar-title>
  </q-toolbar>
  <template v-if="showUserToolBar">
    <q-toolbar class="text-center ctitle fw600 fs16 lh20" style="padding: 0 16px; border-bottom: 1px solid #E8E8E8;">
      <div class="row flex-center" style="gap:12px">
        <user-avatar :photo-url="userData?.general.photoUrl" />
        Merhaba {{ userData?.general.name }}
      </div>
      <div style="flex-grow: 1; flex-shrink: 1;" />
      <div class="row flex-center" style="gap:8px">
        <q-icon size="37px">
          <alert-icon />
        </q-icon>
        <q-icon size="37px">
          <message-icon />
        </q-icon>
      </div>
    </q-toolbar>
  </template>
</q-header>

计算属性 #

computed(){
  showUserToolBar() {
    const excludedPathNames = ["UserProfileView", "CalendarView", "MapView"]
    if (!this.$route.name) return true
    if (excludedPathNames.indexOf(this.$route.name.toString()) !== -1) return false
    return true
  }
}

依赖配置（package.json） #

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor-firebase/authentication": "^5.1.0",
    "@capacitor/android": "^5.3.0",
    "@capacitor/core": "^5.2.3",
    "@capacitor/dialog": "^5.0.6",
    "@capacitor/ios": "^5.3.0",
    "@capacitor/preferences": "^5.0.6",
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.8.3",
    "firebase": "10.3.0",
    "ol": "^7.5.1",
    "pinia": "^2.1.6",
    "quasar": "^2.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.2.3",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "1.32.12",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5",
    "vue-cli-plugin-quasar": "~5.0.2"
  }
}

临时处理代码 #

mounted() {
  window.onerror = function () {
    window.location.reload()
  };
}

解决方案 #

1. 优化全局错误捕获逻辑 #

原临时代码会导致任何错误都触发页面刷新，修改为仅忽略目标ResizeObserver错误：

mounted() {
  const originalOnError = window.onerror;
  window.onerror = function(message, source, lineno, colno, error) {
    // 过滤目标错误，阻止其触发后续处理
    if (message.includes('ResizeObserver loop completed with undelivered notifications')) {
      return true;
    }
    // 其他错误交给原始处理逻辑
    return originalOnError?.(message, source, lineno, colno, error) || false;
  };
}

2. 调整组件切换方式 #

Quasar的q-header内部可能使用ResizeObserver监听尺寸变化，频繁销毁重建子组件会触发循环问题：

• 将v-if改为v-show（仅隐藏组件而非销毁，减少DOM突变）：

  <template v-show="showUserToolBar">
    <!-- 原q-toolbar内容 -->
  </template>
  

• 用nextTick延迟状态同步，确保DOM更新完成后再处理：

  watch: {
    $route() {
      this.$nextTick(() => {
        // 等待DOM更新完成后，计算属性会自动同步状态
      });
    }
  }
  

3. 升级Quasar版本 #

当前使用的quasar@^2.0.0版本较早，后续版本修复了不少ResizeObserver相关的bug，执行升级命令：

npm install quasar@latest

4. 配置Webpack屏蔽开发环境错误提示 #

在vue.config.js中添加配置，让Webpack Dev Server忽略该错误：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  configureWebpack: {
    devServer: {
      client: {
        overlay: {
          runtimeErrors: (error) => {
            // 过滤ResizeObserver错误，不显示在DevServer的错误浮层中
            return !error.message.includes('ResizeObserver loop completed with undelivered notifications');
          }
        }
      }
    }
  },
  transpileDependencies: ['quasar']
})

说明 #

该错误属于开发环境下的非致命警告，不会影响生产环境功能。优先推荐升级Quasar版本，其次通过过滤错误避免干扰开发流程。

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