前端資料監控與異常捕獲

随着前端的能力越來越強大，前端的重擔也越來越大，許多在本地調試ok的功能，到了别人的手機或電腦上總是莫名其妙的出現問題，今天談論的就是前端監控中的一小部分，異常捕獲。

如何手機端的功能越來越多，但是手機端确一直都很難調試，更是很難捕獲到别人操作的資訊。

全局監聽錯誤資訊

window.onerror = function(msg, url, lineno, clono, stack){
	//msg: 錯誤資訊，如aaa is not undefined
	//url 錯誤指向的頁面
	// lineno 報錯行，這個在拿到資料之後特别有用
	// clono: 報錯列 
	//stack  錯誤棧
}
           

将手機到的資料上報到伺服器，必須要有一個添加接口

var formdata = new FormData()
	formdata.append('cloNo',clono)
	formdata.append('lineNo',lineno)
    formdata.append('errorMsg',msg)
    formdata.append('errorPage',url.split('file:///')[1].split(' ')[0])
    var pageParam = JSON.parse(api.getGlobalData({key: 'loginInfo'}));
    formdata.append('operUser', pageParam.username)
    // 日志上報,一般在unload的時候發送
    window.navigator.sendBeacon('http://yyzztest.inteink.com/api/vuelog/add',formdata)
           

資料上報用到的核心功能是 window.navigator.sendBeacon（方法可用于通過HTTP将少量資料異步傳輸到Web伺服器），該功能接受四種資料類型， ArrayBufferView，Blob，DOMString 或 Formdata，用/formData格式進行傳輸用的更多一些，就是上面的這種方法,便于在背景管理中查詢到對應的字段進行分析,其他的三種類型目前還沒有用到過，之後可以自行研究一下。

資料監控不僅可以異常捕獲，還可以進行性能分析(window.performance），資源加載情況等資料分析，監控别人操作頁面對一些異常捕獲以及完善自己的項目真的起到了非常大的作用