前言
作为一个前端，你是不是经常遇到这样情况：
客户：为什么我这个页面看不到数据？？
我：（急忙打开网站），我这边数据显示正常！
客户：没有啊！我这边看不到！
我：（语无伦次），可我...我这边正常的呀
客户：BALABALA
相信各位前端经常遇到这样的问题，明明自己本机打开一切正常，到了客户那边问题却一大堆，还根本定位不到问题，总不能叫客户打开 F12 查看控制台看下什么错误吧！因此本文主要介绍如何将 vue 与 sentry 结合，达到实时监控并收集错误日志的效果。
部署Sentry过程
Sentry是一个开源的实时错误报告工具，支持前后端、其他后端语言以及主流框架等。既然是开源，那么我们可以在自己的服务器上搭建，本文记录搭建的过程以及搭建过程中遇到的一些问题，也可以跟着这个教程来搭建一遍
部署环境
Ubuntu 16.04
官网提供了两种部署方式
- docker
- python
这里我使用的是 docker 的方式来安装，比较快捷
先更新下 apt-get包（这个过程可能需要点时间）
apt-get update && apt-get upgrade
1、安装docker
wget -qO- https://get.docker.com/ | sh
// 查看 docker 是否安装成功
docker -v
// Docker version 18.09.5
证明docker安装成功
由于 docker镜像都在国外，因此下载会比较慢，这里用 Docker加速器 运行下面命令即可
curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://4031ebb7.m.daocloud.io
2、安装 pip
执行下面命令安装（注意没有安装 python 的话需要安装）
wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate # 下载文件
python get-pip.py #执行安装
pip -V #查看pip版本
// pip 19.0.3 from /usr/local/lib/python3.5/dist-packages/pip (python 3.5)
3、安装 docker-compose
这里使用 pip 管理工具来安装 docker-compose
sudo pip install docker-compose
docker-compose --version // 查看版本是否安装成功
上述步骤之后就可以着手搭建 sentry
4、 搭建 sentry
首先从github上拉取 sentry，运行
git clone https://github.com/getsentry/onpremise.git
拉取下来后，进入目录 onpremise，可以看到里面有份README.MD，按照这份说明文档步骤安装就行（这份当时拉下来的操作文档，具体有更新的话以拉取下来的最新说明文档为准）
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres- Make our local database and sentry volumes Docker volumes have to be created manually, as they are declared as external to be more durable.cp -n .env.example .env- create env config filedocker-compose build- Build and tag the Docker servicesdocker-compose run --rm web config generate-secret-key- Generate a secret key. Add it to.envasSENTRY_SECRET_KEY.docker-compose run --rm web upgrade- Build the database. Use the interactive prompts to create a user account.docker-compose up -d- Lift all services (detached/background mode).- Access your instance at
localhost:9000!
5、 实践
搭建完成之后打开 localhost:9000 端口，可以看到登录界面，输入上面搭建时候设置的邮箱和密码
注意！！！！
输入账号密码登录之后，会进入一个初始化的界面，要填写 ROOT URL，如果遇到填写完成之后点击保存一直提示 保存错误 的时候，按照下面方法来操作就可以解决
编辑文件 config.yml，添加下面这一段
auth.allow-registration: false
beacon.anonymous: true
mail.from: ""
mail.host: ""
mail.password: ""
mail.port: 465
mail.use-tls: true
mail.username: ""
system.admin-email: ""
system.url-prefix: ""
然后设置下 sentry 的版本，如下命令，CONTAINER 换成你 docker 容器里面 web 的 name，可以使用 docker ps 命令看下，我的是 onpremise_web_1
docker exec CONTAINER sentry config set sentry:version-configured '9.1.0'
执行第一次的时候我情况是报错了，再执行一次就行
这时候刷新下页面，你可能会发现还是停留在了这个初始化设置页面，一般等一两个小时再刷新下就进去了，具体原因我也不清楚，好像是因为 docker 运行缓存问题？
打开进入之后可以点击右上角添加新的项目 add project，选择语言或者框架
6、 遇到问题
按照客户端教程下载相关库之后需要填 DSN ，在项目的 settings 里面找到 DSN 发现是空的并且不能填，然后上网找了下发现 DSN 是由下面格式组成的
http://pubilckey:secretkey@localhost:9000/<project>
按照这个格式填写到客户端的 DSN 之后尝试下触发错误，可以看到界面会显示具体的错误详细信息
7、 小结
搭建完后按照教程集成到 vue 和 flask 中，发现效果还不错，触发错误后可以看到具体的错误详细信息，具体到哪一行，触发这个错误的终端的详细信息，但 vue 目前大部分是混淆压缩过的，因此得上传 sourcemap 才可以看到具体错误在那个组件。
Vue与Sentry初步结合
搭建好 Sentry 后，点击创建项目，选 Browser -> Vue，创建完成后，可以按照里面的提示或者 官网 的教程来操作，步骤如下：
// 安装官方提供的库
yarn add @sentry/browser
yarn add @sentry/integrations
在 main.js 文件里面添加下面一段代码
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
Sentry.init({
dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
]
})
添加完毕后，我们 npm run dev 来看下吧，随便在某个组件地方制造一个错误
然后让我们来打开看下有没有收集到这个错误日志，成功的话应该像如下图片
表明我们刚才触发的错误已经被 sentry 成功捕获到了，可以点击进去查看详情
可以看到错误了 this.aa is not a function，这样我们已经初步成功的将 vue 和 sentry 结合上了
Sourcemap结合
上面我们已经成功的在 vue 中集成了 sentry 并捕获到了错误，但是不是发现了一个问题，虽然知道错误内容，可是我们不知道具体在哪个组件的哪一行。这是因为用 webpack 打包过程中会将js文件进行压缩混淆等，因此要准确定位到错误，需要我们将 sourcemap 也上传一份供 sentry 解析，这里提供了两种方式，可以在 官网 中查看资料
sentry-cli
@sentry/webpack-plugin
这里我选择 sentry-cli 来完成，@sentry/webpack-plugin 主要是用来webpack打包时候同时上传一份 sourcemap 到 sentry
全局安装 @sentry/cli
npm i -g @sentry/cli
安装完毕后，进入网站生成 auth token，具体步骤如下：
点击 账号->API keys，点击 Create New Token
按照下图，记得 project:releases 和 project:write 要勾选上
生成完成 token 后可以进行下一步，进入项目的根目录，执行
sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login
这里因为我们上面已经成功生成了 auth token，所以输入 n 后会提示你输入刚才那个token，这样就配置完成了
下一步我们在 sentry 要给你的项目先设置一个版本号，这样它才知道要对应去找哪里的 sourcemap 进行解析
# sentry-cli releases -o 组织名 -p 项目名 new 版本号
sentry-cli releases -o sentry -p vue new pro@1.0.1
# Created release pro@1.0.1.
组织名 可以在你账号里面看到，这样已经创建完成一个新的版本，我们可以打开网站看下，已经有我们刚创建的版本号了
然后我们需要在 main.js 文件当中修改下我们的配置
Sentry.init({
dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
release: 'pro@1.0.1', // 新增加的+
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
]
})
配置完成后，执行 npm run build 打包，接下来就是把 sourcemap 上传到 sentry
sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后js的目录 --url-prefix 线上js访问地址
sentry-cli releases -o sentry -p vue files dev@1.0.1 upload-sourcemaps dist\static\js --url-prefix ~/static/js
特别注意！！，这个 --url-prefix 是你线上访问到js文件的路径，~ 就是你网站的根目录，比如我网站的静态文件是这样 http://192.168.144.163:8080/static/js/xxxx.js，那么按照上面例子填就是正确的，因为我网站根目录就是 http://192.168.144.163:8080，上传成功后可以在 Releases -> Artifacts 中看到刚才上传的文件
在本地简单起一个 nginx 配置下，因为在 dev 环境下是访问不到 sourcemap，所以必须在 prod 环境下才能测试，继续简单触发一个错误，在网站上查看，会发现多了查看源码的选项
这样我们就可以成功定位到问题具体出现在哪个文件的哪一行，要删除map文件的话可以执行
sentry-cli releases -o 组织名 -p 项目名 files 版本号 delete --all
sentry-cli releases -o sentry -p vue files dev@1.0.1 delete --all
综上，基本就完成了 vue 与sentry 的结合了，美中不足的可能就是每次发布版本的话可能需要手动上传一次 sourcemap 文件，有兴趣的可以研究下 webpack 插件 @sentry/webpack-plugin ，在打包的同时上传到 sentry 去。
可能遇到的问题
其中花费时间比较久的一个问题是在上传 sourcemap 文件的操作中，这个 --url-prefix 的值一定要准确，并且不需要用引号包裹，要注意，一般如果文件确实上传成功了，但还是没显示具体在哪一行的话，大部分原因还是可能 sourcemap 文件地址不正确，导致访问不到，所以解析不了，这点要注意！
小结
搭建完成后，一旦有错误时我们就可以实时收集到，并可以看到错误的具体详情，分析然后排查问题，对于一些偶现的BUG很有作用，当然，sentry 能做到的只是查找你代码上发生的问题，对于业务上的错误还是要通过其他一些方法记录
