Detailed Explanation of Angular Method for Handling Unknown Exception Errors

Write at the front

No matter how well the code is written, it is always impossible to deal with all possible exceptions completely, especially in the application of production environment. A large part of the data comes from users and is remote, so it is difficult to ensure that all the data are generated according to the program. In fact, it is impossible to know unless the tester finds out or the customer reports it. Therefore, it is very important to report the unknowable anomalies generated by the application.

Angular also provides global exception management by default, and when an exception occurs, it is thrown to the Console console. If you use NG-ZORRO, you may often encounter exception messages that ICON is not loaded, which is also one kind of exception messages:

core.js:5980 ERROR Error: [@ant-design/icons-angular]:the icon setting-o does not exist or is not registered.
 at IconNotFoundError (ant-design-icons-angular.js:94)
 at MapSubscriber.project (ant-design-icons-angular.js:222)
 at MapSubscriber._next (map.js:29)
 at MapSubscriber.next (Subscriber.js:49)
 at RefCountSubscriber._next (Subscriber.js:72)
 at RefCountSubscriber.next (Subscriber.js:49)
 at Subject.next (Subject.js:39)
 at ConnectableSubscriber._next (Subscriber.js:72)
 at ConnectableSubscriber.next (Subscriber.js:49)
 at CatchSubscriber.notifyNext (innerSubscribe.js:42)

However, Angular manages exception messages through ErrorHandler system 1, and only needs to override handleError method and reprocess exception messages.

ErrorHandler

First create an custom-error-handler. ts file:

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 handleError(error: any): void {
 super.handleError(error);
 }
}

CustomErrorHandler can complete access to the current user data, the current exception message object and so on, and allow the HttpClient report to the back-end.

The following is the documentation site for NG-ALAIN. Since Google Analytics is used for analysis, you only need to forward the exception message to onerror:

import { DOCUMENT } from '@angular/common';
import { ErrorHandler, Inject, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
 constructor(@Inject(DOCUMENT) private doc: any) {
 super();
 }

 handleError(error: any): void {
 try {
  super.handleError(error);
 } catch (e) {
  this.reportError(e);
 }
 this.reportError(error);
 }

 private reportError(error: string | Error): void {
 const win = this.doc.defaultView as any;
 if (win && win.onerror) {
  if (typeof error === 'string') {
  win.onerror(error);
  } else {
  win.onerror(error.message, undefined, undefined, undefined, error);
  }
 }
 }
}

Finally, register CustomErrorHandler in the AppModule module:

@NgModule({
 providers: [
  { provide: ErrorHandler, useClass: CustomErrorHandler },
 ]
})
export class AppModule { }

Conclusion

In fact, there is another very important task, They are packaged and compressed in the production environment, In other words, the generated exception message cannot be the same number as the actual number of lines of code, which requires the support of SourceMap. Of course, this file will not be published in normal production environment, so if you want to get the correct number of rows and columns, you still need to use the source-map module at the back end to parse out the real number of rows and columns.

Angular's Dependency Injection (DI) system allows us to quickly replace some of the Angular built-in modules to quickly address some of the specific requirements without modifying the business level.

Summarize