Javascript – How to log all possible console errors occurring in Angular application on a client’s side

angularerror-handlingjavascriptloggingtypescript

Currently, my Angular application consists of a significant number of submodules and components. Angular applications are quite sensitive to html rendering errors. For example, if we get a NULL object from an API and trying to get access to its property, it partially breaks rendering of the application.

It is quite difficult to handle and test such cases taking into account that the application is constantly growing. Do you know if it is possible to create a script that can log all error appearing in a console?

Here what I have got:

1) An http requests error handle to log broken requests from an API:

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

2) Client-side logger but for whatever reason it only logs errors from crawlers 🙂 

<script>
  window.onerror = function(m,u,l,c) {
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
      var data = "msg="+encodeURIComponent(m)
        +"&url="+encodeURIComponent(u)
        +"&line="+l
        +"&col="+c
        +"&href="+encodeURIComponent(window.location.href);
      xhr.open("GET", "logger.php?"+data, true);
      xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      xhr.send();
    }
  };
</script>

It would be very useful to get a script that can simply log all errors from console and

Best Solution

If you wish to catch and log all the errors (not only HTTP nature ones) in your Angular application I'd propose you the way that Sentry and other bug trackers use.

Angular has an ErrorHandler class which provides a hook for centralized exception handling.

So your task would be to create your own error handler. I usually do it like this:

import {ErrorHandler, Injectable} from '@angular/core';
import {LoggerService} from './some/logger.service';

@Injectable()
export class CustomErrorHandlerService extends ErrorHandler {

    constructor(private logger: LoggerService) {
        super();
    }

    handleError(error) {
        // Here you can provide whatever logging you want
        this.logger.logError(error);
        super.handleError(error);
    }
}

The next step is to use your error handler by means of Dependency Injection. Just add it in your AppModule like this:

import {CustomErrorHandlerService} from '~/app/_services/custom-error-handler.service';

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
        ...
        {provide: ErrorHandler, useClass: CustomErrorHandlerService},
    ],
    bootstrap: [AppComponent]
})

That's it. The key feature of such implementation is that this service handles all possible errors, appearing in your application (just like you ask in your question) including HTTP errors and others.

Please, leave your comments if you have any additional questions.

Related Question