One article to understand how to handle errors in Angular

How can errors be handled in

Angular? This article will take you through the error handling mechanism in Angular and introduce how to handle errors.

Error handling is a requirement that is often encountered when writing code and must be handled. Many times the logic of handling exceptions is to avoid program crashes. Let’s take a look at it AngularHow to handle errors. [Related tutorial recommendations: "angular tutorial"]

What is Angular

Angualr is a tool from Google The open source web front-end framework was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products.

AngularJS is based on the declarative programming model so that users can develop based on business logic. The framework is based on HTML content filling and two-way data binding to complete the automatic data synchronization mechanism. Finally, AngularJS Enhanced DOM operations enhance testability.

try/catch

The most familiar way is to add try/ in the code catch block, if an error occurs in try, it will be caught and the script will continue to execute. However, as the size of the application increases, this approach becomes unmanageable.

ErrorHandler

Angular provides a default ErrorHandler that prints error messages to the console, so you can Intercept this default behavior to add custom processing logic. Try writing an error handling class below:

import { ErrorHandler, Injectable } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  handleError(error: Error | HttpErrorResponse) {
    if (!navigator.onLine) {
      console.error("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          console.error("Browser Offline!");
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          console.error("Http Error!");
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        console.error("Client Error!");
      }
      console.error(error);
    }
  }
}

Usually create a shared directory under appshared , and place this file in the providers folder

Now, we need to change the default behavior of the application to use our custom class instead of ErrorHandler. Modify the app.module.ts file, import ErrorHandler from @angular/core, and add providers to @NgModule Module, the code is as follows:

import { NgModule, ErrorHandler } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Providers
import { ErrorsHandler } from "./shared/providers/error-handler";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [{ provide: ErrorHandler, useClass: ErrorsHandler }],
  bootstrap: [AppComponent]
})
export class AppModule {}

HttpInterceptor

##HttpInterceptor provides a interception of HTTP requests/responses methods, they can be processed before passing them. For example, an HTTP request can be retried several times before an error is thrown. This way, timeouts can be handled gracefully without having to throw errors.

You can also check the error status before throwing the error. Using an interceptor, you can check the 401 status error code and redirect the user to the login page.

import { Injectable } from "@angular/core";
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { retry, catchError } from "rxjs/operators";

@Injectable()
export class HttpsInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      retry(1),
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 跳转到登录页面
        } else {
          return throwError(error);
        }
      })
    );
  }
}

also needs to be added to

app.module.ts

import { NgModule, ErrorHandler } from "@angular/core";
import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

