您现在的位置是:首页 > 文章详情

基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

日期:2018-12-03点击:418

背景

 

在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视。

所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测、QA测试、code review 等,以确保

应用能在生产上没有事故。

但是事以愿违,很多时候我们都会接受的客户的一些线上问题,这些问题有时候可能你是自己开发的原因本身存

在的问题,这样的问题一般能够在测试环境重现,我们很快的能定位到问题关键位置。但是,很多时候有一些问题,

我们在测试中并未发现,可是在线上却有部分人出现了,问题确确实实存在的,这个时候我们测试环境又不能重现,

还有一些偶现的生产的偶现问题,这些都是难以定位到问题的原因,让我们前端工程师头疼不已。

这时候,我们不得不借助一些功能来解决这一些列的头疼问题。

 

前端错误监控日志系统

当前端代码在生产运行中出现错误的时候,第一时间传递给监控系统,从而第一时间定位并且解决问题。

保证前端代码的稳定和安全,是项目可以健康的运行。

 

监控系统搭建方案

 

1、自行可以规划定义一套完善的监控系统。需要人力重新开发

2、借助第三方插件( 阿里ARMS、fundebug、BadJS,sentry 等 )

阿里ARMS :是阿里的一个前端数据监控的服务,似乎是收费的

fundebug :挺完善的前端错误日志服务,也是收费的

BadJS :腾讯团队的一个开源项目,没看过,应该很不错的

sentry :github 上面的一个开源项目,支持各端的错误监控 ( 本文就是基于 sentry 搭建的错误监控系统 )

 

系统的搭建与使用

 

sentry 简介

sentry 是一个开源的实时错误监控的项目,它支持很多端的配置,包括 web 前端、服务器端、移动端及其游戏端。

支持各种语言,例如 python、oc、java、node、javascript 等。也可以应用到各种不同的框架上面,如前端框架中的

vue 、angular 、react 等最流行的前端框架。

提供了github、slack、trello 的常见的开发工具的集成。可以自己安装并且搭建 sentry 应用。

 

支持的语言:

 

 

sentry 的部署

官网提供了两种部署方案:

docker

python

docker 是我第一次使用,看了下文档,感觉挺容易明白。

在这里为了操作方便考虑,我们选择使用docker来部署搭建 sentry。

这种方法的话需要安装 docker 和 docker - compose 。

 

1、docker 的部署 (mac版)

安装的话,可以直接去看看 docker 安装文档

docker 安装

mac 版的安装,docker-compose 已经一起安装好了。

 

2、部署 sentry

获取 sentry 代码

从 github 上面可以获取到最新的 sentry 代码

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

获取到本地之后,进入项目的目录。

按照项目的 readme.md 开始依照步骤搭建。

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

这里是生产密钥,SENTRY_SECRET_KEY 这个需要添加到 docker-compose.yml 中。

最后一步:

1
docker-compose up -d

至此,我们监控系统的后端服务器已经跑起来了,访问本地的9000端口。

使用中途创建的 邮箱和密码登陆 我们的服务后端。

 

 

3、创建项目

登陆后我们会进入我们的监控项目的界面,如:

 

点击右上角的  add new project ,我们可以创建一个新的项目

这里可以选择项目的配置,语言以及框架,选择自己的项目类型

输入项目名称,点击 create project 。确定创建新项目。

 

 

  点击红框框的,创建一个简单的日志。

 

  错误信息页面,可以自行到官网上面去了解更多信息。

 

 

4、前端部署,注入监控代码 

获取项目的链接:

在项目的首页点击 install 会进入当前图示页面

我们复制 sentry DSN 到我们前端配置中

 

引用 sentry ,注入配置到我们的应用中:

 

 

  这里是以 react 为例,我们在 react 的根组建的 componentDidCatch 上面捕获错误,并且上传到我们监控系统中。

这里的我们用 sentry DSN 配置我们的 sentry 并且初始化 sentry 项目。

 

到这里我们基本,已经完成了我们的前端错误监控日志系统了。

 

 

sentry 操作界面介绍

 

项目操作页面:

 

1、项目的查看选项

Issue : 问题列表

overview : 概况纵览

userfeedback : 用户反馈

Resleases : 版本列表信息

setting : 项目设置

 

2、问题筛选

包括 : 指派自己的 、 标记列表 、需要分类的 、 今天的 、 未处理的

 

 

  设置为 解决 、 忽略 、 合并 、标记 、实时监控

 

 

 

 

 

 

sentry 的api介绍和使用

1、javascript SDK 引用与配置

 

现在有两种方法引用 sentry SDK :

 

直接引用:

最快的方法就是通过 script 标签引用我们的 sdk 

1
<script src= "https://browser.sentry-cdn.com/4.4.1/bundle.min.js"  crossorigin= "anonymous" ></script>

然后就是配置了。

1
Sentry.init({ dsn:  'https://<key>@sentry.io/<project>' 
原文链接:https://yq.aliyun.com/articles/674922
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章