建设教育局官方网站未来网络营销的发展趋势
1.前言
目前我主要负责的是公司的营销活动类项目，基本都是直接面向用户端的，并且JS也没有如后端一样有完善的日志系统，因此线上的各种bug都非常难以迅速定位。在加入错误日志收集前，每次报告bug都要劳烦用户协助开发人员进行bug定位，这一方面对用户极不友好，同时也加大了Bug定位的难度；因此我们需要一个工具来帮我们收集错误信息，如接口报错，dom报错以及语法错误等等。下面我就介绍一下sentry这个工具如何在项目中使用。
2.sentry介绍
Sentry 是一个实时事件日志记录和汇集的平台。其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈。它分为客户端和服务端，客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web页方便查看。Sentry由python编写，源码开放，性能卓越，易于扩展，目前著名的用户有Disqus, Path, mozilla, Pinterest等。
3.如何在项目中使用sentry
3.1 安装
为了在vue项目中使用sentry,你需要同时使用Raven.js(Senrty的浏览器JsSDK)和Raven.js Vue插件。Raven.js将自动报告所有未被捕获的异常，进一步了解Raven.js的用请参考Raven.js。Raven.js Vue插件将会自动捕捉抛出错误的活动组件状态以及名称。
使用npm安装:
npm install raven-js --save
然后在main.js里同时引入raven.js和Raven.js Vue plugin
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';Raven.config('https://08dc77f2b5dd42e490be150ad705ddd@sentry.io/123456').addPlugin(RavenVue, Vue).install()
3.2 在sentry上新建自己的项目
在Sentry上新建一个账号，再新建一个组织，一个组织可以邀请多人参与到其中来。然后创建一个新的项目，选中JavaScript项目。左下角填写项目名然后创建项目。
QQ20180207-104024.png
创建完成之后，我们得到了一个Sentry DSN(在初始化的时候会用到),然后将得到的Sentry DSN替换到上面config里的内容。至此，sentry就完成了与项目的整合，之后就可以捕获异常并发送到sentry，我们可以在sentry监控web页(https://sentry.io/组织名/项目名/)看到具体的异常信息。
QQ20180207-104253.png
3.3 关于DSN
在Sentry完成一个项目的设置后，您将获得一个我们称之为DSN或数据源名称的值.它看起来很像一个标准的URL，但它实际上只是Sentry SDK所需的配置的标识.它由几个部分组成，包括协议，公共密钥和密钥，服务器地址和项目标识符。
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
它由5部分组成：
1. 使用的协议: http或https;
2. 验证sdk的公钥和密钥;
3. 目标sentry服务器;
4. 验证用户绑定的项目id.
生成好DSN后，将其塞入到初始化的配置中：
import Raven from 'raven-js'
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd:38dded13008c4afca16c650854b73ce0@sentry.io/272180')
3.4 如何使用
1.最简单的方式是主动触发：
try {doSomething(a[0])
} catch(e) {Raven.captureException(e)
}
- window.onerror捕捉异常
window.onerror = function (e) {Raven.captureException(e)
}
- 在vue里可以使用Vue.config.errorHandler 钩子来捕捉
Vue.config.errorHandler = (err, vm, info) => {Raven.captureException(err)
}
4.对于接口报错，可以在全局拦截里实现
request.interceptors.response.use(null, error => {axiosHelper.error(error)Raven.captureException(error)return Promise.reject(error)})
4.使用过程中可能遇到的问题
- 采集到的信息不全，没有我们想要的用户信息，如用户guid和phone
解决方案：文档里有提供方法setUserContext(),顾名思义该方法是设置全局上下文，因此我们可以在拿到用户信息后执行一次该方法。
request.interceptors.response.use(null, error => {axiosHelper.error(error)Raven.setUserContext({phone: token.Phone || '',guid: token.CustomerGuid || ''})Raven.captureException(error)return Promise.reject(error)})
2.当异常信息过多时，在监控后台没有有效的筛选条件，导致我要看指定的异常信息什么困难
解决方案：查询文档发现有新增标签的方法，标签可以帮助我们来筛选异常信息。
Raven.setTagsContext({phone: token.Phone || '未登录'
})
3.由于线上的代码都是压缩过的，所以报错时很难定位到具体的哪一行代码出错。
解决方案： 上传sourcemap,sentry会自动匹配源码(上传sourcemap文档)。
官方提供了几种上传sourcemap的方法，具体请查看文档。
我选择的是手动上传的方式，通过官方提供的工具sentry-cli,首先生成一个版本号并在sentry初始化的时候配置版本号：
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd@sentry.io/272180', {autoBreadcrumbs: {xhr: true,console: true},release: 'first'
}).addPlugin(RavenVue, Vue).install()
然后通过sentry-cli将*.map.js文件上传至sentry服务器，之后就可以在监控平台看到具体的错误了。
5.搭建自己的sentry服务
由于官方提供的免费服务有一定次数的限制，达到一定限制后想要再使用就需要收费了，但是sentry是开源项目所以我们可以在本地搭建自己的服务，官方页提供了具体的操作步骤。
Sentry的搭建主要有两种
- 通过Python安装 官方教程链接
- 通过Docker容器安装.教程地址
官方的推荐是使用Docker来进行部署.在实际生产中,docker更为简洁易控.下面我们就来讲讲docker部署本地Sentry的步骤
1.安装docker
本人使用的mac系统。直接从Docker官网下载。 官方下载地址
QQ20180209-135348@2x.png
可以看到docker和docker-compose 已经在运行了。
2.搭建服务
首先从github上拉去sentry的docker配置文件
git clone https://github.com/getsentry/onpremise.git
接着通过命令生成密钥
docker-compose run --rm web config generate-secret-key
QQ20180209-135653@2x.png
红线画出的就是生成好的密钥，然后将其复制到docker-compose.yml文件中：
QQ20180209-140417@2x.png
注意将前面的注释'#'号去掉。
然后更新配置，创建管理员用户：
docker-compose run --rm web upgrade
过程中会让我们填写邮箱和密码
然后再修改docker-compose.yml 文件，为其中的web容器添加volumes卷.让配置文件生效。
QQ20180209-140749@2x.png
最后，开启所用容器：
docker-comose up -d
至此大功告成！此时访问http://localhost:9000即可登录本地监控平台。
后续操作如前文提到的一致。
6.总结
sentry是一款非常强大的工具，除了上面介绍的基本功能外，捕获到错误信息后还会以邮件的方式告知，除此之外它还可以与github,jira等进行整合达到令人意向不到的效果。它也提供了强大api供开发者来完善更加详细的错误采集，并以图表的形式展现数据，帮助开发者更好的分析问题。
总之在项目中使用sentry之后，能快速的定位问题所在，知道问题所在之后解决起来也是什么方便的。
作者：max_wwwwww
链接：https://www.jianshu.com/p/66e00077fac3