Angular 中的全局错误处理

错误处理是构建强大而可靠的 Angular 应用程序的关键方面。处理错误可以有效改善用户体验并帮助开发人员识别和修复问题。以下是 Angular 中的一些错误处理策略

全局错误处理

设置全局错误处理程序来捕获应用程序中未处理的错误。这可以通过创建实现接口的服务来实现 ErrorHandler。

import { Injectable, ErrorHandler } from "@angular/core";

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    console.error("Global Error Handler:", error);
  }
}

在您的 app.config.ts 中，提供您自定义的 ErrorHandler 处理程序。

export const appConfig: ApplicationConfig = {
    //.....
    providers: [
       {
            provide: ErrorHandler,
            useClass: GlobalErrorHandler,
            deps: [],
        },
    ]
    //......

用于错误处理的 HTTP 拦截器

使用 HTTP 拦截器全局处理 HTTP 错误。拦截 HTTP 请求和响应可让您集中错误处理逻辑。

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

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error("Http Error Interceptor: ", error);
        return throwError(error);
      })
    );
  }
}

不要忘记在你的 app.config.ts 中提供拦截器：

{
     provide: HTTP_INTERCEPTORS,
     useClass: HttpErrorInterceptor,
     multi: true,
 }

组件级错误处理

在组件级别实现错误处理，特别是对于关键操作或异步任务。

import Component from '@angular/core';

@Component({

selector: 'app-example',
template:`
<div *ngIf="errorMessage">{{ errorMessage }}</div> ])
`
export class ExampleComponent {

    errorMessage: string | null = null;

    fetchData(){

      // Simulate an error in fetching data
      throw new Error('Failed to fetch data');
    }

    handleError(error: Error){

      / Handle component-specific errors
      this.errorMessage = error.message;
    }

}

日志记录服务

利用日志服务记录错误和其他相关信息。Angular 的 Console 服务或第三方日志库等服务可能会有所帮助。

import Injectable from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggerService

  log(message: string): void {
    console. log(message);
  }

  error(message: string, error: any): void {

    console. error(message, error);

    // You can also send logs to a remote server or analytics service
  }

}

在您的组件或服务中使用此服务来记录错误。

这些策略可以单独使用，也可以根据应用程序的要求组合使用。有效的错误处理包括记录错误、提供有意义的用户反馈以及在可能的情况下实施适当的恢复机制。

如果有其他可行的方法，请告诉我，并欢迎提出建议。

参考文档

Global level Error Handling in Angular

Angular HTTP Interceptors : Multiple Interceptors and 6 Code Examples of Interceptors