Angular 2自定义HTTP错误处理组件问题：handleError未触发

嘿，我之前也踩过这个坑，咱们来一步步搞定它：

1. 核心问题：把ErrorHandler做成了组件（而不是服务） #

你的ErrorHandlerComponent用了@Component装饰器，但Angular的ErrorHandler是一个服务类，不是UI组件。组件是用来渲染视图的，而全局错误处理器需要作为服务注入到应用中——这是导致你的handleError方法没被调用的主要原因。

修复代码：把它改成服务 #

去掉@Component装饰器，换成@Injectable：

import { Injectable, ErrorHandler } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  text: string;

  constructor() { super(); }

  handleError(error: any) {
    // 先判断是否是HTTP错误
    if (error instanceof HttpErrorResponse) {
      console.log("CustomErrorHandler, error.status: ", error.status);
      this.text = error.message;
      // 这里可以添加更多HTTP错误处理逻辑，比如弹窗提示等
    } else {
      // 处理其他类型的应用错误
      super.handleError(error);
    }
  }
}

2. 必须在模块中注册替换默认的ErrorHandler #

创建好自定义错误处理器后，需要在你的根模块（比如AppModule）的providers数组中注册，替换Angular默认的ErrorHandler：

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler.service';

@NgModule({
  // ...其他模块配置（declarations、imports等）
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

3. 关于status 0的错误说明 #

你看到的status: 0错误通常是以下几种情况：

• 跨域（CORS）问题：后端没有配置正确的CORS响应头，浏览器拦截了请求，导致HttpClient返回status 0的错误。这时候需要后端配合设置Access-Control-Allow-Origin等头。
• 网络故障：用户断网或者请求的服务器不可达。
• 请求被取消：比如在请求完成前组件被销毁，导致请求被取消。

这种错误有些是浏览器层面的限制，你可以通过HTTP拦截器专门捕获：

可选：添加HTTP拦截器捕获HTTP错误 #

如果想更精准地处理HTTP请求的错误，可以创建一个HTTP拦截器，把错误抛给全局错误处理器：

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

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(private errorHandler: ErrorHandler) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 把错误交给全局错误处理器
        this.errorHandler.handleError(error);
        return throwError(() => error);
      })
    );
  }
}

然后在模块中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from './http-error.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ]
})
export class AppModule { }

最后验证 #

做完以上修改后，重新运行应用，触发HTTP错误（比如请求一个不存在的接口），应该就能看到handleError方法被正常调用了。

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