Angular7中HttpInterceptor与ErrorHandler错误处理的差异及选型

Hey，我来帮你把这两种错误处理方式的差异讲清楚，还有你关心的是否需要同时用的问题——这是很多Angular开发者刚接触全局错误处理时都会纠结的点，咱们慢慢拆解：

一、核心差异一目了然 #

这俩工具定位完全不同，根本不是替代关系，而是互补的：

• 作用范围天差地别：
  • HttpInterceptor是个「HTTP请求专属管家」，只负责处理通过Angular HttpClient发起的请求产生的错误，其他和HTTP无关的错误它碰都碰不到。
  • ErrorHandler是Angular的「全局错误兜底神器」，能捕获应用里几乎所有未被手动拦截的错误——不管是HTTP错误、组件模板渲染错了、RxJS流抛错，还是你自己代码里扔的Error，它都能接住。
• 处理时机不一样：
  • HttpInterceptor是在HTTP请求的链路里工作的，错误刚冒出来就能处理，还能做重试、修改错误信息、转换错误流这类操作，属于「前端拦截」。
  • ErrorHandler是最后一道防线，只有当错误没被任何局部代码（比如组件里的catchError、Interceptor的处理）拦住时，才会跑到这里来，属于「全局兜底」。

二、各自能搞定哪些错误？ #

HttpInterceptor可处理的错误类型 #

只盯着HTTP请求相关的错误：

• 客户端HTTP错误：比如网络断了、请求超时、跨域配置错了这类ErrorEvent
• 服务端HTTP错误：返回非2xx状态码的响应（404找不到、500服务器炸了、401未授权等）对应的HttpErrorResponse

注意：原生fetch或XMLHttpRequest的错误，它是管不到的，只有HttpClient发的请求才行。

ErrorHandler可处理的错误类型 #

几乎是「漏网之鱼」的集合：

• 所有没被Interceptor拦住的HttpErrorResponse（比如Interceptor处理后又重新抛出的错误）
• Angular组件、指令、管道的渲染错误（比如模板里用了未定义的变量、管道处理数据失败）
• RxJS Observable流中没被catchError捕获的错误
• 你自己代码里抛出的普通Error对象
• 第三方库扔出来的未处理错误

三、要不要同时用？必须的，但要各司其职 #

建议组合使用，让它们各干各的活：

1. 用HttpInterceptor处理HTTP专属逻辑：比如请求失败自动重试、统一打HTTP错误日志、根据状态码做特定操作（比如401跳登录页），把HTTP相关的错误在请求链路里先处理一遍。
2. 用ErrorHandler做全局兜底：处理所有Interceptor覆盖不到的错误，比如非HTTP类的应用错误，以及Interceptor处理后重新抛出的HTTP错误，统一给用户弹友好提示，避免应用直接崩掉。

举个实际场景：你在Interceptor里给请求加了1次重试，失败后格式化错误信息再抛出去，然后ErrorHandler接住这个错误，弹出通知告诉用户——这样既优化了请求体验，又保证了全局错误的统一处理。

四、代码示例参考 #

HttpInterceptor实现（HTTP请求错误处理） #

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';

@Injectable()
export class InterceptorService implements HttpInterceptor {
  constructor() { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      retry(1), // 请求失败后自动重试1次
      catchError((error: HttpErrorResponse) => {
        let errMsg = '';
        if (error.error instanceof ErrorEvent) {
          // 客户端错误：网络问题、请求配置错误等
          errMsg = `客户端错误: ${error.error.message}`;
          console.error('HTTP客户端错误详情:', error);
        } else {
          // 服务端错误：非2xx状态码响应
          errMsg = `服务端错误: 状态码 ${error.status}, 消息: ${error.message}`;
          console.error('HTTP服务端错误详情:', error);
        }
        // 重新抛出错误，交给ErrorHandler做最终处理
        return throwError(() => new Error(errMsg));
      })
    );
  }
}

ErrorHandler实现（全局兜底错误处理） #

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { NotificationService } from './notification.service'; // 假设你有一个自定义通知服务

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(private injector: Injector) { }
  handleError(error: Error | HttpErrorResponse) {
    const notificationService = this.injector.get(NotificationService);
    
    if (error instanceof HttpErrorResponse) {
      // 处理HTTP错误（包括Interceptor抛出的格式化错误）
      if (!navigator.onLine) {
        notificationService.error('网络连接中断，请检查网络状态');
      } else {
        notificationService.error(`请求出错: ${error.message}`);
      }
    } else {
      // 处理非HTTP类错误：组件模板错误、自定义代码错误等
      notificationService.error(`应用出错: ${error.message}`);
      console.error('全局未捕获错误详情:', error);
    }
  }
}

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