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下全局配置三个环境的地址；使用时候要进行区分

在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:/[email protected]/XXXXXXXXX',//对应生成的DSN
    sentryDSN,
    {
        environment: env.name
    },
    {
        release:'[email protected]'//指定版本后，每次上报的异常就会分类到该版本下
    }
    )
    .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 [email protected]

3).更新webpack.prod.conf.js

const SentryCliPlugin = require('@sentry/webpack-plugin')
在plugins:[]里面加入此代码：
new SentryCliPlugin ({
      release: "[email protected]",//版本号
      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对错误日志进行监控