前端性能监控系统 & 前端数据分析系统

　　怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，接口请求，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 当然，这些问题并非不能克服，让我们来一起看看如何去监控并定位线上的问题吧。

　　背景：市面上的前端监控系统有很多，功能齐全，种类繁多，不管你用或是不用，它都在那里，密密麻麻。往往我需要的功能都在别人家的监控系统里，手动无奈，罢了，怎么才能拥有一个私人定制的前端监控系统呢？做一个自带前端监控系统的前端工程狮是一种怎样的体验呢？

　　这是搭建前端监控系统的第二章，主要是讲如何对js错误进行监控，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。

　　如果感觉有帮助，或者有兴趣，请关注 or Star Me 。

　　============================================================================

　　本文由 www.webfunny.cn 前端监控提供；只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧 ^ _ ^。

　　============================================================================

　　前端监控功能主要包含：  JS错误日志监控分析、静态资源请求报错统计、用户行为检索、接口请求报错统计、HTML加载性能分析、PVUV日志分析

　　 好了，现在开始，按照上边的顺序，一步一步搭建前端监控系统。工欲善其事，必先利其器。一个监控系统开发，需要开发环境，部署环境，以及各种开发工具来提高开发效率，那么就先从部署阿里云服务器来说吧，阿里云服务器的部署过程比较漫长，可能不是一天两天能搞得定的，需要有耐心。进入正题。

一、购买阿里云服务器（本地部署类似）

　　对于之前没有搞过服务器的前端来说，折腾一个能运行的服务器，还真是费了不少周折。

　　服务器类型： 入门级（共享） 2vCPU 4GB内存 带宽2M（个人建议2vCpu 2GB内存足矣）

　　安装运行环境：

1. 系统： Ubuntu 16 64位 硬盘40G （默认）
2. 安装 nvm安装使用教程 , 运行前端项目可能会需要切换node版本，建议提前安装。
3. 安装 PM2安装使用教程, 运行node服务应该都知道这个，它是个node服务进程管理器。
4. 安装 JDK(Java运行环境)，安装tomcat, 并配置环境变量，这个网上教程一大堆。
5. 安装 Jenkins安装教程，下载 Jenkins 的war包，在tomcat下运行， 搭建自动化部署系统。 工欲善其事必先利其器，因为会频繁的发布版本，所以这个建议先安装好。
6. 安装 Mysql数据库安装教程， 存储数据日志，用于以后的分析。
7. 安装 Nginx安装教程，nginx服务器用来做转发，反向代理，以及跨域处理等等。

二、阿里云购买域名

　　购买阿里云服务器之后，就获得了这个服务器对外的公网IP，通过这个IP和端口，我们就可以访问这台服务器上的服务。 可是无论上传还是访问，总是通过ip有点太不专业了，为了安全，而且很多网站是禁止ip直接访问的，所以，我们需要有一个域名。

　　申请域名：

　　这个在阿里云上操作很简单，当然越好的域名就越贵。这里边有一点需要注意，以后有可能给这个域名购买https证书，阿里云上的审核比较严格，有些是无法审核通过的，所以可以先尝试买一个简单的，测试一下，省得花冤枉钱。

　　域名需要经过购买，备案，准备资料，上传资料，审核，一系列步骤之后，才可以真正使用（步骤繁琐，建议要有耐心）。

　　域名审核通过后，配置DNS解析，就可以通过域名访问我们的服务器了。

三、购买CA证书或者说是HTTPS证书

　　现在很多网站都是走HTTPS安全协议，如果我们的服务器不支持安全协议，那么日志是无法被上传到我们的服务器上的。所以我们也需要给我们的服务器配置安全证书。

　　有多种方式获取证书，有免费的，有收费的，我用的是阿里云上免费一年的。

　　PS: https证书可能也需要折腾一些时间，需要有耐心。

　　这样，我们的阿里云服务器部署环境就算搭建完成了，可以开始写前端日志的监控代码了。

　　下一章：搭建前端监控系统（二）JS错误监控篇