詳解js前端代碼異常監(jiān)控
閱讀目錄
- 什么是前端代碼異常
- window.onerror
- 寫(xiě)一個(gè)js報(bào)錯(cuò)的上報(bào)庫(kù)
- 注意點(diǎn):
- 缺點(diǎn):
在平時(shí)的工作,js報(bào)錯(cuò)是比較常見(jiàn)的一個(gè)情景,尤其是有一些錯(cuò)誤可能我們?cè)诒镜販y(cè)試的時(shí)候測(cè)試不出來(lái),當(dāng)發(fā)布到線上之后才可以發(fā)現(xiàn),如果搶救及時(shí),那還好,假如很晚才發(fā)
現(xiàn),那就可能造成很大的損失了。如果我們前端可以監(jiān)控到這種報(bào)錯(cuò),并及時(shí)上報(bào)的話,那我們的問(wèn)題就比較好解決了。所以我們今天來(lái)聊聊前端代碼的異常監(jiān)控
什么是前端代碼異常
一般語(yǔ)法錯(cuò)誤以及運(yùn)行時(shí)錯(cuò)誤,瀏覽器都會(huì)在console里邊體現(xiàn)出錯(cuò)誤信息,以及出錯(cuò)的文件,行號(hào),堆棧信息。
我們先來(lái)說(shuō)手前端代碼異常是什么意思。前端代碼異常指的是以下兩種情況:
1、JS腳本里邊存著語(yǔ)法錯(cuò)誤;
2、JS腳本在運(yùn)行時(shí)發(fā)生錯(cuò)誤。
類似于這種:
for(var i=0;i<l;i++){ console.log(i); }
那么我們?nèi)绾蝸?lái)捕獲這種異常呢,有兩種方法,
第一種是try..catch
第二種是 window.onerror
由于try.catch 沒(méi)法捕捉到全局的錯(cuò)誤事件,也即是說(shuō) 只有try,catch的塊里邊運(yùn)行出錯(cuò)才會(huì)被你捕捉到。所以我們這里排除它的這種方案,
來(lái)采用第二種方法,也就是window.onerror方法。
window.onerror
打開(kāi)瀏覽器自帶的開(kāi)發(fā)者工具,當(dāng)一個(gè)錯(cuò)誤發(fā)生時(shí),我們可以立刻得到提示,并且知道錯(cuò)誤發(fā)生的位置以及調(diào)用的堆棧信息。
我們可以通過(guò) window.onerror 來(lái)捕獲頁(yè)面上的各種腳本執(zhí)行異常,它能幫助我們獲取有用的信息。但是這個(gè)方法存在兼容性問(wèn)題,在不同的瀏覽器上提供的數(shù)據(jù)不完全一致,
部分過(guò)時(shí)的瀏覽器只能提供部分?jǐn)?shù)據(jù)。它的用法如下:
window.onerror = function (message, url, lineNo, columnNo, error)
五個(gè)參數(shù)的含義如下:
1、message {String} 錯(cuò)誤信息。直觀的錯(cuò)誤描述信息,不過(guò)有時(shí)候你確實(shí)無(wú)法從這里面看出端倪,特別是壓縮后腳本的報(bào)錯(cuò)信息,可能讓你更加疑惑。
2、url {String} 發(fā)生錯(cuò)誤對(duì)應(yīng)的腳本路徑,比如是你的http://a.js報(bào)錯(cuò)了還是http://b.js報(bào)錯(cuò)了。
3、lineNo {Number} 錯(cuò)誤發(fā)生的行號(hào)。
4、columnNo {Number} 錯(cuò)誤發(fā)生的列號(hào)。
5、error {Object} 具體的 error 對(duì)象,包含更加詳細(xì)的錯(cuò)誤調(diào)用堆棧信息,這對(duì)于定位錯(cuò)誤非常有幫助。
兼容性問(wèn)題
不同瀏覽器對(duì)同一個(gè)錯(cuò)誤的 message 是不一樣的。
IE10以下瀏覽器只能獲取到 message,url 和 lineNo這三個(gè)參數(shù),獲取不到columnNo 和 error
不過(guò) window.event 對(duì)象提供了 errorLine 和 errorCharacter,以此來(lái)對(duì)應(yīng)相應(yīng)的行列號(hào)信息。
在使用onerror的時(shí)候,我們可以使用arguments.callee.caller 來(lái)遞歸出調(diào)用堆棧,這一類信息是最直接的錯(cuò)誤信息信息,所以是必須要捕獲并上報(bào)的。后面我們會(huì)用js去示范。
不同瀏覽器默認(rèn)可獲取的參數(shù)值:
寫(xiě)一個(gè)js報(bào)錯(cuò)的上報(bào)庫(kù)
既然知道了window.onerror的用法,為啥我們不來(lái)寫(xiě)一個(gè)js庫(kù)來(lái)監(jiān)控我們的前端js,廢話少說(shuō),寫(xiě)之。
實(shí)現(xiàn)思路:
1、收集window.onerror的五個(gè)參數(shù)
2、除了那五個(gè)參數(shù),可以增加自定義參數(shù)
3、發(fā)送到后臺(tái)服務(wù)器
我們暫且給我們的庫(kù)起名為 badJsReport
原理比較簡(jiǎn)單,代碼如下:
/** * Name: badJsReport.js * Version 1.1.0 * Author xianyulaodi * Address: https://github.com/xianyulaodi/badJsReport * Released on: December 22, 2016 */ ;(function(){ 'use strict'; if (window.badJsReport){ return window.badJsReport }; /* * 默認(rèn)上報(bào)的錯(cuò)誤信息 */ var defaults = { msg:'', //錯(cuò)誤的具體信息 url:'', //錯(cuò)誤所在的url line:'', //錯(cuò)誤所在的行 col:'', //錯(cuò)誤所在的列 error:'', //具體的error對(duì)象 }; /* *ajax封裝 */ function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.fail && options.fail(status); } } } if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //設(shè)置表單提交時(shí)的內(nèi)容類型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } /* *格式化參數(shù) */ function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".","")); return arr.join("&"); } /* * 合并對(duì)象,將配置的參數(shù)也一并上報(bào) */ function cloneObj(oldObj) { //復(fù)制對(duì)象方法 if (typeof(oldObj) != 'object') return oldObj; if (oldObj == null) return oldObj; var newObj = new Object(); for (var prop in oldObj) newObj[prop] = oldObj[prop]; return newObj; }; function extendObj() { //擴(kuò)展對(duì)象 var args = arguments; if (args.length < 2) {return;} var temp = cloneObj(args[0]); //調(diào)用復(fù)制對(duì)象方法 for (var n = 1,len=args.length; n <len; n++){ for (var index in args[n]) { temp[index] = args[n][index]; } } return temp; } /** * 核心代碼區(qū) **/ var badJsReport=function(params){ if(!params.url){return} window.onerror = function(msg,url,line,col,error){ //采用異步的方式,避免阻塞 setTimeout(function(){ //不一定所有瀏覽器都支持col參數(shù),如果不支持就用window.event來(lái)兼容 col = col || (window.event && window.event.errorCharacter) || 0; defaults.url = url; defaults.line = line; defaults.col = col; if (error && error.stack){ //如果瀏覽器有堆棧信息,直接使用 defaults.msg = error.stack.toString(); }else if (arguments.callee){ //嘗試通過(guò)callee拿堆棧信息 var ext = []; var fn = arguments.callee.caller; var floor = 3; //這里只拿三層堆棧信息 while (fn && (--floor>0)) { ext.push(fn.toString()); if (fn === fn.caller) { break;//如果有環(huán) } fn = fn.caller; } ext = ext.join(","); defaults.msg = error.stack.toString(); } // 合并上報(bào)的數(shù)據(jù),包括默認(rèn)上報(bào)的數(shù)據(jù)和自定義上報(bào)的數(shù)據(jù) var reportData=extendObj(params.data || {},defaults); // 把錯(cuò)誤信息發(fā)送給后臺(tái) ajax({ url: params.url, //請(qǐng)求地址 type: "POST", //請(qǐng)求方式 data: reportData, //請(qǐng)求參數(shù) dataType: "json", success: function (response, xml) { // 此處放成功后執(zhí)行的代碼 params.successCallBack&¶ms.successCallBack(response, xml); }, fail: function (status) { // 此處放失敗后執(zhí)行的代碼 params.failCallBack&¶ms.failCallBack(status); } }); },0); return true; //錯(cuò)誤不會(huì)console瀏覽器上,如需要,可將這樣注釋 }; } window.badJsReport=badJsReport; })(); /*=========================== badJsReport AMD Export ===========================*/ if (typeof(module) !== 'undefined'){ module.exports = window.badJsReport; } else if (typeof define === 'function' && define.amd) { define([], function () { 'use strict'; return window.badJsReport; }); }
我們封裝了原生ajax,還有將上報(bào)的參數(shù)對(duì)象合并。并暴露了一個(gè)全局方法 badJsReport
使用方法:
1、將badJsReport.js加載到其他的js之前
2、簡(jiǎn)單的使用方法:(這個(gè)執(zhí)行方法要放在其他代碼執(zhí)行之前)
badJsReport({ url:'http://www.baidu.com', //發(fā)送到后臺(tái)的url *必須 })
3、如果需要新增上報(bào)參數(shù),或者要知道發(fā)送給后臺(tái)的回調(diào)??梢杂孟旅娴姆椒?/p>
badJsReport({ url:'http://www.baidu.com', //發(fā)送到后臺(tái)的url *必須 data:{}, //自定義添加上報(bào)參數(shù),比如app版本,瀏覽器版本 -可省略 successCallBack:function(response, xml){ // 發(fā)送給后臺(tái)成功的回調(diào),-可省略 }, failCallBack:function(error){ // 發(fā)送給后臺(tái)失敗的回調(diào),-可省略 } })
注意點(diǎn):
1、對(duì)于跨域的JS資源,window.onerror拿不到詳細(xì)的信息,需要往資源的請(qǐng)求添加額外的頭部。
靜態(tài)資源請(qǐng)求需要加多一個(gè)Access-Control-Allow-Origin頭部,也就是需要后臺(tái)加一個(gè)Access-Control-Allow-Origin,同時(shí)script引入外鏈的標(biāo)簽需要加多一個(gè)crossorigin的屬性。這樣就可以獲取準(zhǔn)確的出錯(cuò)信息。
2、因?yàn)榇a的最后return true,所以如果有錯(cuò)誤信息,瀏覽器不會(huì)console出來(lái),如果需要瀏覽器console,可以注釋掉最后的return true
缺點(diǎn):
對(duì)于壓縮之后的代碼,我們得到錯(cuò)誤的信息,但是我們卻無(wú)法定位到錯(cuò)誤的行數(shù),比如jquery的源碼壓縮,總共才3行。這樣就很難定位到具體的地方了,因?yàn)橐恍杏泻芏嗪芏嗟拇a。
代碼我放到了github上:https://github.com/xianyulaodi/badJsReport
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
使用Bootstrap和Vue實(shí)現(xiàn)用戶信息的編輯刪除功能
這篇文章主要介紹了使用Bootstrap和Vue實(shí)現(xiàn)用戶信息的編輯刪除功能,需要的朋友可以參考下2017-10-10淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法,涉及javascript點(diǎn)擊按鈕載入頁(yè)面的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05javascript數(shù)組的一些常用方法詳細(xì)匯總
在JavaScript開(kāi)發(fā)中,數(shù)組的操作至關(guān)重要,本文詳細(xì)介紹了數(shù)組的常用方法,包括添加、刪除、查找、迭代、遍歷、排序和變換等功能,掌握這些方法,可以有效地處理和操作數(shù)組數(shù)據(jù),提高開(kāi)發(fā)效率和代碼的可維護(hù)性,需要的朋友可以參考下2024-09-09如何讓每個(gè)Http請(qǐng)求都自動(dòng)帶上token
這篇文章主要介紹了如何讓每個(gè)Http請(qǐng)求都自動(dòng)帶上token問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03js canvas實(shí)現(xiàn)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03