【引自ouven的博客】一、前端異常監(jiān)控的重要性

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

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

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

• window.onerror全局異常捕獲   目前前端捕獲頁面異常的方式主要有兩種，window.onerror捕獲整個(gè)頁面中運(yùn)行的錯(cuò)誤，它的局限是對于跨域的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ā)送請求上報(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，對于某個(gè)方法函數(shù)，我們可以這樣定義來捕獲函數(shù)里面運(yùn)行時(shí)的異常，但是try-catch只能捕獲當(dāng)前單個(gè)作用域下的異常。另外，使用try-catch會(huì)帶來一定的性能損耗，根據(jù)循環(huán)測試，平均大概會(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)); 
    } 
};  

那么我們可以對常用的模塊入口函數(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í)例化后的屬性方法，而且這一屬性對class同樣生效。那么我們可以對React中class的prototype這個(gè)特殊屬性的內(nèi)容進(jìn)行處理，對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)建打包工具中去處理了，這樣就避免了我們對代碼層直接進(jìn)行修改。 

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

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

四、小結(jié)

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