1.新旧SDK对比
sentry前不久更新了js-jdk,以前使用的raven-js与webpack-sentry-plugin更新成了@sentry/browser @sentry/webpack-plugin
旧 新 raven-js @sentry/browser 前端错误日志上报SDK webpack-sentry-plugin @sentry/webpack-plugin webpack项目sourcemap上传插件
目前两套插件都可以正常使用，但是随着根据官方的脚步，新的必将慢慢替代旧的，所以有空有闲的程序猿／媛们动起来吧。
2.@sentry/browser用法
2.1 sentry账号注册
以VUE项目为例，我们在sentry官网https://sentry.io先注册一个账号。
创建一个项目,选择Browser分类下的vue,然后起一个项目名vuexxx,点击创建项目
创建成功会出现项目注意事项简介，说明基本用法
选择确定，进入项目，默认页面如下，注意地址栏用红色圈出的部分，在上传sourcemap的时候将用到，右上角圈出来的Environment可以在初始化的时候进行设置，查看错误的时候我们可以选择测试或者生产的数据：
2.2 安装
npm install @sentry/browser --save
2.3 使用
在main.js文件中引入并初始化
import * as Sentry from '@sentry/browser'
Sentry.init({
dsn: '上报地址',
integrations: [new Sentry.Integrations.Vue({ Vue })],
release: '版本号',
environment:'环境，比如生产或者测试'
})
3.@sentry/webpack-plugin用法
构建项目时，我们会将代码进行压缩混淆，为了在进行日志分析的时候更清楚看到错误发生的原因，我们要对代码进行还原，因此需要sourcemap文件，使用插件在项目构建时会自动上传sourcemap文件，需要身份认证，我们生成一下API tokens，点开左边API keys选项,点击右上角 create new token，勾选project:write
确认，create token，生成的auth token就是我们需要的。
3.2 安装
npm install @sentry/webpack-plugin -D
3.3 使用
在build/webpack.prod.conf.js文件中引入并使用
const SentryPlugin = require('@sentry/webpack-plugin');
new SentryPlugin({
release: '版本号',
include: './dist',
urlPrefix: '~/vueDemo/',
ignore: ['node_modules', 'webpack.config.js'],
})
此时还差一步，在工程根目录下新建.sentryclirc文件，sentry_cli会默认读取.sentryclirc文件，配置如下：
[defaults]
url = https://sentry.io/
org = foresea
project = vuexxxx
[auth]
token = 填写我们生成的auth token
进入项目后我们可以直接在地址栏读取服务器地址， [defaults]配置按照地址栏进行配置就可以了，token是我们生成的auth token。
3.4 补充说明
关于SentryPlugin的配置项可以在官网找到更详细的说明，github.com/getsentry/s…
强调一下urlPrefix: '~/vueDemo/'这个设置，如果你的项目地址为https://xxxx.com/vue/dist/index.html,那么你应该设置
urlPrefix: '~/vueDemo/dist/'
要与上传的sourcemap文件目录保持一致，可以在项目中的Releases目录查看上传的文件。为了安全，在发布项目的时候记得不要将sourcemap文件一同上传，应当剔除。