Sentry简介
Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了web来展示输出错误。
sentry官网：https://sentry.io/
Sentry安装
Sentry 是一个开源的工具，可以自行搭建。
官方支持两种安装和运行 Sentry 服务器的方法，Docker 和 Python。推荐使用 Docker。
这里建议让公司的运维或者后台同学搭建好，搭建好之后让他给你账号
Sentry 前端部署
创建Vue类型的Sentry并引入到项目中
创建项目页面会自动跳转到如何配置
vue项目页面。接下来就按照指引在vue代码里引入 sentry。可以通过 cdn 或者 npm 引入。我们采用 npm 引入。引入的时候需要给init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目。如果不传这个参数，sentry 不会发送错误。
新版的Sentry并不会自动生成dsn,需要我们自己按照格式拼接
dsn: '协议://公钥@服务器地址/项目ID',
// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生产环境使用
Sentry.init({
dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
]
})
}
至此，项目已经能够被Sentry监控到了，接下来上传source-map辅助定位问题
如果不上传source-map的话，虽然也能监控道控制台错误，但是由于源文件都被webpack处理混淆压缩，所以不太好定位到具体原因，因此建议上传source-map
上传source-map
上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map，但是需要手动上传。也可以采用 webpack-plugin 这个插件，可以在 build 的同时自动上传 source-map。这里建议采用自动上传策略。
1、在项目跟目录下增加.sentryclirc文件，其中的token可以在左上角头像里的api keys里面获取。
[auth]
token=6e3e03b8c0594d1186db2177d58942eb4132823839294a848593eff31eb712f9
[defaults]
url=服务器地址
org=你的组织名
project=刚刚创建的项目名
2、安装webpack-plugin 插件并使用，这里给出vue-cli3的配置
npm i @sentry/webpack-plugin -D // 安装插件
//vue.config.js
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
module.exports = {
...
productionSourceMap: true,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') { //只在上传环境上传
config.plugins.push(
new SentryWebpackPlugin({
include: './dist',
release: 'game-center-html@prod',
urlPrefix: '~/game/', //这个参数指定source-map文件的路径，默认服务器根目录，如果路径错误将无法定位map文件
ignoreFile: '.sentrycliignore',
ignore: ['node_modules', 'webpack.config.js'],
configFile: 'sentry.properties'
})
)
}
}
}
urlPrefix参数重要说明
~/为网站根目录，后续路径须对应source-map
这里的urlPrefix可以通过线上看js文件的完整路径，有可能不在根目录下
比如线上js文件的路径为http://www.baidu.com/game/js/app.dsds323.js
我们上传时文件的urlPrefix就应该设置为 '~/game/'
3、 修改main.js中的配置
// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生产环境使用
Sentry.init({
dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
}),
new Integrations.RewriteFrames() //<-----新增
],
release: 'game-center-html@prod' //<-----新增
})
}
release说明
必须保证 vue.config.js和main.js 两个配置中的 release 版本号相同，这样的话 Sentry 才能将source-map文件一一对应上,每次修改都会在后台生产一个新的版本。
至此，每次执行npm run build都会生产source-map并上传到Sentry
回到Senrtry控制台，就能在版本中看到和release同名的版本,新的错误监控将能够看到源代码
删除项目中的map文件
由于我们在vue.config.js中开启了productionSourceMap,所以每次npm run build都会生产map文件，这就会导致打包体积很大，并且如果map文件被上传到线上，可能存在安全隐患，所以建议在打包之后删除map文件，因为执行npm run build之后已经将source-map上传到了Sentry，本地打包出来的map文件已经没有用了，所以是可以删除的
1、手动删除
2、构建命令删除
