Angular get all console errors

Question

I'm trying to catch all console errors of my Angular aplication, not only the http response error, but also those that are generated in the application. I mean, All console errors, like this

or like this

or like this

What I need is, when I catch some of this error (application errors and http errors), I put it in another service to a database to store the problem and make some stadistics.

I have researched and I have come across these solutions:

First, the angular solution ---> https://angular.io/api/core/ErrorHandler

Also this answers ---> How to get all console error messages in Angular application

this ----> Angular error handling and logging - Call GlobalErrorHandler's handleError

and this ----> https://www.concretepage.com/angular/angular-custom-error-handler

but none seem to work (not even with http responses)

I am trying to do this centrally, I mean, a single service that catches all errors, regardless of the module or component where the error has occurred, and then, send to my other service and store the error in my database... is this possible? and How is possible?

Thank you so much!

Answer 1

Monkey-patching of console.error method will definitely help you with catching all console errors.

console.error = (originLogFn => function () {
  // do smth with the error

  originLogFn.apply(this, arguments);
})(console.error);

Also beware that an error can happen before Angular initialization and it won't be handled by any Angular built-in service with console.error. In this case you can simply use:

window.onerror = (err) => {
  // do smth with the error
}

Answer 2

This works for me

1- First create an error handler service

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { ErrorService } from "./error.service";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class ErrorHandlerService extends ErrorHandler {

errorService: ErrorService;

constructor(private injector: Injector) {
    super();
}

override handleError(error: Error | HttpErrorResponse) {
    super.handleError(error);

    // Inject prerequisite services
    this.injectServices();

    /*let name;*/
    let message;
    let code;
    let stackTrace;

    // Detect Error type (server or client)
    // Server error
    if (error instanceof HttpErrorResponse) {
        name = this.errorService.getServerName(error);
        code = this.errorService.getServerCode(error);
        message = this.errorService.getServerMessage(error);
        stackTrace = this.errorService.getServerStack(error);

        // You should write code here to send error data to the server ...

        // Client error
    } else {
        name = this.errorService.getClientName(error);
        message = this.errorService.getClientMessage(error);
        stackTrace = this.errorService.getClientStack(error);


        // You should write code here to send error data to the server ...            

        );
    }
}

private injectServices(): void {
    this.errorService = this.injector.get(ErrorService);
}
}

2- Create an error service

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class ErrorService {

    getClientName(error: Error): string {
        return error.name ? error.name : error.toString();
    }

    getClientMessage(error: Error): string {
        return error.message ? error.message : error.toString();
    }

    getClientStack(error: Error): string {
        return error.stack;
    }

    getServerName(error: HttpErrorResponse): string {
        return error.name ? error.name : error.toString();
    }

    getServerMessage(error: HttpErrorResponse): string {
        const msg = error.error.message;
        if (!!msg) {
            return msg + " : " + error.error.ExceptionMessage;
        }

        return "Application can not execute because API hasn\'t been started";
    }

    getServerCode(error: HttpErrorResponse): string {
        return error.error.error.code;
    }

    getServerStack(error: HttpErrorResponse): string {
        return error.error.StackTrace;
    }
}

3- Import ErrorHandlerService and ErrorService in app.module

@NgModule({
    ...
    ...
    ...  

    providers: [
        ErrorService,
        {
            provide: ErrorHandler,
            useClass: ErrorHandlerService
        }
    ]
})
export class AppModule {}