Ein Artikel zum Verständnis des Umgangs mit Fehlern in Angular

Wie können Fehler in

Angular behandelt werden? Dieser Artikel führt Sie durch den Fehlerbehandlungsmechanismus in Angular und stellt vor, wie Sie mit Fehlern umgehen.

Fehlerbehandlung ist eine Anforderung, die beim Schreiben von Code häufig auftritt und behandelt werden muss. Oft besteht die Logik der Ausnahmebehandlung darin, Programmabstürze zu vermeiden. Schauen wir uns an, wie Angular damit umgeht Fehler. [Verwandte Tutorial-Empfehlungen: „Angular处理错误的方式。【相关教程推荐：《angular教程》】

什么是Angular

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

AngularJS 是基于声明式编程模式 是用户可以基于业务逻辑进行开发. 该框架基于HTML的内容填充并做了双向数据绑定从而完成了自动数据同步机制. 最后, AngularJS 强化的DOM操作增强了可测试性.

try/catch

最熟悉的的方式，就是在代码中添加try/catch块，在try中发生错误，就会被捕获并且让脚本继续执行。然而，随着应用程序规模的扩大，这种方式将变得无法管理。

ErrorHandler

Angular提供了一个默认的ErrorHandler，可以将错误消息打印到控制台，因此可以拦截这个默认行为来添加自定义的处理逻辑，下面尝试编写错误处理类：

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

通常在app下创建一个共享目录shared，并将此文件放在providers文件夹中

现在，需要更改应用程序的默认行为，以使用我们自定义的类而不是ErrorHandler。修改app.module.ts文件，从@angular/core导入ErrorHandler，并将providers添加到@NgModule模块，代码如下：

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提供了一种拦截HTTP请求/响应的方法，就可以在传递它们之前处理。例如，可以在抛出错误之前重试几次HTTP请求。这样，就可以优雅地处理超时，而不必抛出错误。

还可以在抛出错误之前检查错误的状态，使用拦截器，可以检查401状态错误码，将用户重定向到登录页面。

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

同样需要添加到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 {}

多提供者用于创建可扩展服务，其中系统带有一些默认提供者，也可以注册其他提供者。默认提供程序和其他提供程序的组合将用于驱动系统的行为。

Notifications

在控制台打印错误日志对于开发者来说非常友好，但是对于用户来说则需要一种更加友好的方式来告诉这些错误何时从GUI中发生。根据错误类型，推荐两个组件：Snackbar和Dialog

• Snackbar：推荐用于简单的提示，比如表单缺少必填字段或通知用户可预见的错误（无效电子邮件、用户名太长等）。

• Dialog：当存在未知的服务器端或客户端错误时，推荐使用这种方式；通过这种方式，可以显示更多的描述，甚至call-to-action，比如允许用户输入他们的电子邮件来跟踪错误。

在shared文件夹中添加一个服务来处理所有通知，新建services文件夹，创建文件：notification.service.ts，代码如下：

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

更新error-handler.ts，添加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);
    }
  }
}

如果在一个组件中抛出一个错误，可以看到一个很好的snackbar消息：

日志和错误跟踪

当然不能期望用户向报告每个bug，一旦部署到生产环境中，就不能看到任何控制台日志。因此就需要能够记录错误的后端服务与自定义逻辑写入数据库或使用现有的解决方案，如Rollbar、Sentry、Bugsnag。

接下来创建一个简单的错误跟踪服务，创建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);
    }
  }
}

将服务添加到error-handler.tsAngular Tutorial

“]

Was ist Angular

Angualr ist ein Dieses Open-Source-Web-Frontend-Framework von Google wurde 2009 geboren. Es wurde von Misko Hevery und anderen erstellt und später von Google übernommen. Es handelt sich um ein hervorragendes Front-End-JS-Framework, das in vielen Google-Produkten verwendet wurde. 🎜

🎜AngularJS basiert auf einem deklarativen Programmiermodell, das es Benutzern ermöglicht, basierend auf Geschäftslogik zu entwickeln. Das Framework basiert auf HTML-Inhaltsfüllung und bidirektionaler Datenbindung, um einen automatischen Datensynchronisierungsmechanismus zu vervollständigen Operationen Verbesserte Testbarkeit.🎜

try/catch

🎜Der bekannteste Weg ist das Hinzufügen von try/catch-Block: Wenn in try ein Fehler auftritt, wird dieser abgefangen und das Skript wird weiter ausgeführt. Mit zunehmender Größe der Anwendung wird dieser Ansatz jedoch unüberschaubar. 🎜

ErrorHandler

