Vue项目集成Sentry

Sentry异常捕获平台

Posted by Keystion on 2019-09-24

示例代码

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
pluginOptions: {
'vue-cli-plugin-sentry': {
registry: undefined,
organization: 'webclown',
project: 'project-1',
apiKey: '40325cbe44584080bad902ef873c10342d737944e43a4c67bfff7836aa52b779',
'release-mode': 'auto',
baseSentryURL: 'https://sentry.webclown.net/api/0/',
dsn: 'https://a54b1d1791344654a44cc8cc46197e51@sentry.webclown.net/1',
release: '53a152b'
}
}
}

src/sentry.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

if ('production' === process.env.NODE_ENV || 'test' === process.env.NODE_ENV) {
const ravenOptions = {
release: process.env.__GIT_SHA__,
environment: process.env.NODE_ENV
};

const dsn = 'https://a54b1d1791344654a44cc8cc46197e51@sentry.kaikeba.com/1';
Raven.config(dsn, ravenOptions)
.addPlugin(RavenVue, Vue)
.install();

}

src/main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './sentry.js'

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App)
}).$mount('#app')

部分配置说明

  1. vue-cli 3.x 完成项目初始化,

  2. 安装 vue-cli-plugin-sentry 配置Sentry,

终端执行

1
2
cd [项目路径]
vue add vue-cli-plugin-sentry

需要配置:

  • organization: 组织
  • project: 项目名称
  • apiKey: apiKey [私服]/settings/account/api/auth-tokens/ 自己项目地址生成
  • baseSentryURL: [私服]/api/0
  • dsn: 项目dsn



项目环境

1
2
3
4
5
"vue": "^2.6.10",
"@vue/cli-service": "^3.11.0",
"raven-js": "^3.27.0",
"vue-cli-plugin-sentry": "^1.1.1",
"webpack-sentry-plugin": "^1.16.0",