How to log all possible console errors occurring in Angular application on a client's side?

When I started working with Angular, I found this article helpful: Angular: Adding Logging in Angular Applications.

If you follow the guidance, you end up with a LoggingService that you can configure to log errors to one of three (or all) locations:

• The console
• Local Storage
• A Database (via POST request)

What the article leaves out is how to catch the errors automatically. You can do this with an HttpInterceptor. Here's an example from an application I'm working on:

http-request-interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpRequest, HttpErrorResponse, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

import { LogService } from '../services/log.service';

@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
  constructor (private logService: LogService, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const newReq = req.clone({
      headers: req.headers.set('Content-Type', 'application/json'),
      withCredentials: true
    });
    return next.handle(newReq)
      .pipe(
        retry(1),
        catchError((error: HttpErrorResponse) => {
          let displayError = '';
          let serverError = '';
          let clientError = '';

          if (error.error instanceof ErrorEvent) {
            // client-side error
            clientError = `Error: ${error.error.message}`;
            this.logService.error(clientError);
          } else {
            // server-side error
            displayError = error.error;
            serverError = `Error Code: ${error.status}\n${error.message}\n${error.error}`;

            if (error.status === 401) {
              this.logService.error(serverError);
              this.router.navigate(['/unauthorized', { message: error.error}]);
            }

            if (error.status >= 500) {
              this.logService.error(serverError);
              this.router.navigate(['/error']);
            }
          }
          return throwError(displayError);
        })
     );
  }
}

HttpInterceptors are very powerful. This one does the following:

1. Adds a Content-Type to the header of every request, setting it to application/json
2. Sends each request with credentials
3. Retries each request a second time before error handling
4. Handles errors
   • When the User is Unauthorized, it redirects to a custom 401 error page
   • When the Server throws an Error (500+), it redirects to a custom server error page
   • In all cases, it logs the error using the logging service mentioned above
   • It also throws the error back to the caller, so if your API returns user-friendly error messages you can catch them in your controller and show them to your users

To register an HttpInterceptor in your application you need a module:

http-interceptor.module.ts

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpRequestInterceptor } from './http-request-interceptor';


@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS,
      useClass: HttpRequestInterceptor,
      multi: true
    }
  ]
})

export class HttpInterceptorModule { }

Then you register this module in your app.module.ts file and include it in the imports array.

Although this is not an exact answer to your question, it might still be helpful to you.

In your Angular templates, you can use the Save Navigation Operator which checks whether a variable has a renderable value (anything but null or undefined). Otherwise, the expression will simply not be rendered and you'll receive no error at all. You just need to append a question mark after the variable you would like to render: <p>{{variable?}}</p>

If you still need to log all possible errors, you'll probably need to implement error handling to all your API service methods. The Official Angular Guide provides a very detailed explanation on HttpClient error handling.