🎜Angular stellt einen Standard-ErrorHandler bereit, der der Fehler sein kann Die Meldung wird an die Konsole ausgegeben, sodass Sie dieses Standardverhalten abfangen können, um eine benutzerdefinierte Verarbeitungslogik hinzuzufügen: 🎜

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

🎜Erstellen Sie normalerweise ein freigegebenes Verzeichnis unter dem Code appshared und platzieren Sie diese Datei im Ordner providers 🎜

🎜Jetzt müssen wir das Standardverhalten der Anwendung ändern, um unsere benutzerdefinierte Klasse anstelle von ErrorHandler. Ändern Sie die Datei <code>app.module.ts, importieren Sie ErrorHandler aus @angular/core und fügen Sie providers zu @NgModule Modul, der Code lautet wie folgt: 🎜rrreee

HttpInterceptor

🎜HttpInterceptor bietet eine Möglichkeit, HTTP-Anfragen/-Antworten abzufangen und zu verarbeiten, bevor sie weitergeleitet werden. Beispielsweise kann eine HTTP-Anfrage mehrmals wiederholt werden, bevor ein Fehler ausgegeben wird. Auf diese Weise können Zeitüberschreitungen ordnungsgemäß behandelt werden, ohne dass Fehler ausgegeben werden müssen. 🎜🎜Sie können auch den Status des Fehlers überprüfen, bevor Sie ihn auslösen. Mithilfe eines Interceptors können Sie den 401-Statusfehlercode überprüfen und den Benutzer zur Anmeldeseite weiterleiten. 🎜rrreee🎜Muss auch zu app.module.ts hinzugefügt werden 🎜rrreee

🎜Mehrere Anbieter werden verwendet, um erweiterbare Dienste zu erstellen, und andere Anbieter können ebenfalls verwendet werden registriert wer. Zur Steuerung des Systemverhaltens wird eine Kombination aus dem Standardanbieter und anderen Anbietern verwendet. 🎜

Benachrichtigungen

🎜Das Drucken von Fehlerprotokollen auf der Konsole ist für Entwickler sehr benutzerfreundlich, für Benutzer jedoch nicht. Es ist eine benutzerfreundliche Möglichkeit erforderlich, über die GUI zu erkennen, wann diese Fehler auftreten. Je nach Fehlertyp werden zwei Komponenten empfohlen: Snackbar und Dialog🎜

• 🎜Snackbar: empfohlen für einfache Eingabeaufforderungen, Beispielsweise fehlen in Formularen erforderliche Felder oder die Benachrichtigung von Benutzern über vorhersehbare Fehler (ungültige E-Mail-Adresse, zu langer Benutzername usw.) 🎜
• 🎜Dialog: Diese Methode wird empfohlen, wenn unbekannte serverseitige oder clientseitige Fehler vorliegen. Auf diese Weise können weitere Beschreibungen angezeigt werden, und sogar Call-to-Action, z. B. die Möglichkeit für Benutzer, ihre E-Mail-Adresse einzugeben, um Fehler zu verfolgen. 🎜

🎜Fügen Sie einen Dienst im Ordner shared hinzu, um alle Benachrichtigungen zu verarbeiten, erstellen Sie einen neuen Ordner services und erstellen Sie die Datei: notification.service.ts, der Code lautet wie folgt: 🎜rrreee🎜Aktualisieren Sie error-handler.ts und fügen Sie NotificationService hinzu: 🎜rrreee🎜Wenn ein Fehler vorliegt In eine Komponente geworfen, können Sie eine schöne snackbar-Nachricht sehen: 🎜

Protokoll- und Fehlerverfolgung

🎜Von Natürlich nicht erwartet. Benutzer melden jeden Bug und nach der Bereitstellung in der Produktion sind keine Konsolenprotokolle zu sehen. Daher benötigen Sie einen Backend-Dienst, der Fehler protokollieren und benutzerdefinierte Logik in die Datenbank schreiben oder vorhandene Lösungen wie Rollbar, Sentry, Bugsnagverwenden kann > Code>. 🎜🎜Als nächstes erstellen Sie einen einfachen Fehlerverfolgungsdienst, erstellen Sie logging.service.ts: 🎜rrreee🎜Fügen Sie den Dienst zu error-handler.ts hinzu: 🎜rrreee🎜 An dieser Stelle , Der gesamte Fehlerbehandlungsmechanismus wurde eingeführt, der im Wesentlichen der Art und Weise ähnelt, wie Projekte behandelt werden, die in anderen Frameworks oder Sprachen entwickelt wurden. 🎜

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEin Artikel zum Verständnis des Umgangs mit Fehlern in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!