How does catchError work in RxJS, and how do you return a fallback value?

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, inject } from '@angular/core';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-users',
  template: '<ul>@for (u of users; track u.id) { <li>{{ u.name }}</li> }</ul>'
})
export class UsersComponent implements OnInit {
  private http = inject(HttpClient);
  users: any[] = [];

  ngOnInit() {
    this.http.get<any[]>('/api/faulty-users-endpoint')
      .pipe(
        catchError(error => {
          console.error('Request failed:', error);
          return of([]);
        })
      )
      .subscribe(data => this.users = data);
  }
}