网页前端监控系统（错误日志，接口监控）的使用

网页前端监控系统（错误日志，接口监控）的使用

 开门见山地说当程序员开发网页达到一定的量级，用户的数量达到一个比较庞大的数量时，总会遇见一些怎么测试都无法复现的bug，但是用户操作的时候却能屡次碰到，每每遇到这种时候，相信各位总是懊恼不已，防不胜防。那么俗话说方法总比困难多，自己做的程序还治不了它了？此时我们就需要一个能有效监测网页问题的系统帮我们远程定位问题，不止于在用户反馈的时候摸不着头脑。

 那么一个好的前端监控系统需要给我们提供什么呢，网页崩溃的原因，用户操作的时间，用户操作出问题前操作了什么，是哪里的用户操作的问题等等，对于我们来说信息越多自然越安心。那么如果要自己做一个这样的监控系统费时费力（大佬的话请忽略这句话），市面上也有成熟的网页监控系统，有的收钱，有的免费。如果是市面上成熟的系统的话，我推荐Fundebug这个平台，它的交互体验是比较好的，错误的分析也很到位，能很轻松地定位到问题。下图是我自己使用的一个例子。

 它的使用只需要去它官网注册账号，然后将它提供的key放在项目的全局中去使用就可以了，项目的官网地址如下：
Fundebug

 但是但是，这个第三方平台虽然好用且免费，但有个最最重要的局限性问题——它是第三方平台！你项目中的错误日志都会发到它的数据库里去，你把这点给你的领导一说，看看有几个领导敢冒着数据泄露的风险给你用。当然它有很多合作的大公司，相信不会这么砸自己招牌，但你领导不听，就觉得不安全你咋办。你就想有没有一个其他平台能给我提供私有化部署，能让我用自己的数据库来保存这些错误日志，那如果有这样的需求的话，我就有另外一个推荐了——Webfunny。和前面的Fundebug一样，它也是可视化的一个前端监控平台，但在数据展示和收集的多样性上确实没有前者多样，但它最重要的一个特点是——它支持私有化部署！
 先放上它的官网地址让大家先去了解下。
Webfunny
 它界面展示的图片在下图：

 其实我个人相比较而言Fundebug的界面会比Webfunny的界面更简洁清晰，后者的主要特点就在于私有化部署，它部署方式为：

1. 下载(clone)最新部署包，初始化

1.本地克隆代码$：git clone https://github.com/a597873885/webfunny_monitor.git

使用码云仓库$：git clone
https://gitee.com/webfunnyMonitor/webfunny_monitor.git（github网络不稳定，可以使用码云地址）

2.在项目根目录下执行初始化命令和安装命令$：npm run init && npm install

3.确认是否安装了pm2，如果没有安装pm2，请执行安装命令$：npm install pm2 -g

2. 配置数据库(Mysql)连接

1. 安装 Mysql 数据库

2. 创建数据库 数据库名称：webfunny_db。 字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin

3. 数据库连接配置 进入webfunny_monitor/bin/mysqlConfig.js文件中

module.exports = {
write: {
ip: ‘xxx.xxx.xxx.xxx’, // 远程ip地址
port: ‘3306’, // 端口号
dataBaseName: ‘webfunny_db’, // 数据库名
userName: ‘root’, // 用户名
password: ‘123456’ // 密码
}
}

3. 本地部署运行

1. 此时此刻，本地配置已经完成了，尝试运行命令$:npmrunprd如果提示报错：Scriptalreadylaunched，说明程序已经运行了，请使用$: npm run restart

2. 打开浏览器，访问地址：http://localhost:8010/webfunny/register.html?type=1
   (初始化管理员账号，并登录)

3. 创建新项目后，可以看到探针部署教程，完成部署。

 部署大概流程就是这样，它也支持docker部署，具体的文档在下面的链接：
Webfunny文档介绍

 部署完数据库后就需要在前端加入探针使得程序受监控。

 详细方式在下面链接：
Webfunny安装探针

 总结：本文介绍了两种网页前端的监控系统，它们都可以监控前端的错误日志，接口监控等等，两者各有优劣。Fundebug的体验和效果更好，唯一不足的就是数据库是在第三方平台上。Webfunny最大的优势就在于可以私有化部署，监控的界面虽然不如前者，但是也足够用了。各位可以根据自己实际需要来需要相应的平台，有兴趣的可以两者都体验下。希望这篇文章能帮到大家，有帮助的话麻烦点个星星谢谢！