Angular项目接入Fundebug监控

Angular项目接入Fundebug

最近在公司内部的Angular项目中接入了Fundebug监控，用于线上bug实时追踪。在此，跟大家分享一下相关内容，希望大家喜欢。

Fundebug简介

Fundebug的口号是不放过每一个BUG，它提供全栈JavaScript错误监控。其实，简单理解就是所有跟JavaScript相关的监控，包括各种前端框架(Angular, Vue,js, React)，Node.js，微信小程序。

因为我们使用Angular(Angular 5)框架，本文介绍接入Angular的大概使用方法。

接入方法

• 首先需要创建一个账号

  创建账号页面使用极验验证，蛮好玩的一个东西。

• 账号创建后会立马跳转到创建项目的界面。可以看到，支持好几个版本的Angular，所以千万不要选错了。

• 之后会有详细的接入代码，只要复制黏贴就可以了

  推荐使用npm安装！

  如果不清楚，还可以直接点击右下角的对话图标，客服的解答都很专业。

报错测试

当代码都接入好以后，就可以测试啦。在项目的控制台输入测试命令：
fundebug.notify("Test", "Hello, Fundebug!");

很快就收到了报警邮件：

点击查看详情，就可以看到详细的报错信息啦。浏览器和操作系统的信息都会分析并展示出来。有时候某些错误只会在特定的安卓版本上出现，那么有这样的信息，对于帮助分析解BUG是很有用的。

而用户行为也可以称得上是一项黑科技，它记录了出错前的用户行为、网络请求、控制台输出。这个对于更好的理解用户的操作流程，复现BUG非常有帮助。因为往往Debug的时间都是花在了分析为什么会出现这个bug，理解了用户的使用场景，才可以更好的搞清楚bug成因。

自定义报警规则

如果每一次出错都报警的话，那将是一件很恐怖的事情。想象一下一个错误出一百万次，肯定不能发一百万封邮件。不仅邮件系统会挂掉，我们自己也会被搞晕。Fundebug默认配置了报警规则来避免这一情况的出现。而我特别喜欢的一个功能则是可以自定义报警规则。相比于默认的根据同一个错误出现多少次报警，我更喜欢同一个错误影响多少用户。

如果只有一个用户遇到，我大概会看一看，不重要的就暂时不管它。但是如果有5个用户遇到同一个错误，就会很重视了。所以我把前面的报错设置的比较频繁，保证能够及时去发现严重问题。

结语

大致就介绍这么多吧，如果想了解更详细的信息，可以去他们官网。

参考：

1. Fundebug:不放过每一个BUG