Using Vscode to develop an ASP. 2.0+angular 5 Project (4): ANGULAR5 Global error handling

The first part: http://www.cnblogs.com/cgzl/p/8478993.html

Part II: http://www.cnblogs.com/cgzl/p/8481825.html

Part III: https://www.cnblogs.com/cgzl/p/8525541.html

This article describes the global error handling of angular 5.

Need to use to code: Https://pan.baidu.com/s/1F0KjbwVE8_Tzfwy69Alp-A

Angular 5 Global error handling

Reference Document: Https://angular.io/api/core/ErrorHandler

First, follow the documentation to build the App.error-handler.ts file on the client project:

Import {ErrorHandler} from ' @angular/core '; Export class Apperrorhandler implements ErrorHandler {      void  {        console.log (' ERROR occurred. ') );    }}

Here, we only write log.

Then register in App.module:

Providers: [    tvnetworkservice,    {provide:errorhandler, useclass:apperrorhandler}  ],

Then put the tv-network-list.component.ts inside to a wrong handle to delete:

Then throw an exception to the controller in the back end:

Then we try:

As you can see, this global error handler is working properly.

don't worry, let's try Toastr in ErrorHandler .

App.error-handler.ts:

Import {ErrorHandler} from ' @angular/core 'ngx-toastr '; Export class Apperrorhandler implements ErrorHandler {    constructor (private Toastr:toastrservice) {}    void  {         // console.log (' ERROR occurred. ');         this. Toastr.error (' error occurred ');}    }

And then back to the browser, an error occurred:

This error occurs because Apperrorhandler was initialized before angular introduced the Toastr module.

We can deal with this:

Import {ErrorHandler, injectable, Injector, Inject} from ' @angular/core 'ngx-toastr ';  @Injectable ()Export class Apperrorhandler implements ErrorHandler {    constructor (private injector: Injector) {}    private Get Toastr (): toastrservice {        return this   . Injector.get (Toastrservice);    }     void {        this. Toastr.error (' error occurred ');    }} 

Use injector to manually inject Toastrservice.

Back to Browser:

The error message does not pop up!!!!, but after switching the menu back and forth, the error message begins to appear, which seems a bit dull.

What is the reason for this? First, we need to know the following:

Zone

First to first, you need to understand the following executioncontext, the program executes to the context, but these things can be confusing after seeing the definition. So let's start by looking at this piece of code:

Const Zone ={run: (callback)= {    if( This. Beforetask) {       This. Beforetask ();    } callback (); if( This. Aftertask) {       This. Aftertask (); }  }}; Zone.beforetask= () + ={Console.log (' Before Task. ');}; Zone.aftertask= () + ={Console.log (' After Task. ');}; Zone.run (()={Console.log (' Running ... ');});

is to define a zone, which can execute a callback function to the Run method, the callback function can have some pre-defined functions before and after it, and if they exist, they will be executed. By defining the contents of these functions, we can add custom logic before and after the callback that executes the run.

Back to angular, angular's change detection (changes Detection) function used these things.

For example, a component in angular has a click event, the Click () method updates the value of some properties, this time angular need to change the detection, if it does change, then angular will update the DOM, So we can see the changes in the page. Angular used the monkey patch to make it run in zone, when the button is clicked, the code is always executed in the zone, after the click Processing method, angular will perform the change detection action.

Angular should be this way to carry out the monkey Patch:

Const Zone ={run: (callback)= {    if( This. Beforetask) {       This. Beforetask ();    } callback (); if( This. Aftertask) {       This. Aftertask (); }  }}; Zone.beforetask= () + ={Console.log (' Before Task. ');}; Zone.aftertask= () + ={Console.log (' After Task. ');}; Zone.run (()={Console.log (' Running ... ');}); var _settimeout = settimeout;settimeout = (callback, timeout) = {Zone.run (() =>  {_settimeout (callback, timeout); });}; Click (() =  {console.log (' set timeout ' );}); 

Since this is asynchronous, printing to the console may be: Before task, after task, set timeout.

JS runtime, there is a message queue. Any time an asynchronous operation occurs, the queue will advance to a message, the JS runtime will be lectured on the queue, one by one to roll out the message queue, and then call the message to the callback function. For this example, settimeout ().

So there is the Zone.js this library.

A zone.js is an execution context that can be passed between different asynchronous operations in a persistent way.

Angular used the library and built the Ngzone module on top of it. So angular to change detection after an asynchronous operation has occurred.

There are several types of asynchronous operations in the browser: DOM events, Ajax requests, timed callbacks, and so on.

Back to the project App.error-handler.ts:

This sentence ran out of the range of the angular zone ...

So when the error occurs, Toastr's error method is called (the state changes), but angular does not know the change, so the TOASTR notification is not displayed.

How to solve it?

Using Ngzone:

 Import {ErrorHandler, injectable, Injector, Inject, ngzone} from ' @angular/core '  private Ngzone : Ngzone ) {} private Get Toastr (): toastrservice { return this  .injector.get (Toastrservice); } handleError (Error:any):  void   {   {this . Toastr.error (' ERROR '           );    }); }} 
  

Try the following page:

There's no problem this time.

Logging Errors Logging Errors

You can write your own background API to log, but here I introduce a dedicated to do logging cloud services, Sentry.io. https://sentry.io/

Please register your account first.

Then create a project and select angular:

Then click on the button below to create Project.

It then gives a description of the installation and configuration:

Perform the command installation first.

Then, configure:

Import * As Raven from ' Raven-js ' ;' @angular/platform-browser' @angular/core './app.component ';  Raven  . config (' https://[email protected]/301095')  . Install ();  @NgModule ({  imports: [Browsermodule],  declarations: [AppComponent],  bootstrap: [AppComponent] ,  providers: [{Provide:errorhandler, Useclass:apperrorhandler}]}) Export class Appmodule {}

Follow the instructions to configure, we make some adjustments, here the red part is each user is not the same.

Last modified App.error-handler.ts:

Import {ErrorHandler, injectable, Injector, Inject, ngzone} from ' @angular/core '; import {toastrservice, Toast} from' Ngx-toastr '; Import * as Raven from ' Raven-js ';        @Injectable () Export class Apperrorhandler implements ErrorHandler {constructor (private injector:injector, Private Ngzone:ngzone) {} private Get Toastr (): toastrservice {return  This. Injector.get (Toastrservice); } handleError (Error:any):void{ raven.captureexception (error);  This. Ngzone.run (() = {             This. Toastr.error (' An error has occurred ');    }); }}

Back to the browser error page, after triggering the error, about a few minutes later, come to Sentry.io website to view:

Write this today, tomorrow and the day after. Angular5 upload files to the ASP. NET core Web API.

Using Vscode to develop an ASP. 2.0+angular 5 Project (4): ANGULAR5 Global error handling