Angular全局ErrorHandler与HttpInterceptor实现及问题排查

错误原因 #

你的MainInterceptorService拦截器在捕获HttpErrorResponse后，通过throwError(()=>new Error("Server side error"+error))将原有的HttpErrorResponse实例转换成了普通的Error对象。当错误传递到全局错误处理器GlobalErrorHandlerService时，它接收到的已经不是HttpErrorResponse类型，自然无法触发对应的判断分支。

修复方案 #

修改拦截器的catchError逻辑，直接抛出原HttpErrorResponse实例，保留类型信息：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    catchError((error: HttpErrorResponse | Error) => {
      if (error instanceof HttpErrorResponse) {
        console.log("intercepter work");
        // 直接抛出原HttpErrorResponse，不转换类型
        return throwError(() => error);
      } else {
        return throwError(() => new Error("Client side error" + error));
      }
    })
  );
}

如果需要添加自定义错误信息，也可以保留原错误的结构，比如：

return throwError(() => ({
  message: "Server side error",
  originalError: error
}));

同时在GlobalErrorHandlerService中调整判断逻辑：

handleError(error: any): void {
  console.log("Handler work");
  const targetError = error.originalError || error;
  if (targetError instanceof HttpErrorResponse) {
    console.log("HttpErrorResponse");
  } else {
    console.log("Not httpErrorResponse");
  }
}

Angular ErrorHandler 核心逻辑 #

1. 全局捕获范围：ErrorHandler是Angular的全局错误捕获机制，默认实现会将错误输出到控制台。自定义实现可以覆盖默认行为，处理所有未被局部捕获的错误，包括：
   • 组件、服务中的同步错误
   • Observable流中未被catchError处理，或处理后重新抛出的错误
2. HTTP错误传递规则：HTTP请求的错误属于Observable流错误，只有当错误没有被拦截器或组件内的catchError消费（即处理后未重新抛出），才会向上传递最终被ErrorHandler捕获。
3. 拦截器与ErrorHandler的协作：拦截器可以在错误到达全局处理器前拦截并处理错误，如果拦截器处理后重新抛出原类型错误，ErrorHandler能识别原错误类型；如果转换了错误类型，就会导致全局处理器无法识别。

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