How do you handle cross-cutting concerns like logging or error handling?

In Angular, cross-cutting concerns like logging, error handling, authentication, and caching should be handled in a centralized, reusable, and non-intrusive way. The most effective tools for this are Angular services, interceptors, and sometimes RxJS operators. 

🔁 Common Cross-Cutting Concerns & How to Handle Them

✅ 1. HTTP Interceptors (Best for Logging, Auth, Error Handling)

Angular’s HttpInterceptor is ideal for:

• Global error handling

• Request/response logging

• Injecting headers (e.g., auth tokens)

Example: Error Handling Interceptor

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        // Log or send error to monitoring service
        console.error('HTTP Error:', error);
        return throwError(() => error);
      })
    );
  }
}

Register it in providers:

{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }

✅ 2. Logging Service

Create a centralized LoggerService to log info, warnings, or errors throughout your app.

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) {
    console.log('[LOG]', message);
  }
  error(error: any) {
    console.error('[ERROR]', error);
    // Send to external log service (e.g., Sentry)
  }
}

Then inject it wherever needed (or call from interceptors/components).

✅ 3. Global Error Handling (Angular ErrorHandler)

Use Angular’s ErrorHandler to catch uncaught errors globally (outside HTTP requests).

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('App Error:', error);
    // Log to server, show toast, etc.
  }
}

Provide it globally:

{ provide: ErrorHandler, useClass: GlobalErrorHandler }

✅ 4. RxJS Operators for Localized Handling

Use catchError, retry, or tap within individual services when you need context-specific behavior.

this.http.get(url).pipe(
  retry(2),
  catchError(err => {
    this.logger.error('Fetch failed', err);
    return of([]);
  })
);

✅ 5. Guards and Route-Level Logic

Use guards (CanActivate, CanLoad) for auth, access control, or pre-route logic (e.g., checking permissions or unsaved changes).

🧠 Best Practices

• Centralize whenever possible (DRY principle)

• Use interceptors for HTTP-related cross-cutting logic

• Use services for logic like logging or analytics

• Use global handlers for app-wide concerns (e.g., uncaught errors)

• Keep presentation components clean—delegate side effects to services