ITPub博客

首页 > 云计算 > 开源云工具 > 搭建前端错误监控系统

搭建前端错误监控系统

原创 开源云工具 作者:java06051515 时间:2018-11-29 12:54:12 0 删除 编辑

当我们完成一个业务系统的上线时,总是要观察线上的运行情况,查看日志发现问题并进行优化迭代。

因为测试永远无法做到100%覆盖,用户也不会总是按照我们所预期的进行操作,因此我们需要在系统异常时主动对其进行收集上报,以制定解决方案。

当生产环境中产生了一个 bug 时,如何做到迅速报警,找到问题原因,修复后又如何在线上验证?此时我们需要一个高效的错误监控系统。

一、前端错误监控

后端有各种强大的监控服务,给我们的应用稳定性保驾护航,然而大多数情况只能记录接口被请求之后所发生的错误。随着 Web 应用越来越强大,客户端的代码可就越来越复杂,很多不可预期错误发生在用户端,因此前端错误监控就不可或缺了。

二、Why Sentry

我们需要一个成熟的监控系统,Sentry 就是一个这样的工具。

Sentry – 正如其名「哨兵」,可以实时监控生产环境上的系统运行状态,一旦发生异常会第一时间把报错的路由路径、错误所在文件等详细信息以邮件形式通知我们,并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。

选择 Sentry 作为前端监控系统,还因为下几点:

  • 开源

  • 对各种前端框架的友好支持 (Vue、React、Angular)

  • 支持 SourceMap


Sentry 官方提供的免费服务有次数限制,达到一定限制后继续使用就需要收费了,但是我们可以利用 Sentry 的开源库在自己的服务器上搭建服务,官方已经提供了完善的操作文档。

三、准备工作

Sentry 的搭建方式主要有两种:

由于 Docker 更加方便易控,而且官方推荐的也是 Docker 部署,那下面就以 Docker 为例,在滴滴云的服务器上从零开始搭建一个 Sentry 服务,本示例中使用的服务器配置 1核CPU,2G 内存,操作系统 CentOs 7.4。

注意事项

  • 服务器的内存至少 2G,否则在执行 " sentry upgrade "  命令时会出现问题。

  • 以下所有命令在 " sudo "  权限下执行,否则 Docker 无法运行

安装 Docker

   $   yum install  docker  - y

 

安装 Docker-Compose

  $   pip install  docker - compose

启动 Docker

  $   systemctl start  docker

四、开始搭建

1. 拉取 sentry-onpremise 仓库

Onpremise 是官方提供的包含了使用 Docker 部署 Sentry 所需依赖的引导程序。

  $   git  clone   https : //github.com/getsentry/onpremise.git

2. 创建服务端服务

如果执行过程中一切正常的话,在浏览器中输入 http://ip:9000 就进入 Sentry 的登录页面了,使用上面创建的管理员用户名和密码登录系统。


集成客户端 SDK

经过以上步骤我们 Sentry 服务端完成了,接下来就可以在应用中集成 Sentry 客户端 SDK,用来在前端代码中实时上报错误。

登录系统后首先会进入配置页面,简单配置一下:

  • Root URL: 绑定本 Sentry 服务的域名或者直接填写本服务的 IP

  • Admin Email: 系统管理员的邮件地址

配置好后,进入添加新项目界面,以 Vue 应用为例,点击 New Project 创建新项目,选择 Vue。创建成功后,按照指引可以看到Sentry 推荐使用 Raven.js 及其 Vue 插件,在我们的前端项目中引入监控的模块,注意监控模块要在 Vue 之后引入。

  $   npm install  raven - js

 

五、验证

到这里整个错误监控系统算是成型了,我们可以制造点错误,来验证一下功能是否符合预期。可以直接在前端程序代码里写点 bug,触发之后可以在前端调试工具的 network 中看到上报错误的网络请求,同时在 Sentry Dashboard 会发现这个错误,查看详情可以看到这个错误的详细信息了。

六、关联 SourceMap

