在不依赖后端框架的情况下记录Angular应用程序中的选项时出错

在不依赖后端RestAPI调用/框架的情况下，在Angular应用程序中记录错误的可能方法有哪些？在我的情况下，作为一名UI开发人员，我不想依赖后端团队来捕获和记录错误。相反，我想知道登录用户界面的可能方式。

使用拦截器进行错误处理

import {
 HttpEvent,
 HttpInterceptor,
 HttpHandler,
 HttpRequest,
 HttpResponse,
 HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { ToastrService } from "ngx-toastr";
import { Router } from "@angular/router";

export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private toastr: ToastrService, private router: Router) {}
 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   return next.handle(request)
     .pipe(
       retry(1),
       catchError((error: HttpErrorResponse) => {
         if (error instanceof HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
        console.log("Error Event");
      } else {
        console.log(
          `error status : ${error.status} ${JSON.stringify(error.error)}`
        );
        switch (error.status) {
          case 401:
            this.router.navigateByUrl("/login");
            break;
          case 403:
            this.router.navigateByUrl("/unauthorized");
            break;
          case 0:
          case 400:
          case 405:
          case 406:
          case 409:
          case 500:
            this.handleAuthError(error);
            break;
        }
      }
    } else {
      console.error("something else happened");
    }

    return throwError(error);
       })
     )
 }
public handleAuthError(error: any) {
    console.log("error ", error);
    let msg = "";
    if (error !== undefined && typeof error === "string") {
      msg = error;
    } else if (error.error !== undefined && typeof error.error === "string") {
      msg = error.error;
    } else if (
      error.error.error !== undefined &&
      typeof error.error.error === "string"
    ) {
      msg = error.error.error;
    } else {
      msg = error.error.error.errors
        ? error.error.error.errors[0].errorMessage
        : "Something went wrong";
    }
    this.toastr.error(msg, "", {
      timeOut: 3000,
      positionClass: "toast-bottom-center",
    });
  }
}

---

如果我正确理解了您的问题，您希望从UI本身记录错误。我想您可以使用ngx logger包之类的东西来完成这种日志记录

另一件要尝试的事情是，您可以在angular应用程序中创建某种日志记录服务，它将记录您遇到的错误。为此，我建议您遵循本文

您还可以尝试创建HTTP拦截器来捕获错误。如果你不知道怎么做，请关注angular大学的博客

最后，我认为最好使用的是sentry.io，它将为您提供性能瓶颈和错误跟踪

providers: [
   {
     provide: HTTP_INTERCEPTORS,
     useClass: HttpErrorInterceptor,
     multi: true
   }
 ]