大前端搭建错误日志监控系统实战

群鱼湾A哥_搭子人脉达人
5,436 阅读5分钟

背景

招聘面试的时候，我最喜欢问题前端如何做稳定性保障，也就是如何做线上系系统监控。

  • 如何收集错误（js script error、 promise exception、404资源加载失败信息等)?
  • 如何收集统计接口的成功率？
  • 如何统计页面加载的性能？有哪些关键指标和维度？


对于创业团队来说，很多都不会关心监控。

  • 一是是业务开发本来就繁忙，接入日志监控需开发工作量，哪来时间开搞？
  • 二是日志监控系统它是一个系统，前端埋点、收集日志。后端有接收日志与展示日志的服务。高级的日志监控系统还带有报警与问题自动定位、甚至问题重现与定位功能。很复杂下，自己开发还是接入第三方服务？


作为（或者想成为）开发主管的你，想想你负责的产品，如果没有前端日志监控？

  • 你负责的产品就是在线上裸奔呀！线上出现问题客户已经发起投诉，你还不知道从何查起，无从入手。
  • 用户页面发生异常，如何能远程快速定位问题？错误栈信息在哪里？
  • 你老板说页面怎么那么卡那么慢，加载性能优化，又该从何处下手？
  • 更重要的是，你老板有时会说，这个产品上线，感觉没谱呀。这些你能不能站出来，拍出胸脯说：老板请放心，我们有监控系统666，线上稳定性自有保障！不用担心睡不好觉啦！


无论如何，“If you cannot measure it, you cannot improve it.”(你不能监测的东西,也无从改善。)

image.png

所以基于以上实际生产中的痛点，我们希望有一个前端监控平台。它提供了强大的在线页面监控能力，可以灵活监控业务数据，设置报警，并用可视化图表展示监控数据，助你实时洞察，提升质量和性能。


网上搜前端监控系统搭建会出来一大堆，可选方案如：

  1. 自行可以规划定义一套完善的监控系统。需要人力重新开发。
  1. 如何人力财力充足。建议部署ELK。
  1. 借助/部署第三方服务/插件
  • 阿里ARMS ：是阿里的一个前端数据监控的服务，是收费的。
  • fundebug ：挺完善的前端错误日志服务，也是收费的。
  • BadJS ：腾讯团队的一个开源项目，没看过，应该很不错的
  • webfunny：作者是个人，开源部署，没用过。
  • sentry ：个人项目不收费，企业收费。但是它是github 上面的一个开源项目，支持各端的错误监控


收费的项目/自已从头到尾开发都不是创业公司技术团队的首选。成本就在那里，策略是选取一个开源项目快速，先满足当前业务需求，等业务起色后，如果开源项目不满足后，再想办法升级或迁移到收费项目。

所以，本文将基于 sentry 快速搭建的错误监控系统，包括服务端与客户端的部署（小程序端）


一、搭建 sentry

官网提供了两种部署方式: 1. docker , 2. python 原码部署

这里我使用的是 docker 的方式来安装，比较快捷

服务器环境：CentOS 7.x


1. 用wget安装安装docker

  • 安装wget
$sudo apt-get update 
$ sudo apt-get install wget


  • 安装docker
 $ wget -qO- https://get.docker.com/ | sh
 $ docker --version

通过 docker --version 可以查看版本号并确认是否安装成功。


ps: 由于某种神秘原因国内无法直接从 docker 官方库直接获取镜像 这里我们使用 Docker 加速器 运行下面命令即可。

$ curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://4031ebb7.m.daocloud.io



2、用pip安装 docker-compose

  • 安装pip
$ sudo yum install -y python-pip
  • 安装发现python需要升级
$ python -V
如果是2.x 版本需要升级
$ yum install python3
$ python3 -V
$ cd /usr/bin
#备份原有默认Python路径
$ mv python python.bak
#将 python 链接至 python3
$ ln -s python3 python
$ python -V 
显示是3.x 版本

详情步骤可以参考：www.cnblogs.com/leon-zyl/p/…


  • 安装过程如何发现pip 依赖 不支持python 2.x, 要3.x 所以也要先升级 
$ pip -V
pip 20.0.2 from /usr/lib/python2.7

$ rm /usr/bin/pip 
$ ln -s /usr/local/bin/pip3.8 /usr/bin/pip 
$ pip -V
pip 19.2.3 from /usr/local/lib/python3.8/site-packages/pip (python 3.8)
  • 用pip 安装docker-compose
$ sudo pip install docker-compose
$ docker-compose --version // 查看版本是否安装成功

docker-compose 学习请参考：www.cnblogs.com/minseo/p/11…


3、部署sentry

克隆sentry项目
$ git clone https://github.com/getsentry/onpremise.git
# 执行安装脚本，结束时会询问是否创建初始账号
$  bash install.sh
# 完成后启动容器
$ docker-compose up -d




网上说按上面，可以让我们监控系统的后端服务器已经跑起来了，访问本地的9000端口。

image.png

但我的实际操作过程并没有成功。估计是secret-key没有配置进去。


$ docker-compose run --rm web config generate-secret-key

这里会生成生产密钥：

image.png

  • 网上说要装SENTRY_SECRET_KEY 这个需要添加到 docker-compose.yml 中。但 vi docker-compose.yml 并没有这个KEY, 那应该是 2.0版本的产物。
  • 网上也有说放到 .env 文件中。但vi .env 文件也没有这个KEY

后来查资料发现，需要在docker 服务启动时。


$ SENTRY_IMAGE=getsentry/sentry:10 ./install.sh
$ docker run -d --name sentry-redis redis
$ docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry postgres
$ docker run --rm sentry config generate-secret-key
$ docker run -it --rm -e SENTRY_SECRET_KEY='生成的secret-key密钥串' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade

到这一步会创建账号：


image.png


注意命令行前后不要有多余的空格

$ docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='生成的secret-key密钥串' --link sentry-redis:redis --link sentry-postgres:postgres sentry
$ docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='生成的secret-key密钥串' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
$ docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='生成的secret-key密钥串' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker


至此, sentry 后台服务9000就运行了,用刚才的创建的账号登录即可

image.png


二、sentry 创建项目，获取监控上报配置


image.png


image.png


上面框选的代码便是，前端调用监控API前要配置的。



三、小程序中使用sentry 上报

这里以Taro 为例, 

 $ npm install --save sentry-weapp




src/app.js

import Raven from 'sentry-weapp'


 componentDidMount () {
    const options = {
      environment: 'production', // 指定为production才会上报
      sampleRate: 1, // 100% 上报, 采样 0.1 表示 10%
      debug: true, // 上线可以删除
    }
        
    // 上面在后台的项目生成的上报地址
    Raven.config('http://xxxxxxxxxxxxx@xxxxxxxxxx:9000/2', options).install()
    Taro.Logger = Raven;
 }


测试业务代码里这样写

    Taro.Logger.captureMessage('Hello, world!'));
    // Taro.Sentry = Sentry;
    Taro.Logger.captureException('try to ', {
      level: 'error'
    })
   
    try{
      test() 
    } catch (ex) {
      Taro.Logger.captureException(ex); // 上报异常
    }



后台看，异常已经上报进去了。


image.png



最后。

一个成熟的错误监控系统不止于此，智能监控才是更高阶的应用。后续会继续分享这方面的实践。


喜欢看技术管理类文章，请关注公众号“群鱼湾”，与你一起成长。

image.png


avatar
文章
阅读
粉丝