用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

简介: 第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html

第二部分: http://www.cnblogs.com/cgzl/p/8481825.html

第三部分: https://www.cnblogs.com/cgzl/p/8525541.html

这篇文章将介绍angular 5的全局错误处理.

需要使用到代码: https://pan.baidu.com/s/1F0KjbwVE8_Tzfwy69Alp-A

angular 5 全局错误处理

参考文档: https://angular.io/api/core/ErrorHandler

首先按照文档在客户端项目建立app.error-handler.ts 文件:

import { ErrorHandler } from '@angular/core';

export class AppErrorHandler implements ErrorHandler {
    handleError(error: any): void {
        console.log('ERROR Occurred.');
    }
}

这里, 我们只写log.

然后在app.module里面注册:

providers: [
    TvNetworkService,
    { provide: ErrorHandler, useClass: AppErrorHandler }
  ],

然后把tv-network-list.component.ts里面到一个错误处理删除掉:

然后在后端到Controller里面抛一个异常:

然后我们试一下:

可以看到, 这个全局错误处理器正常到工作了.

先别急, 让我们在errorhandler里面使用toastr试试.

app.error-handler.ts:

import { ErrorHandler } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

export class AppErrorHandler implements ErrorHandler {

    constructor(private toastr: ToastrService) { }

    handleError(error: any): void {
        // console.log('ERROR Occurred.');
        this.toastr.error('发生了错误');
    }
}

 

而这时回到浏览器之后, 发生了错误:

之所以发生这个错误, 是因为AppErrorHandler在angular引入Toastr模块之前就初始化了.

我们可以这样处理:

import { ErrorHandler, Injectable, Injector, Inject } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(private injector: Injector) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    handleError(error: any): void {
        this.toastr.error('发生了错误');
    }
}

使用Injector来手动注入ToastrService.

回到浏览器:

并没有弹出错误信息!!!!, 但是来回切换菜单后, 开始显示错误信息了, 貌似有点迟钝.

这是什么原因呢? 首先, 我们得了解以下这个东西:

Zone

首先到首先, 需要了解以下execution context, 程序执行到上下文, 但是这些东西到定义看了之后可能会让人迷糊. 所以还是先看这段代码吧:

const Zone = {
  run: (callback) => {
    if (this.beforeTask) {
      this.beforeTask();
    }
    callback();
    if (this.afterTask) {
      this.afterTask();
    }
  }
};

Zone.beforeTask = () => {
  console.log('Before Task.');
};
Zone.afterTask = () => {
  console.log('After Task.');
};
Zone.run(() => {
  console.log('Running...');
});

 

就是定义一个Zone, 它到run方法可以执行某个回调函数, 回调函数到前后还可以有一些预定义的函数, 如果它们存在就会被执行. 通过定义这些函数的内容, 我们就可以在执行run的回调前后添加自定义逻辑了.

回到Angular, angular的变化检测(Change Detection)功能就用到了这些东西.

比如angular的一个component有一个click事件, click()方法里更新了某些属性的值, 这个时候angular就需要进行变化检测, 如果真的发生了变化, 那么angular 就会更新dom, 这样我们就能看见页面的变化了. Angular用了这个猴子补丁, 使之运行在Zone里面, 当点击按钮的时候, 这段代码总是在Zone里面执行, 在执行完click处理方法之后, angular会执行变化检测动作.

angular应该是这样来进行猴子补丁的:

const Zone = {
  run: (callback) => {
    if (this.beforeTask) {
      this.beforeTask();
    }
    callback();
    if (this.afterTask) {
      this.afterTask();
    }
  }
};

Zone.beforeTask = () => {
  console.log('Before Task.');
};
Zone.afterTask = () => {
  console.log('After Task.');
};
Zone.run(() => {
  console.log('Running...');
});

var _setTimeout = setTimeout;
setTimeout = (callback, timeout) => {
  Zone.run(() => {
    _setTimeout(callback, timeout);
  });
};
click(() => {
  console.log('设置Timeout');
});

由于这个是异步的, 所以打印到控制台到顺序可能是: Before Task, After Task, 设置Timeout.

js运行时里, 有一个信息队列. 任何时候出现一个异步操作, 队列里就会推进去一条信息, js运行时会训话这个队列, 一个个把消息推出队列, 然后调用这个消息到回调函数. 对于这个例子来说就是setTimeout().

所以就出现了Zone.js这个库.

Zone.js就是一个执行的上下文, 它可以在不同的异步操作之间进行持久性传递.

Angular就使用了这个库, 在它之上建立了ngZone这个模块. 就这样angular在发生异步操作后进行到了变化检测.

浏览器里面主要有这几种异步操作: dom事件, ajax请求, 定时回调之类的.

回到项目里的app.error-handler.ts:

这句话呢就跑出了angular zone的范围...

所以当错误发生的时候, toastr的error方法被调用了(状态改变了), 但是angular并不知道这个变化, 所以toastr通知没有显示.

那如何解决呢?

使用ngZone:

import { ErrorHandler, Injectable, Injector, Inject, NgZone } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(
        private injector: Injector,
        private ngZone: NgZone
    ) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    handleError(error: any): void {
        this.ngZone.run(() => {
            this.toastr.error('发生了错误');
        });
    }
}

下面试试页面:

这次没有任何问题了.

Logging Errors 记录错误 

您可以自己写一个后台api来记录日志, 但是这里我介绍一个专门做logging的云服务, sentry.iohttps://sentry.io/

首先请您自己注册账户. 

然后创建一个项目, 选择angular:

然后点击下面按钮Create Project.

然后它给出了安装和配置的说明:

首先执行命令安装.

然后, 配置:

import * as Raven from 'raven-js';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';

Raven
  .config('https://fa66d9390ab04c7f8e8c82ad0613fb4e@sentry.io/301095')
  .install();

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

按照说明进行配置, 我们做一些调整, 这里红色部分是每个用户都不一样都.

最后修改app.error-handler.ts:

import { ErrorHandler, Injectable, Injector, Inject, NgZone } from '@angular/core';
import { ToastrService, Toast } from 'ngx-toastr';
import * as Raven from 'raven-js';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

    constructor(
        private injector: Injector,
        private ngZone: NgZone
    ) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    handleError(error: any): void {
        Raven.captureException(error);
        this.ngZone.run(() => {
            this.toastr.error('发生了错误');
        });
    }
}

回到浏览器的错误页面, 触发错误后, 大约几分钟后, 来到sentry.io网站查看:

 

今天先写到这, 明天后天写以下 angular5上传文件到asp.net core web api.

下面是我的关于ASP.NET Core Web API相关技术的公众号--草根专栏:

目录
相关文章
|
4天前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9,此版本与 .NET 8 的 OData 库保持一致,改进了数据编码以符合 OData 规范,并放弃了对旧版 .NET Framework 的支持,仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`,优化了内存使用和序列化速度。
|
14天前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器,可在操作方法执行前后运行代码,适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法,可以统一处理日志、验证及异常。创建并注册自定义筛选器类,能提升代码的可维护性和复用性。
|
14天前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core,一个轻量级、开源的跨平台框架,专为构建高性能Web应用设计。通过简单步骤,你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题,并提供了实用示例代码以助于理解与避免错误,帮助开发者更好地掌握ASP.NET Core的核心概念。
36 3
|
17天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
|
19天前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
16天前
|
C#
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
2天前
|
Cloud Native API C#
.NET云原生应用实践(一):从搭建项目框架结构开始
.NET云原生应用实践(一):从搭建项目框架结构开始
|
Web App开发 .NET API
用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.
1531 0
|
5月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
70 0
|
5月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
237 0