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

时间 2019-11-08

标签 vue 如何使用 sentry 错误日志进行监控繁體版

原文原文链接

前言

以前看过一片前端错误日志的文章,可是没怎么在乎,忘记是哪位大神写的了-.-! 知道前天跟公司后台哥们一说,说咱们须要搭个前端的错误日志监控系统,而后他就把sentry的文档发过来了,他本身用python已经在公司服务器搭了一个sentry了,可是我在使用的过程当中始终卡在了确认API_KEY这一步,因此本身就使用了github的帐号操做了一遍,便有了下文.javascript

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

建立一个sentry帐号

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

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

安装插件

cnpm i raven-js -S

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

Raven
    .config('https://396b17802b834246156166ed6defd99cb898@sentry.io/52513545')
    .addPlugin(RavenVue, Vue)
    .install();

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

使用

因为咱们项目通常都是分为测试环境和生产环境,所以有必要使用node.env来进行区分python

/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
react

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

点进去..... 能够看到具体的出错信息.git

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

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

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

一些说明

暂未配置自动发送邮件的功能.

经过webpack插件的形式进行source-map上传的话,比较花时间.能够手动进行;

webpack中的上传的sourece-map经过realease来标注版本,这样在多版本的监控中能够对错误信息进行过滤.

参考文章

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

运维开发实践——基于Sentry搭建错误日志监控系统

sentry官网