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等配置机器人报警。可惜我们用的是企业微信,无法支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值