如何捕获与处理Webpack的ChunkLoadError？（Angular15模块联邦场景）

为什么ChunkLoadError抓不到？ #

ChunkLoadError是Webpack自定义的错误类型，确实继承自原生Error，但它的抛出场景特殊：

• 它是在异步chunk加载的Promise拒绝回调里抛出的，而Angular的全局ErrorHandler默认只捕获Angular Zone内的同步错误和异步错误。Webpack的chunk加载逻辑默认跑在Zone之外，所以ErrorHandler感知不到。
• 普通Error如果是在Angular上下文（比如组件、服务里）抛出，会自动进入Zone，所以能被捕获。

解决方案一：正确重写Webpack的Chunk加载方法 #

你之前重写的方法可能不对，Webpack 5中负责加载chunk的核心方法是__webpack_require__.e，要针对这个方法做包裹：

在主应用的main.ts（Angular bootstrap之前）添加以下代码：

// 保存原始的webpack chunk加载方法
const originalLoadChunk = (window as any).__webpack_require__.e;

// 重写方法，添加try-catch
(window as any).__webpack_require__.e = async function(chunkId: string | string[]) {
  try {
    return await originalLoadChunk(chunkId);
  } catch (error) {
    // 这里就能捕获ChunkLoadError了
    console.error('Chunk加载失败:', error);
    
    // 把错误抛回Angular Zone，让全局ErrorHandler能处理
    const { NgZone } = await import('@angular/core');
    NgZone.current.run(() => {
      throw error;
    });
    
    // 不要吞掉错误，保持原有错误链
    throw error;
  }
};

解决方案二：监听全局未捕获的Promise拒绝 #

ChunkLoadError会触发window的unhandledrejection事件，直接监听这个事件也能捕获：

在主应用的app.module.ts或者main.ts中添加：

import { ErrorHandler, inject } from '@angular/core';

window.addEventListener('unhandledrejection', (event) => {
  const reason = event.reason;
  // 判定是否为ChunkLoadError
  if (reason instanceof Error && reason.name === 'ChunkLoadError') {
    event.preventDefault(); // 阻止浏览器默认的错误提示
    console.error('Chunk加载失败，请尝试刷新页面:', reason);
    
    // 交给Angular的全局ErrorHandler处理
    const errorHandler = inject(ErrorHandler);
    errorHandler.handleError(reason);
  }
});

为什么之前的重写没生效？ #

你提到的webpack_load_chunk不是Webpack 5的标准方法名，模块联邦的chunk加载依赖的是__webpack_require__.e，所以之前的重写根本没覆盖到实际的加载逻辑，自然不会触发catch块。

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