官方文档参考 https://docs.sentry.io/clients/javascript/integrations/vue/

一. raven安装与接入

raven安装

npm install raven-js --save-dev

项目中使用raven

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('sentry服务地址', {/*options*/})
     //raven内置了vue插件，会通过vue.config.errorHandler来捕获vue组件内错误并上报sentry服务，开发者不要再自己设置vue.config.errorHandler
    .addPlugin(RavenVue, Vue)  
    .install();

#sentry服务地址

#常用配置项（详细请参考官方文档https://docs.sentry.io/clients/javascript/config/ ，配置-Configuration）

{
	release: '1.0.0', //版本号，如果要使用sourcemap，则release必须配置，并且需要和sourcemap所属的release一致
	environment: 'test/stage/online', //设置此配置后，在sentry后台可以根据环境筛选
	tags: { //此项可以给error设置一些标签，便于分类查询
		platform: 'ios/android/wechat'
	} 
	...
}

注意事项：

1.raven的安装要早于业务代码，有利于捕获更加完善的异常信息（最好在js入口文件开始就加载raven）

2.使用RavenVue插件后，不要再自行设置vue.config.errorHandler

3.reven有自动捕获异常的机制，见下文

二.raven自动捕获异常机制

1.自动捕获vue组件内异常

使用了RavenVue插件后，vue组件内异常如果被vue.config.errorHandler捕获，则会上报到sentry，并携带异常信息和vue组件部分信息

2.自动捕获promise内的异常

raven会通过监听unhandledRejection，来捕获未被catch的rejection，前提是浏览器支持 unhandledRejection 事件

建议promise还是自己设置catch捕获异常，然后主动上报给sentry

3.自动捕获没有被catch的运行异常

raven会通过window.onerror捕获未被catch的运行异常，并将error上报到sentry服务

注意：如果加载的js和访问的页面不在一个域下，window.onerror无法捕获具体的错误信息，error.message会是‘Script error’，此时raven会抛弃掉这些错误不上报

解决方案是给script标签设置 crossorigin 属性，并且返回js的资源服务器要设置Access-Control-Allow-Origin头

 参考：https://docs.sentry.io/clients/javascript/usage/#cors

https://blog.fundebug.com/2017/04/05/understand-script-error/

https://blog.fundebug.com/2017/04/06/test-script-error/

https://blog.fundebug.com/2017/04/07/solve-script-error/

建议对关键代码块try...catch，并主动上报异常给sentry

三.raven主动上报异常

1.上报Error对象

Raven.captureException(new Error('error'), {/*options*/});

2.上报异常文本信息（String）

Raven.captureMessage('error message', {/*options*/});

参考：https://docs.sentry.io/clients/javascript/usage/#reporting-errors-correctly

使用 - Usage

四. sourceMap

#sentry后台可以很方便的查看上报的报错信息，但是由于大多数项目的js都是经过压缩混淆的，分析不方便，可以使用sourcemap将混淆后的代码映射到源代码

官方推荐将js以及对应的sourcemap上传到sentry服务，此文档仅对此方式做介绍

1.可以使用sentry-cli工具上传js文件以及sourcemap文件

参考 sentry-cli 命令行使用帮助

2. 可以使用webpack插件 sentry-webpack-plugin （推荐）

插件安装

npm install @sentry/webpack-plugin --save-dev

创建sentry-cli配置文件 .sentryclirc

[auth]
token=e8af7d874d434d059e3bdfa8b4883b0cf5ffc89a7493435697794cdf9e7bb96e
[defaults]
url=https://spruce-sentry.stage.yunshanmeicai.com/   
org=sentry
project=mall-h5

token生成方式

注意：生成token时要勾选project:write

webpack内集成sentry插件

const SentryCliPlugin = require('@sentry/webpack-plugin')
module.exports = {
	...
	plugins: [
		...
		new SentryCliPlugin({
      		release: '1.0.0',
      		include: './dist/public/', //js和map文件路径
      		ignoreFile: '.sentrycliignore', //类似于.gitignore 里面可以配置不需要上传的文件名和地址
      		ignore: ['node_modules', 'webpack.config.js'],  //忽略上传的文件或目录，会覆盖ignoreFile中配置的
      		configFile: './../.sentryclirc', //sentry-cli配置文件
      		// dryRun: true,
      		urlPrefix: 'https://oss.yunshanmeicai.com/weixin/cdn/',  //此处需要配成同真实js发布地址相同的路径
      		// validate: true,
      		debug: true
    	})
	]
}

注意：

--上传文件的release要和运行时上报的release一致

--上传的js和sourcemap一定要和实际网站加载的js地址完全一致，通过urlPrefix参数控制前缀，上传后的效果如下

sentry 在 vue项目接入指南