Vue中如何捕获Webpack异步chunk的unhandledrejection事件？

1. 提前注册全局错误监听器 #

将unhandledrejection监听器移至项目入口文件（如main.js）的最顶部，确保在所有依赖、组件加载前完成注册，避免异步chunk执行时监听器尚未挂载：

// main.js 最顶部
window.addEventListener("unhandledrejection", (event) => {
  // 直接执行错误上报，若需调用Vue实例方法，可先将方法挂载到window
  window.$sendError?.("uncaught (in promise) " + event.reason);
  event.preventDefault();
});

// 后续再引入Vue及其他依赖
import Vue from 'vue';
import App from './App.vue';

// 将Vue实例的上报方法挂载到全局
new Vue({
  render: h => h(App),
  created() {
    window.$sendError = this.sendError;
  }
}).$mount('#app');

2. 检查Webpack生产环境配置 #

排查Webpack压缩优化是否导致错误逻辑被移除：

• 针对terser-webpack-plugin，确保保留错误相关代码，避免压缩时吞掉未捕获Promise的逻辑：

// vue.config.js 或 webpack配置文件
module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        require('terser-webpack-plugin')({
          terserOptions: {
            compress: {
              drop_console: false,
              keep_fnames: true,
              keep_classnames: true
            },
            mangle: false // 若开启混淆可能影响错误栈追踪，可临时关闭测试
          }
        })
      ]
    }
  }
};

3. 包装异步Chunk的加载逻辑 #

手动捕获异步路由Chunk加载阶段的错误，同时确保组件内部的未捕获Promise能被监听：

// 路由配置
{
  path: "/register",
  name: "register",
  meta: { requiresAuth: false, layout: simpleLayout }, 
  component: () => import(/* webpackChunkName: "register" */ "xso-common/src/login/register")
    .catch(err => {
      // 捕获Chunk加载失败的错误
      window.$sendError?.("chunk load error: register - " + err.message);
      // 可选：重定向到错误页或返回默认组件
      return import('./views/ErrorPage.vue');
    })
}

同时可在异步组件内部补充注册监听器（或封装全局工具自动注册），覆盖组件内的未捕获Promise场景。

4. 结合Vue全局错误处理 #

利用Vue内置的errorHandler捕获组件生命周期内的错误，作为全局监听的补充：

// main.js
Vue.config.errorHandler = (err, vm, info) => {
  window.$sendError?.(`Vue component error: ${info} - ${err.message}`);
};

// 同时监听同步错误
window.addEventListener("error", (event) => {
  window.$sendError?.("uncaught error: " + event.message);
  event.preventDefault();
});

5. 强制使用捕获阶段监听 #

若存在第三方库提前注册监听器并阻止默认事件，可将监听器设为捕获阶段执行，确保优先触发：

window.addEventListener("unhandledrejection", (event) => {
  window.$sendError?.("uncaught (in promise) " + event.reason);
  event.preventDefault();
}, true); // 启用捕获阶段

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