Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand ErrorHandler in angular". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand ErrorHandler in angular.

ErrorHandler

The default implementation of ErrorHandler prints error messages to console. To intercept error handling, write a custom exception handler that will change this default behavior to what your application requires.

Demonstrate how to use it with an example in actual development:

If the frontend puts forward a new requirement to add global error handling to the frontend and report the error log, the processing is as follows:

1. Create an error-handling error-handler.service.ts

Import {HttpClient} from'@ angular/common/http';import {ErrorHandler, Injectable} from'@ angular/core';@Injectable () export class AppGlobalErrorhandler implements ErrorHandler {constructor (private http:HttpClient) {} / when an exception occurs in the program, the handleError hook is automatically called to determine whether it is an exception from the client or from the server. HandleError (error) {/ / misprint information console.warn ("customize catch execption:", error.stack); /. / / exception handling logic / /. If (['ExpressionChangedAfterItHasBeenCheckedError'] .every (item = >! error.stack.includes (item)) {/ / report error log this.http.post (' / api/errorLog', {url: location.href, type: 'WEB', error: error.stack, message: error.toString ()}). Subscribe ()}}

2. Add to app.module.ts

Import {AppGlobalErrorhandler} from'. / service/error-handler.service';...providers: [. {provide: ErrorHandler, useClass: GlobalErrorHandler},...]

When an exception occurs in the program, the handleError hook is automatically called to determine whether it is an exception from the client or from the server.

3. What is dealt with above is the exception occurred on the page. In the actual development, we also need to report the exception of the interface and so on. Ng-alain framework is currently used, so add code to the default.interceptor.ts interceptor. For more information: ng-alain- intercepts network requests.

Private handleData (event: HttpResponse | HttpErrorResponse, data?:any): Observable {/ / determine whether it is an error instance if (event instanceof HttpErrorResponse & & event.url.indexOf ('api/errorLog') = =-1) {/ / report the API error log this.http.post (' / api/errorLog', {url: event.url, type: 'INTERFACE') Message: event.message, status: event.status, statusText: event.statusText, param: JSON.stringify (data ['body'] | | undefined), body: JSON.stringify ((event as any) [' body'] | | undefined), error:JSON.stringify (event.error),}). Subscribe ()} return of (event) } / / interceptor intercept (req: HttpRequest, next: HttpHandler,) {return next.handle (newReq) .pipe (/ / when an error occurs in the request, use a pipe to send the error to the error processor catchError ((err: HttpErrorResponse) = > this.handleData (err,newReq)), mergeMap ((event: any) = > {/ / allow unified error handling of the request This is because if (event instanceof HttpResponse & & event.status = = 200) return this.handleData (event) is required for a request whose HTTP request status is 200in the case of a business error. / / if everything is normal, then return of (event);}),);}

In the writing of point 3 above, errors are not handled by automatically calling handleError hooks. Errors of type HttpErrorResponse can only be handled in the Interceptor interceptor. If handled here, ErrorHandler will not be able to catch them. So in Interceptor, if you have to handle errors through the handleError hook function, you need to throw an error of type HttpErrorResponse. As follows:

CatchError ((error: HttpErrorResponse) = > {if (error.status = 401) {/ / skip to the login page or refresh token} else {return throwError (error);}) at this point, I believe you have a deeper understanding of "how to understand ErrorHandler in angular". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.