1.在sentry官网创建一个sentry账号，填写相关信息点击‘继续’按钮
2.新建项目：（注：vue在Brower下）
3.继续下一步，到Send an event from your application 这一步这是sentry已经生成DSN，点击最下面的按钮
4.安装插件
cnpm i raven-js -S
使用
因为我们的项目分为开发、测试和生产环境，在build下全局配置三个环境的地址；使用时候要进行区分
在main.js下
引入
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
复制代码注：env.name是全局配置的三个环境的环境名称
const sentryDSN = env.name == 'testing' ? 'test' : 'prod';
Raven.config('https:/XXXXXXXXXXXXXXXXXX@sentry.io/XXXXXXXXX',//对应生成的DSN
sentryDSN,
{
environment: env.name
},
{
release:'production@1.1.0'//指定版本后，每次上报的异常就会分类到该版本下
}
)
.addPlugin(RavenVue, Vue)
.install()
// 注意,一定记得区分开发环境,否则开发环境的错误也会被提交到sntry去,并且本地是不会显示错误信息的
if(env.name !== 'development' ){
Vue.config.errorHandler = function(err, vm, info) {
Raven.captureException(err)
}
}
复制代码5.上传 SourceMaps 对错误进行定位
可以参考[sentry Generating Source Maps 文档，详细了解各类框架如何产生SourceMaps； 项目中我用的是webpack打包，我使用的是Sentry Webpack Plugin 配合Webpack完成构建时上传SourceMaps
1).获取API Token
先点击右下角的API，在点击Create New Token; 确保勾选projectwrite，然后在点击Create Token
2).安装sentry-webpack-plugin插件
npm install @sentry/webpack-plugin @sentry/cli --dev-save
在项目的根目录下创建一个文件.sentryclirc并配置
[defaults]
url=https://sentry.io/
org=组织名称
project=项目名称
[auth]
token=你的sentry账号下生成的API Token
复制代码创建Release,
sentry-cli releases -o 组织 -p 项目 new production@1.1.0
复制代码3).更新webpack.prod.conf.js
const SentryCliPlugin = require('@sentry/webpack-plugin')
在plugins:[]里面加入此代码：
new SentryCliPlugin ({
release: "production@1.1.0",//版本号
include: path.join(__dirname,'../dist/static/js/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
ignore: ['node_modules', 'webpack.config.js'], //忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
configFile :'.sentryclirc',
urlPrefix : "~/static/js" // 线上对应的url资源的相对路径 比如我的域名是 http://XXX .com/,静态资源都在 static文件夹里面,
}),
复制代码Sourmap 上传后的错误效果
参考文章
vue中如何使用sentry对错误日志进行监控