Question

29

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

rated 0 times [ 36] [ 7] / answers: 1 / hits: 25140 / 5 Years ago, sun, august 4, 2019, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dayshadelaniej

Add To Favorites

Follow

Total Points: 668

Total Questions: 121

Total Answers: 121

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 5 Years ago margaritakristinak · Accepted Answer

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.