Handling errors in angular service

Question

I am trying to handle errors in angular. Not sure where exactly it should be handled, but I tried to do it in service.

@Injectable({
  providedIn: 'root',
})
export class CaseListService {
  public constructor(private httpClient: HttpClient, private router: Router) {}

  private get baseUrl() {
    return environment.apiBaseUrl || '/api';
  }

  public getCaseList(): Observable<CaseListModel[]> {
    return this.httpClient.get(this.baseUrl + '/cases').pipe(
      map((response) => response as Array<CaseListModel>),
      catchError((err: any) => {
        if (err.status) {
          console.log('Service temporarily unavailable' + err.status);
          this.router.navigate(['/unavailable']);
        }
        return throwError(err.statusText);
      })
    );
  }
}

And here is my component.ts where I am calling the service:

@Component({
  selector: 'app-case-list',
  templateUrl: './case-list.component.html',
  styleUrls: ['./case-list.component.css'],
})
export class CaseListComponent implements OnInit {
  title = 'List of cases';
  readonly CaseList$: Observable<CaseListModel[]>;

  constructor(private caseListService: CaseListService) {
    this.CaseList$ = caseListService.getCaseList();
  }

  displayedColumns: string[] = ['ID', 'name', 'actions'];
  dataSource = this.caseListService.getCaseList();

  ngOnInit(): void {}
}

I disabled backend and tried it. Result is just frontend with empty data. Redirect fails, console log shows nothing too. What am I doing wrong?

Panagiotis Bougioukos · Accepted Answer · 2021-07-17 11:31:46Z

2

Check the angular documentation on http client error handling.

As you can see the status field of HttpErrorResponse is optional, meaning it could be undefined. This will explain why the console.log and navigate are not invoked.

answered Jul 17, 2021 at 11:31

Panagiotis Bougioukos

19.6k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Juraj Jakubov Over a year ago

Yeah removing if really helps thanks morty.

Collectives™ on Stack Overflow

Handling errors in angular service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related