Vue项目集成前端异常监控工具Sentry（一）-前端集成
项目是使用vue cli2.0版本搭建的，目录结构与3.0cli搭出来的不一样。仅学习使用可以使用vue cli官方提供的方法将版本降级。
npm install -g @vue/cli-init
vue init webpack my-project一、集成Sentry
1.登录官网https://sentry.io/，注册账号，建立组织（organization）和项目（project）
2.安装sentry sdk
npm install @sentry/browser
npm install @sentry/integrations3.在main.js中初始化监控服务,下面代码是官方直接提供的。
import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
Sentry.init({
dsn: 'https://[email protected]/1501448',
integrations: [new Integrations.Vue({Vue, attachProps: true})],
});
// dsn是官方提供的，每个项目的dsn都不相同，这里换成自己项目的因为监控服务是通过Vue.config.errorHandler实现的，初始化后控制台将不再显示错误信息，因此不需要在开发环境使用。在初始化前判断是否是开发环境。
process.env.NODE_ENV!=='development'&&Sentry.init({
dsn: 'https://[email protected]/1501448',
integrations: [new Integrations.Vue({Vue, attachProps: true})],
});不仅需要区分开发环境，我们同样不希望在统计中看到测试环境的信息，因此需要屏蔽测试环境。
初始化后Sentry就可以自动将运行时抛出的异常自动上传到Sentry后台。同时我们也可以定义业务异常，手动抛出错误。
//手动抛出异常
Sentry.captureException(new Error("Something broke"));
二、上传source-map，定位源码中的错误
在项目构建时，js代码会进行压缩处理。为了在Sentry控制台中能看到具体的错误发生位置，可以将source-map文件上传到Sentry。Sentry提供了多种上传方式，这里使用webpack插件实现构建过程中自动上传。
1.安装webpack插件
npm install --save-dev @sentry/webpack-plugin2.修改webpack打包配置文件，增加如下代码
// webpack.prod.conf.js
var SentryCliPlugin = require('@sentry/webpack-plugin')
new SentryCliPlugin({
release: process.env.RELEASE_VERSION,
include: 'dist/static/js'
})
// prod.env.js
'use strict'
let gitSha = require('child_process').execSync('git rev-parse HEAD').toString().trim()
module.exports = {
RELEASE_VERSION: `"${gitSha}"`,
NODE_ENV: '"production"'
}3.在项目根目录创建.sentryclirc文件，内容如下：
[auth]
token=1e8f25f1bfa24eb8aed59a47baa140988591e03157c94a18a357eb3530569d1d
[defaults]
org=jingyong
project=vue-sentry-test
url=https://sentry.io/上述token的生成方式：进入sentry主页，点击头像菜单中的api keys，创建token并勾选project:write
完成以上步骤后，每次执行npm run build构建项目时，webpack插件会自动将js文件以及map文件上传到Sentry，可以在后台的release菜单中看到上传的各个版本的详细内容
