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