Vue2.x項目整合ExceptionLess監(jiān)控
前言
一直以來我們都是用Sentry做項目監(jiān)控，不過前段時間我們的Sentry壞掉了（我搞壞的）
但監(jiān)控又是很有必要的，在sentry修好之前，我想先尋找一個臨時的替代方案，同時發(fā)現(xiàn)網(wǎng)上關(guān)于ExceptionLess的資料少得可憐，ExceptionLess官方的文檔也不是很完善，翻了好久文檔和源碼，于是有了本文……
關(guān)于ExceptionLess
寫.NetCore的同學應(yīng)該不會陌生，這個是.Net平臺的一款監(jiān)控工具，跟Sentry差不多，不過我們覺得界面比sentry清爽，信息也比較清晰一目了然，所以我們的.NetCore服務(wù)監(jiān)控全都用ExceptionLess來做。
然后ExceptionLess也是支持前端的，因此，我打算先暫時用ExceptionLess來做我們的前端項目監(jiān)控。
準備工作
在ExceptionLess中創(chuàng)建一個項目，這個懂的都懂，不重復(fù)了~
ExceptionLess提供了好幾種模式，有Node.js、也有瀏覽器應(yīng)用，這里我選的是瀏覽器應(yīng)用。
官方還有關(guān)于Vue的例子，不過是vue3.x版本的，因為我們目前還在用vue2.x，所以只能自己基于瀏覽器應(yīng)用的SDK封裝一個來用~
安裝ExceptionLess客戶端
使用yarn安裝客戶端
yarn?add?exceptionless
我使用的版本是^1.6.4
集成ExceptionLess
在src/utils下創(chuàng)建一個新的js文件：exceptionless.js
import?{ExceptionlessClient}?from?'exceptionless/dist/exceptionless';
const?exLessClient?=?ExceptionlessClient.default;
exLessClient.config.apiKey?=?'';
exLessClient.config.serverUrl?=?''
const?install?=?Vue?=>?{
??if?(install.installed)
????return
??install.installed?=?true
??Object.defineProperties(Vue.prototype,?{
????$exLess:?{
??????get()?{
????????return?exLessClient
??????}
????}
??})
}
export?default?install
這樣實現(xiàn)了把ExceptionLess封裝為一個Vue模塊
然后編輯main.js，準備注冊模塊
import?Exceptionless?from?'./utils/exceptionless'
//?Exceptionless模塊
Vue.use(Exceptionless)
這樣，在需要提交日志的地方就可以直接使用：
this.$exLess.submitLog('測試信息')
this.$exLess.submitException(error)
集成到全局異常處理
如果所有異常要自己手動捕獲提交的話就太麻煩了，而且會有漏網(wǎng)之魚
我參考了網(wǎng)上的資料，搞了個vue全局異常處理，把沒有手動捕獲的異常收集起來，然后一并提交到ExceptionLess平臺。
直接上代碼，src/utils/errorHandler.js
import?{ExceptionlessClient}?from?'exceptionless/dist/exceptionless';
const?exLessClient?=?ExceptionlessClient.default;
function?isPromise(ret)?{
??return?(ret?&&?typeof?ret.then?===?'function'?&&?typeof?ret.catch?===?"function")
}
const?errorHandler?=?(error,?vm,?info)?=>?{
??console.error('拋出全局異常',?'vm=',?vm,?'info=',?info)
??console.error(error)
??exLessClient.submitException(error)
}
function?registerActionHandle(actions)?{
??Object.keys(actions).forEach(key?=>?{
????let?fn?=?actions[key]
????actions[key]?=?function?(...args)?{
??????let?ret?=?fn.apply(this,?args)
??????if?(isPromise(ret))?{
????????return?ret.catch(errorHandler)
??????}?else?{?//?默認錯誤處理
????????return?ret
??????}
????}
??})
}
const?registerVuex?=?(instance)?=>?{
??if?(instance.$options['store'])?{
????let?actions?=?instance.$options['store']['_actions']?||?{}
????if?(actions)?{
??????let?tempActions?=?{}
??????Object.keys(actions).forEach(key?=>?{
????????tempActions[key]?=?actions[key][0]
??????})
??????registerActionHandle(tempActions)
????}
??}
}
const?registerVue?=?(instance)?=>?{
??if?(instance.$options.methods)?{
????let?actions?=?instance.$options.methods?||?{}
????if?(actions)?{
??????registerActionHandle(actions)
????}
??}
}
let?GlobalError?=?{
??install:?(Vue,?options)?=>?{
????/**
?????*?全局異常處理
?????*?@param?{*}?error
?????*?@param?{*}?vm
?????*/
????Vue.config.errorHandler?=?errorHandler
????Vue.mixin({
??????beforeCreate()?{
????????registerVue(this)
????????registerVuex(this)
??????}
????})
????Vue.prototype.$throw?=?errorHandler
??}
}
export?default?GlobalError
在main.js中注冊
import?ErrorHandler?from?"./utils/errorHandler"
//?全局異步處理模塊
Vue.use(ErrorHandler)
搞定~
參考資料
- 【實踐總結(jié)】優(yōu)雅的處理vue項目異常：https://juejin.cn/post/6844903860121632782
- Vue3 對比 Vue2.x 差異性、注意點、整體梳理，與React hook比又如何：https://juejin.cn/post/6892295955844956167#heading-21