使用第三方平臺監控線上專案程式碼錯誤

林楠發表於2018-04-13

場景

平常開發人員都會遇到一種情況，公司測試人員或者運營人員會火急火燎的跑過來告訴你線上的專案出問題了，並且試圖復現出BUG是怎麼出現的。

如果復現成功，那麼開發人員就能很幸運的靠這點線索去排查程式碼，如果復現失敗，那麼線上的專案就相當於一個黑盒子，開發人員是兩眼摸瞎無從下手。

可用解決方案

鑑於線上專案環境的無法預測,且自行開發js異常監控功能需要一定的時間成本和技術成本,考慮引入第三方監控平臺監控線上專案。

引入[fundebug]對線上專案進行異常監控和警報,開發人員能夠更加快速的鎖定線上問題,保證生產環境的安全和穩定。

如何使用fundebug?

我這裡將用vue作為例子，相應的各種框架的例子官網上還有很多。

首先先到官網註冊一個賬號,按照提示逐步完成。
將監控指令碼嵌入到自己的專案中。

在src中建立檔案 vue-fundebug/index.js

import Vue from 'vue'

const isDev = process.env.NODE_ENV === 'development' ? true : false//判斷當前是否是開發環境
const scriptPath = "https://js.fundebug.cn/fundebug.0.3.6.min.js"//平臺外掛指令碼地址
const apikey = "3213c4f5cfcfa6862e653ac4e2b2be46be3bfe316dee8df15776d2d6de6cafa5a"//api key

//載入指令碼
function loadScript(url, apikey) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.setAttribute("apikey", apikey);//fundebug key
    script.setAttribute("silentConsole", isDev);
    script.setAttribute("releasestage", process.env.NODE_ENV);//告知平臺當前環境
    script.setAttribute("silent", isDev);//開發環境下將不進行郵件傳送
    document.body.appendChild(script);
    return script;
}

//拼接vue組建錯誤資訊
function formatComponentName(vm) {
    if (vm.$root === vm) return 'root';
    var name = vm._isVue ? (vm.$options && vm.$options.name) || (vm.$options && vm.$options._componentTag) : vm.name;
    return (name ? 'component <' + name + '>' : 'anonymous component') + (vm._isVue && vm.$options && vm.$options.__file ? ' at ' + (vm.$options && vm.$options.__file) : '');
}

const vueFundebug = {
    install() {
        //非同步載入外掛指令碼,防止阻塞頁面渲染
        loadScript(scriptPath,apikey)
            .onload = () => {
                //當vue報錯,將觸發監聽函式
                Vue.config.errorHandler = function (err, vm, info) {
                    var componentName = formatComponentName(vm);
                    var propsData = vm.$options && vm.$options.propsData;
                    //將錯誤資訊傳送至平臺,接下來就會收到警報郵件
                    fundebug.notifyError(err, {
                        metaData:
                            {
                                appVersion: VERSION,
                                componentName: componentName,
                                propsData: propsData,
                                info: info
                            }
                    });
                }

            }

    }
}


export default vueFundebug;
複製程式碼

開始載入fundebug.js並監控專案

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './vue-axios'
import vueFundebug from './vue-fundebug'//引入封裝fundebug的指令碼

Vue.config.productionTip = false

Vue.use(vueFundebug);//開始載入fundebug並開始監控
Vue.use(axios);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

複製程式碼