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

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

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

  这是搭建前端监控系统的第二章,主要是讲如何对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错误监控篇

上一篇:Context3D 不可用


下一篇:[Luogu P2296][NOIP 2014]寻找道路