Mari bercakap tentang kaedah pengendalian ralat yang biasa digunakan dalam Angular

Artikel ini akan memberi anda pemahaman yang mendalam tentang kaedah pengendalian ralat yang biasa digunakan dalam Angular Saya harap ia akan membantu semua orang!

Pengendalian ralat adalah keperluan yang sering dihadapi dan mesti dikendalikan semasa menulis kod Banyak kali logik pengendalian pengecualian adalah untuk mengelakkan ranap program Angular pengendalian Cara Luar Biasa. [Cadangan tutorial berkaitan: "tutorial sudut"]

Apakah Sudut

Angualr ialah bahagian hadapan web sumber terbuka daripada Google Rangka kerja, dilahirkan pada tahun 2009, telah dicipta oleh Misko Hevery dan yang lain, dan kemudiannya diperoleh oleh Google. Ia merupakan rangka kerja JS bahagian hadapan yang sangat baik yang telah digunakan dalam banyak produk Google.

AngularJS adalah berdasarkan model pengaturcaraan deklaratif supaya pengguna boleh membangunkan berdasarkan logik perniagaan Rangka kerja ini berdasarkan pengisian kandungan HTML dan pengikatan data dua hala untuk melengkapkan mekanisme penyegerakan data automatik , Operasi DOM Dipertingkatkan AngularJS meningkatkan kebolehujian

cuba/tangkap

Cara yang paling biasa ialah menambah blok try/catch dalam kod, Jika ralat. berlaku dalam try, ia akan ditangkap dan skrip akan terus dilaksanakan. Walau bagaimanapun, apabila saiz aplikasi bertambah, pendekatan ini menjadi tidak terurus.

ErrorHandler

Angular menyediakan ErrorHandler lalai yang boleh mencetak mesej ralat ke konsol, jadi tingkah laku lalai ini boleh dipintas untuk menambah logik pemprosesan penyesuaian, cuba tulis kelas pengendalian ralat di bawah:

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);
    }
  }
}

Biasanya buat direktori kongsi app di bawah shared dan letakkan fail ini dalam folder providers

Kini, gelagat lalai aplikasi perlu ditukar untuk menggunakan kelas tersuai kami dan bukannya ErrorHandler. Ubah suai fail app.module.ts, import @angular/core daripada ErrorHandler dan tambah providers pada modul @NgModule Kodnya adalah seperti berikut:

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 Menyediakan cara untuk memintas permintaan/tindak balas HTTP dan memprosesnya sebelum menyampaikannya. Sebagai contoh, permintaan HTTP boleh dicuba semula beberapa kali sebelum ralat dilemparkan. Dengan cara ini, tamat masa boleh dikendalikan dengan anggun tanpa perlu membuang ralat.

Anda juga boleh menyemak status ralat sebelum membuangnya Dengan menggunakan pemintas, anda boleh menyemak kod ralat status 401 dan mengubah hala pengguna ke halaman log masuk.

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);
        }
      })
    );
  }
}

juga perlu ditambahkan pada 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 {}

Berbilang pembekal digunakan untuk mencipta perkhidmatan berskala, di mana sistem disertakan dengan beberapa pembekal lalai, atau Tandatangan terpulang kepada pembekal lain. Gabungan pembekal lalai dan pembekal lain akan digunakan untuk memacu gelagat sistem.

Pemberitahuan

Mencetak log ralat pada konsol sangat mesra untuk pembangun, tetapi bagi pengguna, cara yang lebih mesra diperlukan daripada GUI. Bergantung pada jenis ralat, dua komponen disyorkan: Snackbar dan Dialog

• Snackbar: Disyorkan untuk gesaan mudah, seperti borang yang tiada medan yang diperlukan atau untuk maklumkan kesilapan pengguna yang boleh diramalkan (e-mel tidak sah, nama pengguna terlalu panjang, dsb.).

• Dialog: Kaedah ini disyorkan apabila terdapat ralat bahagian pelayan atau bahagian klien yang tidak diketahui dengan cara ini, lebih banyak huraian boleh dipaparkan, malah call-to-action , seperti membenarkan pengguna memasukkan e-mel mereka untuk mengesan pepijat.

Tambah perkhidmatan dalam folder shared untuk mengendalikan semua pemberitahuan, buat folder services baharu, buat fail: notification.service.ts, kodnya adalah seperti berikut:

import { Injectable } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";

@Injectable({
  providedIn: "root"
})
export class NotificationService {
  constructor(public snackBar: MatSnackBar) {}

  showError(message: string) {
    this.snackBar.open(message, "Close", { panelClass: ["error"] });
  }
}

Dikemas kini error-handler.ts, menambah NotificationService:

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";

@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("Browser Offline!");
      notifier.showError("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          //console.error("Browser Offline!");
          notifier.showError(error.message);
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          // console.error("Http Error!");
          notifier.showError("Http Error: " + error.message);
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        // console.error("Client Error!");
        notifier.showError(error.message);
      }
      console.error(error);
    }
  }
}

Jika ralat dilemparkan dalam komponen, mesej snackbar yang bagus boleh dilihat:

Log dan Penjejakan Ralat

Sudah tentu pengguna tidak boleh dijangka melaporkan setiap bug atau melihat sebarang log konsol sebaik sahaja digunakan untuk pengeluaran. Oleh itu anda memerlukan perkhidmatan bahagian belakang yang boleh mengelog ralat dengan logik tersuai yang ditulis pada pangkalan data atau menggunakan penyelesaian sedia ada seperti Rollbar, Sentry, Bugsnag.

Seterusnya buat perkhidmatan penjejakan ralat mudah, buat logging.service.ts:

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

@Injectable({
  providedIn: "root"
})
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);
    }
  }
}

Tambah perkhidmatan ke error-handler.ts:

import { ErrorHandler, Injectable, Injector } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
// Services
import { NotificationService } from "../services/notification.service";
import { LoggingService } from "../services/logging.service";

@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("Browser Offline!");
      notifier.showError("Browser Offline!");
    } else {
      if (error instanceof HttpErrorResponse) {
        if (!navigator.onLine) {
          //console.error("Browser Offline!");
          notifier.showError(error.message);
        } else {
          // Handle Http Error (4xx, 5xx, ect.)
          // console.error("Http Error!");
          notifier.showError("Http Error: " + error.message);
        }
      } else {
        // Handle Client Error (Angular Error, ReferenceError...)
        // console.error("Client Error!");
        notifier.showError(error.message);
      }
      // console.error(error);
      logger.logError(error);
    }
  }
}

Pada ketika ini, The keseluruhan mekanisme pengendalian ralat telah diperkenalkan, dan ia pada dasarnya serupa dengan cara projek yang dibangunkan dalam rangka kerja atau bahasa lain dikendalikan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Mari bercakap tentang kaedah pengendalian ralat yang biasa digunakan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!