diff --git a/src/app/clients/clients-view/clients-view.component.ts b/src/app/clients/clients-view/clients-view.component.ts index 74dc275cc..e8693978a 100644 --- a/src/app/clients/clients-view/clients-view.component.ts +++ b/src/app/clients/clients-view/clients-view.component.ts @@ -92,17 +92,17 @@ export class ClientsViewComponent implements OnInit { ngOnInit() { this.clientsService.getClientProfileImage(this.clientViewData.id).subscribe({ next: (base64Image: any) => { - this.clientImage = this._sanitizer.bypassSecurityTrustResourceUrl(base64Image); - }, - error: (error: any) => { - // 404 is expected when client has no profile image - not an error - if (error.status === 404) { - this.clientImage = null; + // If base64Image is null, client has no profile image + if (base64Image) { + this.clientImage = this._sanitizer.bypassSecurityTrustResourceUrl(base64Image); } else { - // Log other unexpected errors - console.error('Error loading client profile image:', error); this.clientImage = null; } + }, + error: (error: any) => { + // Handle any unexpected errors + console.error('Error loading client profile image:', error); + this.clientImage = null; } }); } diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index cc642963d..de7a116c3 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -3,7 +3,8 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; /** rxjs Imports */ -import { Observable } from 'rxjs'; +import { Observable, of, throwError } from 'rxjs'; +import { map, catchError } from 'rxjs/operators'; /** * Clients service. @@ -171,7 +172,23 @@ export class ClientsService { getClientProfileImage(clientId: string) { const httpParams = new HttpParams().set('maxHeight', '150'); - return this.http.get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' }); + // Keep it simple since our interceptor will handle the 404 errors + return this.http + .get(`/clients/${clientId}/images`, { + params: httpParams, + responseType: 'text' + }) + .pipe( + // Handle the error here and return null when no image is found (404) + catchError((error) => { + if (error.status === 404) { + // Client has no profile image - return null without propagating error + return of(null); + } + // For other errors, rethrow the error + return throwError(() => error); + }) + ); } uploadClientProfileImage(clientId: string, image: File) { diff --git a/src/app/core/http/error-handler.interceptor.ts b/src/app/core/http/error-handler.interceptor.ts index 3e2464454..fbfd6c735 100644 --- a/src/app/core/http/error-handler.interceptor.ts +++ b/src/app/core/http/error-handler.interceptor.ts @@ -12,6 +12,7 @@ import { environment } from '../../../environments/environment'; /** Custom Services */ import { Logger } from '../logger/logger.service'; import { AlertService } from '../alert/alert.service'; +import { TranslateService } from '@ngx-translate/core'; // Added import for TranslateService /** Initialize Logger */ const log = new Logger('ErrorHandlerInterceptor'); @@ -23,20 +24,24 @@ const log = new Logger('ErrorHandlerInterceptor'); export class ErrorHandlerInterceptor implements HttpInterceptor { /** * @param {AlertService} alertService Alert Service. + * @param {TranslateService} translate Translation Service. */ - constructor(private alertService: AlertService) {} + constructor( + private alertService: AlertService, + private translate: TranslateService // Added TranslateService + ) {} /** * Intercepts a Http request and adds a default error handler. */ intercept(request: HttpRequest, next: HttpHandler): Observable> { - return next.handle(request).pipe(catchError((error) => this.handleError(error))); + return next.handle(request).pipe(catchError((error) => this.handleError(error, request))); } /** * Error handler. */ - private handleError(response: HttpErrorResponse): Observable> { + private handleError(response: HttpErrorResponse, request: HttpRequest): Observable> { const status = response.status; let errorMessage = response.error.developerMessage || response.message; if (response.error.errors) { @@ -64,7 +69,17 @@ export class ErrorHandlerInterceptor implements HttpInterceptor { message: errorMessage || 'You are not authorized for this request!' }); } else if (status === 404) { - this.alertService.alert({ type: 'Resource does not exist', message: errorMessage || 'Resource does not exist!' }); + // Check if this is an image request that should be silently handled (client profile image) + if (request.url.includes('/clients/') && request.url.includes('/images')) { + // Don't show alerts for missing client images + // This is an expected condition, not an error + return new Observable>(); + } else { + this.alertService.alert({ + type: this.translate.instant('error.resource.not.found'), + message: errorMessage || 'Resource does not exist!' + }); + } } else if (status === 500) { this.alertService.alert({ type: 'Internal Server Error',