// Providers
import { ErrorsHandler } from "./shared/providers/error-handler";
import { HttpsInterceptor } from "./shared/providers/http-interceptor";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  providers: [
    { provide: ErrorHandler, useClass: ErrorsHandler },
    { provide: HTTP_INTERCEPTORS, useClass: HttpsInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Multiple providers are used to create extensible services, in which the system comes with some default providers , you can also sign up for other providers. A combination of the default provider and other providers will be used to drive the behavior of the system.

Notifications

Printing error logs on the console is very friendly to developers, but for users, a more friendly way is needed. Tell when these errors occur from the GUI. Depending on the error type, two components are recommended:

Snackbar and Dialog

• ##Snackbar

  : Recommended for simple prompts , such as a form missing a required field or notifying the user of predictable errors (invalid email, username too long, etc.).

• Dialog

  : This method is recommended when there are unknown server-side or client-side errors; in this way, more descriptions can be displayed, Or even call-to-action, like allowing users to enter their email to track bugs.

Add a service in the

shared

folder to handle all notifications, create a new services folder, and create the file: notification. service.ts, the code is as follows: <pre class="brush:js;toolbar:false;">import { Injectable } from &quot;@angular/core&quot;; import { MatSnackBar } from &quot;@angular/material/snack-bar&quot;; @Injectable({ providedIn: &quot;root&quot; }) export class NotificationService { constructor(public snackBar: MatSnackBar) {} showError(message: string) { this.snackBar.open(message, &quot;Close&quot;, { panelClass: [&quot;error&quot;] }); } }</pre>Update

error-handler.ts

, add NotificationService: <pre class="brush:js;toolbar:false;">import { ErrorHandler, Injectable, Injector } from &quot;@angular/core&quot;; import { HttpErrorResponse } from &quot;@angular/common/http&quot;; // Services import { NotificationService } from &quot;../services/notification.service&quot;; @Injectable() export class ErrorsHandler implements ErrorHandler { //Error handling需要先加载，使用Injector手动注入服务 constructor(private injector: Injector) {} handleError(error: Error | HttpErrorResponse) { const notifier = this.injector.get(NotificationService); if (!navigator.onLine) { //console.error(&quot;Browser Offline!&quot;); notifier.showError(&quot;Browser Offline!&quot;); } else { if (error instanceof HttpErrorResponse) { if (!navigator.onLine) { //console.error(&quot;Browser Offline!&quot;); notifier.showError(error.message); } else { // Handle Http Error (4xx, 5xx, ect.) // console.error(&quot;Http Error!&quot;); notifier.showError(&quot;Http Error: &quot; + error.message); } } else { // Handle Client Error (Angular Error, ReferenceError...) // console.error(&quot;Client Error!&quot;); notifier.showError(error.message); } console.error(error); } } }</pre>If in a component When an error is thrown in, you can see a nice

snackbar

message:

Logs and Error Tracing

Of course the user cannot be expected to report to Per

bug

, once deployed to production, no console logs can be seen. Therefore, you need a backend service that can log errors with custom logic written to the database or use existing solutions such as Rollbar, Sentry, Bugsnag. Next create a simple error tracking service, create

logging.service.ts

: <pre class="brush:js;toolbar:false;">import { Injectable } from &quot;@angular/core&quot;; import { HttpErrorResponse } from &quot;@angular/common/http&quot;; @Injectable({ providedIn: &quot;root&quot; }) export class LoggingService { constructor() {} logError(error: Error | HttpErrorResponse) { // This will be replaced with logging to either Rollbar, Sentry, Bugsnag, ect. if (error instanceof HttpErrorResponse) { console.error(error); } else { console.error(error); } } }</pre>Add the service to

error-handler.ts

中：<pre class="brush:js;toolbar:false;">import { ErrorHandler, Injectable, Injector } from &quot;@angular/core&quot;; import { HttpErrorResponse } from &quot;@angular/common/http&quot;; // Services import { NotificationService } from &quot;../services/notification.service&quot;; import { LoggingService } from &quot;../services/logging.service&quot;; @Injectable() export class ErrorsHandler implements ErrorHandler { //Error handling需要先加载，使用Injector手动注入服务 constructor(private injector: Injector) {} handleError(error: Error | HttpErrorResponse) { const notifier = this.injector.get(NotificationService); const logger = this.injector.get(LoggingService); if (!navigator.onLine) { //console.error(&quot;Browser Offline!&quot;); notifier.showError(&quot;Browser Offline!&quot;); } else { if (error instanceof HttpErrorResponse) { if (!navigator.onLine) { //console.error(&quot;Browser Offline!&quot;); notifier.showError(error.message); } else { // Handle Http Error (4xx, 5xx, ect.) // console.error(&quot;Http Error!&quot;); notifier.showError(&quot;Http Error: &quot; + error.message); } } else { // Handle Client Error (Angular Error, ReferenceError...) // console.error(&quot;Client Error!&quot;); notifier.showError(error.message); } // console.error(error); logger.logError(error); } } }</pre>So far, the entire error handling mechanism has been introduced, which is basically similar to the way projects developed in other frameworks or languages ​​are handled.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of One article to understand how to handle errors in Angular. For more information, please follow other related articles on the PHP Chinese website!