Intercepting and Transforming HTTP Errors with Functional Interceptors

import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';
 
export interface AppError {
  statusCode: number;
  friendlyMessage: string;
}
 
export const errorTransformInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      let friendlyMessage = 'An unexpected error occurred.';
 
      if (error.status === 404) {
        friendlyMessage = 'The requested resource was not found.';
      } else if (error.status === 403) {
        friendlyMessage = 'You do not have permission to perform this action.';
      }
 
      const appError: AppError = {
        statusCode: error.status,
        friendlyMessage
      };
 
      return throwError(() => appError);
    })
  );
};