1.在创建一个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文件夹里面, }),复制代码