vue配合webpack使用sentry对错误日志监控
1.在sentry官网创建一个sentry账号2.点击‘继续’按钮,新建项目:(注:vue在Brower下)3.继续下一步,到Send an event from your application 这一步这是sentry已经生成DSN,点击最下面的按钮4.安装插件cnpm i raven-js -S使用因为我们的项目分为开发、测试和生产环境,在build下全局配置三个环境的地址;...
·
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 上传后的错误效果
参考文章
更多推荐
已为社区贡献1条内容
所有评论(0)