目前大多数前端程序基本都会使用 Webpack 之类的工具构建,上线之后的代码都是经过压缩混淆的,所以这样的报错信息其实意义不大,错误位置根本无从定位,异常堆栈也难以理解,排查非常耗时费力,此时就要使用 SourceMap 对错误进行定位了,而 Sentry 也正对此有很好的支持。

使用 sentry-cli

查看官方文档对引入 SourceMaps 的 说明 ,可以看到有两种方式来上传 SourceMap 文件:

  • sentry-webpack-plugin: Sentry 提供的 Webpack 插件,灵活性不高

  • sentry-cli: 灵活性比较高,可以针对不同项目进行单独的配置

下面以 sentry-cli 的方式为例,看一下具体流程。

  1. 安装 sentry-cli

      $   npm install  sentry - cli - binary  - g

  2. 生成 token

    在 Sentry Dashboard 页面选择 API,生成 token,注意要勾选 project:write,开启项目的写权限。

  1. 登录 cli

      $   sentry - cli  login

  2. 执行后输入上生成的 token

关于 Relese 控制

说到上传 SourceMap 就要提一下 Release。在平时开发过程中我们希望不监控开发环境下的异常,也有区分测试环境和生产环境异常的需求,此时就需要 Release 将异常进行版本控制。

  • 创建 Release

      $   sentry - cli  releases  - o   组织名称  - p   项目名称   new   版本号

  • 组织名称、项目名称可以在 Sentry Dashboard 中查看,同时可以在 “Releases” 中查看是否创建成功。这样一来,通过生成不同的版本号,我们可以对异常进行分类。

  • 本地应用 Release
    回到前端项目,在 Raven config 中添加对应的 Release,并指定版本号,每次上报的异常就会被分类到该版本下。


  • 删除 Release
    在删除 Release 时需要将其下的异常处理掉,并将该版本的 SourceMap 文件清空,否则会报错

      $   sentry - cli  releases  - o   组织名称  - p   项目名称   delete   版本号

上传 SourceMap

以上概念了解之后,就可以开始上传 SourceMap 文件了。

  sentry - cli  releases  - o   组织名称  - p   项目名称   files   版本号   upload - sourcemaps  -- url - prefix   线上 js 文件所在目录

 


注意:

  • 通常来说  vendor.js  这种各种类库打包后生成的代码,并不是我们程序的源代码,不需要上传

  • --url-prefix  对应的是线上JS文件的目录,例如  ~/static/js/ ,其中 ~/ 代表网站根目录

SourceMap 上传成功后,就可以在 Sentry 上直接看到报错所在的源码了。

七、主动捕获错误

现在我们已经能成功监控程序中的大多数错误,但是无法捕获异步错误(比如定时器、接口请求错误)此时可以利用 raven.caputureException( ) 进行主动上报。

八、邮箱设置

完成上面的所有步骤,我们的 Sentry 可以使用了,但是还有一个问题,上报错误时并没有收到邮件,作为一个自动化的异常提醒工具,没有了提醒功能,它价值就打大打折扣了。

在搭建好的 Sentry 的 Web 页面中无法配置邮箱 smtp 信息,需要修改配置文件 config.yml。

然后修改 docker-compose.yml,为其中的 Web 容器添加 volumes 卷,使刚才修改的 config.yml 配置文件生效。

然后重启服务

  $   docker - compose  up

测试一下,去触发一个错误,应该可以正常接收邮件了。


九、搭建过程中可能出现的错误

  $   docker - compose  run  -- rm web  upgrade

在执行上面的命令过程中,可能会出现创建数据库失败、跳过了创建管理员账号步骤等错误,导致 Web页面无法使用。首先检查服务器的硬件配置,内存是否满足要求 (2G 以上),否则大概率就是数据库初始化时出错,此时可以手动初始化数据可以及创建管理员用户。

  1. 进入 sentry-web 的 shell

  $   docker - compose  run   -- rm  web  shell

  1. 初始化数据

  1. 退出 sentry-web 的 shell,手动创建用户

  $   docker - compose  run  -- rm web  createuser

刷新网页就可以使用刚刚创建好的账户登录。


参考文章


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31559758/viewspace-2221856/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2018-10-26

  • 博文量
    134
  • 访问量
    103166