Angular에서 오류를 처리하는 방법을 이해하는 기사 1개

Angular에서 오류를 어떻게 처리할 수 있나요? 이 기사에서는 Angular의 오류 처리 메커니즘을 안내하고 오류를 처리하는 방법을 소개합니다.

오류 처리는 코드를 작성할 때 자주 발생하고 처리해야 하는 요구 사항입니다. 예외 처리 논리는 프로그램 충돌을 방지하기 위한 것입니다. Angular가 처리하는 방법을 살펴보겠습니다. 오류. [관련 튜토리얼 추천: "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 튜토리얼

"]

Angular란 무엇인가

Angualr는 Google의 이 오픈 소스 웹 프런트엔드 프레임워크는 2009년에 탄생했습니다. Misko Hevery 등이 만들었으며 나중에 Google에 인수되었습니다. 많은 Google 제품에서 사용되어 온 뛰어난 프런트엔드 JS 프레임워크입니다. 🎜

🎜AngularJS는 사용자가 비즈니스 로직을 기반으로 개발할 수 있는 선언적 프로그래밍 모델을 기반으로 합니다. 프레임워크는 HTML 콘텐츠 채우기 및 양방향 데이터 바인딩을 기반으로 하여 자동 데이터 동기화 메커니즘을 완성합니다. 향상된 테스트 가능성.🎜

try/catch

🎜가장 친숙한 방법은 < code>try/catch<를 추가하는 것입니다. /code> 블록, try에서 오류가 발생하면 이를 포착하고 스크립트는 계속 실행됩니다. 그러나 애플리케이션의 크기가 커지면 이 접근 방식은 관리하기 어려워집니다. 🎜

ErrorHandler

🎜Angular는 오류가 발생할 수 있는 기본 ErrorHandler를 제공합니다. 메시지가 콘솔에 인쇄되므로 이 기본 동작을 가로채서 사용자 정의 처리 논리를 추가할 수 있습니다. 아래 오류 처리 클래스를 작성해 보세요. 🎜

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

🎜일반적으로 appshared하고 이 파일을 providers 폴더에 넣습니다 🎜

🎜이제 ErrorHandler. <code>app.module.ts 파일을 수정하고 @angular/core에서 ErrorHandler를 가져온 다음 providers를 @NgModule 모듈에서 코드는 다음과 같습니다: 🎜rrreee

HttpInterceptor

🎜HttpInterceptor HTTP 요청/응답을 가로채서 전달하기 전에 처리하는 방법을 제공합니다. 예를 들어 오류가 발생하기 전에 HTTP 요청을 여러 번 재시도할 수 있습니다. 이렇게 하면 오류가 발생하지 않고 시간 초과를 적절하게 처리할 수 있습니다. 🎜🎜오류가 발생하기 전에 오류 상태를 확인할 수도 있습니다. 인터셉터를 사용하면 401 상태 오류 코드를 확인하고 사용자를 로그인 페이지로 리디렉션할 수 있습니다. 🎜rrreee🎜또한 app.module.ts에 추가해야 합니다.🎜rrreee

🎜확장 가능한 서비스를 생성하기 위해 여러 공급자가 사용됩니다. 시스템에는 일부 기본 공급자가 함께 제공되며 다른 공급자도 가능합니다. 누구. 기본 공급자와 다른 공급자의 조합이 시스템 동작을 구동하는 데 사용됩니다. 🎜

알림

🎜콘솔에 오류 로그를 인쇄하는 것은 개발자에게는 매우 친숙하지만 사용자에게는 그렇지 않습니다. GUI에서 이러한 오류가 발생할 때 알려주는 친숙한 방법이 필요합니다. 오류 유형에 따라 두 가지 구성 요소가 권장됩니다: Snackbar 및 Dialog🎜

• 🎜Snackbar: 간단한 프롬프트에 권장됩니다. 필수 필드가 누락된 양식 또는 예측 가능한 오류(잘못된 이메일, 너무 긴 사용자 이름 등)를 사용자에게 알리는 등의 작업입니다. 🎜
• 🎜Dialog: 이 방법은 알 수 없는 서버측 또는 클라이언트측 오류가 있을 때 권장되며, 더 많은 설명을 표시할 수 있으며 까지 표시할 수 있습니다. 클릭 유도 문구(예: 사용자가 오류를 추적하기 위해 이메일을 입력하도록 허용) 🎜

🎜shared 폴더에 서비스를 추가하여 모든 알림을 처리하고 새 services 폴더를 생성한 후 파일을 생성합니다. notification.service.ts의 경우 코드는 다음과 같습니다. 🎜rrreee🎜error-handler.ts를 업데이트하고 NotificationService를 추가합니다. 🎜rrreee🎜오류가 발생한 경우 구성 요소에 던져지면 멋진 snackbar 메시지를 볼 수 있습니다: 🎜

로그 및 오류 추적

🎜Of 당연히 예상치 못한 일입니다. 사용자는 모든 버그를 보고하고 일단 프로덕션에 배포되면 콘솔 로그를 볼 수 없습니다. 따라서 오류를 기록하고 데이터베이스에 사용자 정의 논리를 작성하거나 Rollbar, Sentry, Bugsnag와 같은 기존 솔루션을 사용할 수 있는 백엔드 서비스가 필요합니다. > 코드>. 🎜🎜다음으로 간단한 오류 추적 서비스를 만들고 logging.service.ts를 만듭니다. 🎜rrreee🎜 error-handler.ts에 서비스를 추가합니다. 🎜rrreee🎜 이 시점에서 , 전체 오류 처리 메커니즘이 도입되었으며 기본적으로 다른 프레임워크나 언어로 개발된 프로젝트를 처리하는 방식과 유사합니다. 🎜

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Angular에서 오류를 처리하는 방법을 이해하는 기사 1개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!