前端一站式異常監(jiān)控的捕獲方案是怎樣的

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)前端一站式異常監(jiān)控的捕獲方案是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、前端異常監(jiān)控的重要性

軟件異常監(jiān)控常常直接關(guān)聯(lián)到軟件本身的質(zhì)量，完備的異常監(jiān)控體系常常能夠快速定位到軟件運(yùn)行中發(fā)生的問題，并能幫助我們快速定位異常的源頭，提升軟件質(zhì)量。

在服務(wù)器開發(fā)中，我們常常使用日志來記錄請(qǐng)求的錯(cuò)誤和服務(wù)器異常問題，但是在客戶端，前端應(yīng)用直接部署運(yùn)行在用戶的瀏覽器中，如果發(fā)生錯(cuò)誤，應(yīng)該怎樣去捕獲并傳送給服務(wù)器呢?前端錯(cuò)誤日志傳送給服務(wù)器很簡(jiǎn)單，在異常發(fā)生時(shí)直接發(fā)請(qǐng)求就可以了，下面我們主要討論下錯(cuò)誤的捕獲方案。

二、現(xiàn)有的異常監(jiān)控方案

• window.onerror全局異常捕獲    目前前端捕獲頁面異常的方式主要有兩種，window.onerror捕獲整個(gè)頁面中運(yùn)行的錯(cuò)誤，它的局限是對(duì)于跨域的JavaScript腳本需要添加跨域支持，也就是需要涉及服務(wù)器的修改成本，否則無法獲取到運(yùn)行時(shí)具體的堆棧錯(cuò)誤信息，而是"script  error"的信息，不利于我們定位問題。

window.onerror = function(msg, file, row, column, errorObj) {     console.log(msg); // script error.     console.log(file); //      console.log(row); // 0     console.log(column); // 0     console.log(errorObj); // {}     setTimeout(function() {         // 發(fā)送請(qǐng)求上報(bào)日志信息         errorReport(e.name, e.message + e.stack);     }, 5000); }

<script src="//domain.com/path/main.js" crossorigin></script>

• try-catch運(yùn)行時(shí)解決方案

  現(xiàn)有的另一中方案則是try-catch，對(duì)于某個(gè)方法函數(shù)，我們可以這樣定義來捕獲函數(shù)里面運(yùn)行時(shí)的異常，但是try-catch只能捕獲當(dāng)前單個(gè)作用域下的異常。另外，使用try-catch會(huì)帶來一定的性能損耗，根據(jù)循環(huán)測(cè)試，平均大概會(huì)損失6%～10%的性能，但是為了提升應(yīng)用的質(zhì)量和穩(wěn)定性，這些是可以接受的。

function wrapFunction(fn) {     return function() {         try {             return fn.apply(this, arguments);         } catch (e) {             console.log(e);             _errorProcess(e);             return;         }     }; }  // 之后fn函數(shù)里面的代碼運(yùn)行出錯(cuò)時(shí)則是可以被捕獲到的了 fn = wrapFunction(fn);  // 或者異步函數(shù)里面的回調(diào)函數(shù)中的錯(cuò)誤也可以被捕獲到 var _setTimeout = setTimeout; setTimeout = function(fn, time){     return _setTimeout(wrapFunction(fn), time); }  // 模塊定義函數(shù)也可以做重寫定義 var _require = require; require = function(id, deps, factory) {     if (typeof(factory) !== 'function' || !factory) {         return _require(id, deps);     } else {         return _require(id, deps, wrapFunction(factory));     } };

那么我們可以對(duì)常用的模塊入口函數(shù)進(jìn)行重定義，包括define，require等，這樣模塊中的主要作用域中的異常都可以通過try-catch來捕獲了。在之前的處理方法中，這種方法是非常有效的，直接可以拿到大多數(shù)錯(cuò)誤棧中的異常和堆棧信息。

三、改進(jìn)的一站式解決方案

React開發(fā)時(shí)代，這種方式就不能直接使用了，我們知道React的組件都是class，其實(shí)也就是構(gòu)造函數(shù)，這里普及下class和構(gòu)造函數(shù)其實(shí)是非常類似的，class  A除了constructor為class A，其它信息和function  A類似，typeof獲取的類型也相同。但是我們是沒辦法把構(gòu)造函數(shù)A直接裝入try-catch中運(yùn)行的，因?yàn)樾枰ㄟ^關(guān)鍵字new進(jìn)行實(shí)例化，并創(chuàng)建新的作用域。

此時(shí)我們要處理的問題其實(shí)是捕獲React中屬性方法中的錯(cuò)誤，應(yīng)該還記得，JavaScript中函數(shù)有個(gè)特殊的屬性prototype，當(dāng)函數(shù)作為構(gòu)造函數(shù)是，prototype中的屬性就成了實(shí)例化后的屬性方法，而且這一屬性對(duì)class同樣生效。那么我們可以對(duì)React中class的prototype這個(gè)特殊屬性的內(nèi)容進(jìn)行處理，對(duì)Component中的方法函數(shù)進(jìn)行封裝。

function defineReact(Component) {      var proto = Component.prototype;      for (var key in proto) {         if (typeof(proto[key]) === 'function') {             proto[key] = _wrapFunction(proto[key]);         }     }      return Component; }

這樣通過實(shí)例化產(chǎn)生的React組件中的內(nèi)部方法中的錯(cuò)誤就可以被捕獲到了。

class component extends React.Component {     componentDidMount(){         var a = {};         console.log(a.b.c);     }     render() {         return <div>hello world</div>;     } } export default defineReact(component);

這里添加defineReact的操作就可以放到構(gòu)建打包工具中去處理了，這樣就避免了我們對(duì)代碼層直接進(jìn)行修改。

React直接報(bào)錯(cuò)不利于定位問題  

封裝后直接獲取堆棧錯(cuò)誤

四、小結(jié)

其實(shí)和原有的方式差別不大，仍然通過try-catch的方式，覆蓋到React組件prototype屬性中進(jìn)行異常捕獲，極大增加了錯(cuò)誤捕獲范圍，不僅能幫助我們快速定位開發(fā)中的問題，也能捕獲React線上應(yīng)用的運(yùn)行時(shí)錯(cuò)誤。

上述就是小編為大家分享的前端一站式異常監(jiān)控的捕獲方案是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。