前端js錯誤日志收集


今天一個客戶說他們的一個同事用OPPO R11的手機訪問不了我們的項目,打開后一片空白,雖然后面發現你的手機網絡斷了,但是想起來畢竟手機端沒有調試的工具可以查看拋出的錯誤信息,方便我們追蹤問題,后端的大牛同事提示我們看看vconsole.js.寫這個js的大牛的github地址是:https://github.com/Tencent/vConsole

實現效果地址(可能時間久了就訪問不了,各位見諒):https://www.w3cways.com/demo/vconsole/

vConsole:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。

vConsole:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。

特性:

1. 查看 console 日志
2. 查看網絡請求
3. 手動執行 JS 命令行
4. 自定義插件

第一步:

推薦使用npm安裝vconsole.js:npm install vconsole

第二步:引用模塊

<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后點擊右下角 vConsole 按鈕即可查看到 log
</script>

第三步:

<html>
<head>
<script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'></script>
<script type="text/javascript">

window.vConsole = new window.VConsole();
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
console.log("錯誤信息:" , errorMessage);
console.log("出錯文件:" , scriptURI);
console.log("出錯行號:" , lineNumber);
console.log("出錯列號:" , columnNumber);
console.log("錯誤詳情:" , errorObj);
}
throw new Error("出錯了!");
</script>
</head>

<body>
<input type="button" value="查看消息" onclick="message()" />
</body>

</html>

詳細的教程參考:https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

后面一頓百度搜索.發現還有牛人封裝了提交到后端的js,也分享出來給大家看看.

github上:https://github.com/xianyulaodi/badJsReport

這位牛人封裝了原生ajax,還有將上報的參數對象合並。並暴露了一個全局方法 badJsReport

使用方法:

1、將badJsReport.js加載到其他的js之前

2、簡單的使用方法:(這個執行方法要放在其他代碼執行之前)

badJsReport({
url:'http://www.baidu.com', //發送到后台的url *必須
})
3、如果需要新增上報參數,或者要知道發送給后台的回調。可以用下面的方法

badJsReport({
url:'http://www.baidu.com', //發送到后台的url *必須
data:{}, //自定義添加上報參數,比如app版本,瀏覽器版本 -可省略
successCallBack:function(response, xml){
// 發送給后台成功的回調,-可省略
},
failCallBack:function(error){
// 發送給后台失敗的回調,-可省略
}
})

注意點:
1、對於跨域的JS資源,window.onerror拿不到詳細的信息,需要往資源的請求添加額外的頭部。靜態資源請求需要加多一個Access-Control-Allow-Origin頭部,也就是需要后台加一個Access-Control-Allow-Origin,同時script引入外鏈的標簽需要加多一個crossorigin的屬性。這樣就可以獲取准確的出錯信息。

2、因為代碼的最后return true,所以如果有錯誤信息,瀏覽器不會console出來,如果需要瀏覽器console,可以注釋掉最后的return true

 

無意之間:突然發現了這個網站:https://fundebug.com/監控平台.有條件的還是最好搭建自己的監控平台.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM