Angular2 中处理错误的最佳实践

# Angular 2中处理错误的最佳实践

typescript
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';
  constructor(private http: HttpClient) { }
  getData(): Observable {
    return this.http.get(this.apiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }
  private handleError(error: HttpErrorResponse): Observable {
    // 在这里处理错误逻辑，例如记录错误、向用户显示错误消息等
    console.error('An error occurred:', error);
    return throwError('Something went wrong. Please try again later.');
  }
}

typescript
import { ErrorHandler, Injectable } from '@angular/core';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // 在这里执行全局错误处理逻辑，例如将错误信息发送到服务器
    console.error('Global error handler caught an error:', error);
    // 可以添加其他逻辑，如将错误信息发送到服务器
  }
}

typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { GlobalErrorHandler } from './path-to-global-error-handler';
@NgModule({
  imports: [BrowserModule],
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

typescript
import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
const source$ = of('data');
source$.pipe(
  catchError(error => {
    console.error('Handling error locally and rethrowing it');
    return throwError('Rethrown error: ' + error);
  })
).subscribe(
  data => console.log('Received data:', data),
  error => console.error('Received an error:', error)
);