vue中如何使用sentry对错误日志进行监控

前言

之前看过一片前端错误日志的文章,但是没怎么在意,忘记是哪位大神写的了-.-! 知道前天跟公司后台哥们一说,说我们需要搭个前端的错误日志监控系统,然后他就把sentry的文档发过来了,他自己用python已经在公司服务器搭了一个sentry了,但是我在使用的过程中始终卡在了确认API_KEY这一步,所以自己就使用了github的账号操作了一遍,便有了下文.

sentry官网
vue errorHandler 文档说明
官方文档传送门

创建一个sentry账号

使用github账号登陆,新建一个组织,然后新建项目.
注意:vue在Brower下,当时我看文档的时候没注意,还是参考react来配置的,差点走了弯路.

项目新建好以后,跳转到一下界面,这时sentry已经生成了DSN,即sentry请求发送错误日志的链接.
拉到页尾去,使用model来引入sentry;

安装插件

cnpm i raven-js -S

//  这事官方自动帮你生成的
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://[e-mail]/52513545')
    .addPlugin(RavenVue, Vue)
    .install();

这是官方自动帮你生成的,但是目前无法捕捉vue中的错误日志,但是vue有个全局配置叫做
vue.config.errorHandler,我们就是使用他来发送vue的错误日志的

使用

由于我们项目一般都是分为测试环境和生产环境,因此有必要使用node.env来进行区分

    /main.js
    import Vue from 'vue';
    import Raven from 'raven-js';
    import RavenVue from 'raven-js/plugins/vue';
    
    const sentyDSN = process.env.NODE_ENV === 'test' ? 
                                                'https://生成的api-test':
                                                'https://生成的api-prod'
process.env.NODE_ENV === 'test' && Raven.config(
    sentyDSN,  //  
    {
        environment: process.env.NODE_ENV
    },
    {
        release:'staging@1.0.1'
    }
    )
    .addPlugin(RavenVue, Vue)
    .install()
// 注意,一定记得区分开发环境,否则开发环境的错误也会被提交到sntry去,并且本地是不会显示错误信息的    
if(process.env.NODE_ENV !== 'development' ){
    Vue.config.errorHandler = function(err, vm, info) {
        Raven.captureException(err)
    }
}

new Vue({
    el: '#app',
    router,
    store, //将store注册到vue实例中
    template: '<App/>',
    components: { App }
})
    

上述操作完成后,你可以自己抛出一个错误, 比如 我在index.vue中执行了this.testhhh(),由于此时并没有上source-map,因此只能看到出错的信息,无法定位到真正的错误所在;
所以需要上传source-map

这是我已经上传了sourcemap后的结果,是可以定位到具体的行号的.

点进去..... 可以看到具体的出错信息.

vue配合webpack,自动上传js,map文件到sentry错误日志系统

使用sentry-webpack-plugin,自动将生成的js map文件上传
sentry官网

source-map

参见 @游龙翔隼 Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制)

webpack.prod.conf配置

安装 cnpm i @sentry/webpack-plugin -D

const SentryPlugin = require('@sentry/webpack-plugin')
new SentryPlugin({
        release: "staging@1.0.1",                           //发布的版本
        include: path.join(__dirname,'../dist/static/js/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
        ignore: ['node_modules', 'webpack.config.js'],  //  忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
        configFile :`${__dirname}/sentry.properties`,   //  使用了类似于java的properties配置文件,里面包含了 -o组织 -p项目 以及authtoken
        urlPrefix : "~/static/js"           //  线上对应的url资源的相对路径 比如我的域名是 http://mydomin.com/,静态资源都在 static文件夹里面,
      }),

configfile:sentry.properties

# 生成的token
auth.token=61fbcb5798db46f7970dfb7aacc30389b72828188dfb493a9955a3141693d18d
# 默认的上传地址
defaults.url=https://sentry.io/
# 组织名
defaults.org=yunhe
# 项目名
defaults.project=vue_test

一些说明

1. 暂未配置自动发送邮件的功能.
2. 通过webpack插件的形式进行source-map上传的话,比较花时间.可以手动进行;
3. webpack中的 上传的sourece-map通过realease来标注版本,这样在多版本的监控中可以对错误信息进行过滤.

参考文章

1. @游龙翔隼 Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制)
2. 运维开发实践——基于Sentry搭建错误日志监控系统
3. sentry官网