目前业务开发中有个痛点，就是有时业务上会报错页面显示有问题，但是复现起来却很困难，这就对查找定位bug带来了不小的挑战。而解决这一痛点的办法就是搭建一套前端页面的监控系统，对页面上报的错误即时上报。

根据网上的一些资料，我们最终选择了sentry。sentry本身是开源并且免费的，但是如果需要使用官方搭建好的sentry平台则会收取一定费用。我们选择在自己的服务器上搭建，以规避这个问题；

关于sentry的安装,可以使用docker或者python进行安装，个人推荐使用docker。具体步骤官方文档（https://docs.sentry.io/server/installation/docker/）上说的很清楚，主要是按照github上https://github.com/getsentry/onpremise 这个库的说明，使用docker一步一步安装即可。安装过程中会提示你输入管理员账号和密码，这个会在你搭建完成登录的时候使用到。

搭建完成登录后配置好邮箱，就可以建项目了，按照建项目时readme的说明即可配置成功。这个过程本身比较简单，略过不表。

但有一个很重要的问题就是sourcemap的问题。因为毕竟我们的代码都是打包上传，sentry帮我们定位到了行数，结果确实压缩混淆过的，根本无法定位bug，这个时候就需要sentry对sourcemap的支持。

网上关于sentry的sourcemap的部署较为杂乱，且由于版本更迭，很多已经用不了了。现在将它总结如下：

1. 首先全局安装sentry-cli,使得我们能够在命令行中使用sentry命令。

npm install sentry-cli -g

2. 在sentry平台上创建TOKEN，这是你当前账户的一个标识。

请确保勾选了project:write

3.命令行输入

在命令行中输入sentry-cli --url http://localhost:9000/ login

输入 Y。这时会打开浏览器 将Token赋值到命令行中，然后回车。

4 在项目根目录中新建一个.sentryclirc文件

5 创建releases

sentry-cli releases -o 团队名称(此处为sentry) -p 项目名称（此处根据实际项目填写） new release名称

运行成功之后就会生成一个releases 在项目版本中能看到

此时配置文件已经处理好

6 修改mian.js引入项 增加版本信息

安装插件@sentry/webpack-plugin;此插件作用是 当生成生产环境包时候会自动将sourcemap文件上传到sentry系统用于识别文件。

安装完成之后 在webpack.prod.conf.js中增加配置。

首先引入

const SentryPlugin = require('@sentry/webpack-plugin');

然后在plugins中新增对象 

1
2
3
4
5
6
7
8
plugins:[
                 new SentryPlugin({
			  release: 'vue-template-sourcemap',   
			  include: path.resolve(__dirname,'../dist/static/js'),
			  ignore: ['node_modules', 'webpack.config.js'],
			  urlPrefix: '~/static/js'
		})
	]

此时即添加成功！！！当npm run build 打包的时候项目的js会自动上传到sentry服务器用于解析脚本

注意事项：当npm run build 打包的时候项目的js会自动上传到sentry服务器用于解析脚本，所以在打包之前应该先把现有的工件全部删除，在上传，防止覆盖