Angular 5接入Fundebug日志监控

最近从移动开发转到使用Angular 5开发网页应用，在移动端我们都会使用友盟或则bugly做错误日志监控，所以转到网页应用之后，自然而然也考虑要给应用配上错误日志监控。

在知乎上看到了Fundebug，于是接入试用了一下。总得来说，还是很不错的。基本的报错堆栈信息都有，而且还附带记录了网络请求，用户点击等等。对于排错，可以说非常方便。

最值得点赞的是Fundebug对前端监控做得很完善，各大主流框架都有对应的接入支持。Angular 5是Angular 4的升级版，于是按照Angular 4的接入步骤来就可以了。这个不得不说是Angular的问题，版本更新太快，几年之内把版本已经从2升级到6了。

cli-quickstart

为了给大家演示如何使用，我从Angular的官网下载了cli-quickstart。(点击下载cli-quickstart)

下载解压后，进入cli-quickstart目录，使用npm install安装依赖模块。

如果你之前没有安装Angular CLI，那么需要在全局安装。使用npm install -g @angular/cli安装即可。

运行npm run start，项目就跑起来了。

接入Fundebug

在Fundebug官网创建团队后，新建一个Angular 4的项目，然后会有详细的接入指导。

推荐使用npm安装，毕竟现在都使用模块化管理了，用script引入让代码太分散。

要注意：定义FundebugErrorHandler一定要在@NgModule引用它之前。

我之前将定义放在了@NgModule后面，然后自动编译并没有报错，但是项目已经挂了，进入了白屏界面。我用ctrl+c关掉当前的命令，然后再次运行npm run start，就会发现编译失败：ERROR in Error: No NgModule metadata found for 'AppModule'.。

测试接入效果

在app.component.ts中，稍加修改，故意将substr拼写成subStr造一个错：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!'.subStr(0, 20);
}

立马就收到了报错，

点击查看详细报错信息：

Fundebug的错误日志插件除了可以监控JS错误外，还可以记录资源加载错误，也就是说图片、css、js等静态资源加载失败也会记录下来；另外，前端向服务端发送的HTTP请求，如果报错也会记录。

其实，Fundebug还提供了很多个性化配置，在此我就不详细一个一个介绍了。可以配置应用版本号，配置用户信息方便之后找用户主动反馈，以及配置metaData来记录更多的信息等等。

第三方报警支持

我们已经习惯使用团队聊天工具来进行团队协作，如果报警能够发送到团队聊天工具那就太棒了！Fundebug支持钉钉、Slack、倍洽、简聊、Worktile等配置机器人报警。可惜我们用的是企业微信，无法支持。