Bdtjtk

Looking for help catching an HTTP error in an Angular HttpClient get request, and passing that back to the component which originated the request in order to handle the error in a consumer-friendly way.

My Angular 7 app has a reporting module for which I'm trying to add error handling. There is a component report-listwhich uses a changeReport() method in a shared reports service, which updates an observable which the reports-view component subscribes to. When reports-view gets an updated currentReport (which is a report ID number), it fetches the full report from the server with the specified report ID.

Something I came across while mocking up the client side of this module is the possibility that the report ID I try to get will not exist, a condition I should be able to handle. Ideally I'd like to update reports-view with an error saying "Report ID could not be found". I went researching catchError in the Angular docs found only examples of its use in the guide section for RxJS and HttpClient, and in the tutorial for HTTP. Searching observables and pipes didn't help much either. Does anyone know any resources I can read that could help me accomplish this goal, and/or what related concepts I need to read up on and understand in order to implement what I'm trying to do?

reports.service.ts:

export class ReportsService {



  private reportsUrl = 'api/reports';



  /// Establishes the observable used to subscribe to which report to get

  reportSelectionNum: number;

  private reportSelection = new BehaviorSubject<number>(this.reportSelectionNum);

  currentReport = this.reportSelection.asObservable();



  constructor(private http: HttpClient) { }



  /// Allows sibling component to update report

  changeReport(reportID: number) {

    this.reportSelection.next(reportID);

  }



  getReport(id: number): Observable<Report> {

    const url = `${this.reportsUrl}/${id}`;

    return this.http.get<Report>(url).pipe(

      tap(_ => this.log(`getReport(${id})`)),

      catchError(this.handleError<Report>())

    );

  }

reports-view.component.ts

export class ReportsViewComponent implements OnInit {



  report: Report;



  reportHeaders: string;

  reportData: Array<string>;



  constructor(private reportsService: ReportsService) { }



  ngOnInit() {

    this.reportsService.currentReport.subscribe(report => {

      if (report) {

        this.getReport(report);

      }

    });

  }



  getReport(id: number): void {

    this.reportsService.getReport(id).subscribe(report => {

      this.report = report;

      this.reportHeaders = this.report.data.shift();

      this.reportData = this.report.data;

    });

  }

}

reports-list.component.ts

export class ReportListComponent implements OnInit {



  reports: Report;



  constructor(private reportsService: ReportsService) { }



  ngOnInit() {

    this.getReports();

  }



  getReports(): void {

    this.reportsService.getReports().subscribe(reports => this.reports = reports);

  }



  setReportID(id: number): void {

    this.reportsService.changeReport(id);

  }



}

My hope is that the report-view component will be notified when an error of a particular type as occurred (such as a 404 error) so I can appropriately update the view content with a consumer-friendly error.

I was directed to the RxJS docs, which apparently are were I can find more detail on catchError and observables.