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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站制作、網(wǎng)站設計、貴定網(wǎng)絡推廣、微信小程序、貴定網(wǎng)絡營銷、貴定企業(yè)策劃、貴定品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供貴定建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：chinadenli.net

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

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

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

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

• window.onerror全局異常捕獲    目前前端捕獲頁面異常的方式主要有兩種，window.onerror捕獲整個頁面中運行的錯誤，它的局限是對于跨域的JavaScript腳本需要添加跨域支持，也就是需要涉及服務器的修改成本，否則無法獲取到運行時具體的堆棧錯誤信息，而是"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ā)送請求上報日志信息         errorReport(e.name, e.message + e.stack);     }, 5000); }

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

• try-catch運行時解決方案

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

function wrapFunction(fn) {     return function() {         try {             return fn.apply(this, arguments);         } catch (e) {             console.log(e);             _errorProcess(e);             return;         }     }; }  // 之后fn函數(shù)里面的代碼運行出錯時則是可以被捕獲到的了 fn = wrapFunction(fn);  // 或者異步函數(shù)里面的回調函數(shù)中的錯誤也可以被捕獲到 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ù)進行重定義，包括define，require等，這樣模塊中的主要作用域中的異常都可以通過try-catch來捕獲了。在之前的處理方法中，這種方法是非常有效的，直接可以拿到大多數(shù)錯誤棧中的異常和堆棧信息。

三、改進的一站式解決方案

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

   

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

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

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

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

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

React直接報錯不利于定位問題  

封裝后直接獲取堆棧錯誤

四、小結

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

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

網(wǎng)站標題：前端一站式異常監(jiān)控的捕獲方案是怎樣的
URL標題：http://chinadenli.net/article26/ihpjcg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、ChatGPT、企業(yè)建站、品牌網(wǎng)站建設、搜索引擎優(yōu)化、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)