最近在做一個前端監(jiān)控的js
如圖党瓮，一個大概的思路是這樣的翁逞。
圖片版
--------------------------------------------------------文本版
# 代碼異常處理
## 參考文章
### http://web.jobbole.com/93684/
### https://www.cnblogs.com/luozhihao/p/8635507.html
### https://segmentfault.com/a/1190000014672384
### https://juejin.im/post/5b5dcfb46fb9a04f8f37afbb
### http://www.reibang.com/p/fc622f8cff99
### https://juejin.im/post/5aaa93345188257bf550cbfd?utm_medium=fe&utm_source=weixinqun
* 比較完善
##try-catch異常處理
### 缺點
*1.無法識別語法錯誤
*2.無法處理異步操作發(fā)生的錯誤
###try{代碼塊}catch{處理方法}
## window.onerror異常處理
### 優(yōu)點
*1.可處理異步錯誤
### 缺點
*1.無法識別語法錯誤
*2.無法捕獲網(wǎng)絡(luò)異常的錯誤（404）
*3.靜態(tài)資源跨域無法捕獲到錯誤信息
* 解決方法
*1.標簽添加crossorigin=”anonymous”
*2.對應(yīng)服務(wù)器所有域可訪問
*4.代碼壓縮無法精確到位置
* 解決方法
*1.sourceMap
### 注意點
*1.寫在JS腳本前面
*2.需要返回true潦嘶，否則控制臺依舊顯示錯誤
### demoCode
*? ? ? ? window.onerror =function (msg, url, row, col, error) {
console.log(msg,? url,? row, col, error)
return true;
};
// 無message 方法
### vue
* dev
* webpack config 中 dev 配置? devTools 配置生成sourcemap? 即 #source-map
* build
* 可以正常獲取到錯誤內(nèi)容
## 重寫console.error
###message
* 錯誤信息
### stack
* 錯誤提示床佳，只取第一級錯誤信息
### window.console.error=function(error){let {message,stack} = error}
## 資源的異常
### img
* window.addEventListener('error',()=>{if(img){this.src = demo.png}})
### window.addEventListener('error',function(){})? ? 用這個方法監(jiān)聽圖片的異常怕品，onerror不能監(jiān)聽的到
## promise
### promise內(nèi)部發(fā)生的錯誤
* promise實例未書寫catch捕獲異常
* 導致try-catch和window.onerror不能發(fā)現(xiàn)異常
* 處理方法
*1.每個實例書寫catch捕獲異常處理
*2.添加promise全局異常捕獲事件 unhandlededrejection
* window.addEventListener('unhandledrejection',function(e){e.preventDefault() ajax })
## 框架異常處理
### vue
* errorHandler
* Vue.config.errorHandler=function (err, vm, info) {}
* 僅在 組件渲染期間和watch中自動觸發(fā)
* 建議在vue項目中峡钓，項目組員自己書寫
## 代碼壓縮后解析
### sourcemap
* https://www.npmjs.com/package/source-map/v/0.6.1#new-sourcemapconsumerrawsourcemap
### 版本
*0.6.1
* 由于0.7+之后使用了 WebAssembly 寫法，IE和360不支持夭委，故使用0.6.1版本幅狮。壓縮包可到git獲取
###sourceMap API
*SourceMapConsumer
* 具體可看npm 文檔
### 總結(jié)
* 代碼壓縮后解析，必須要有編譯出來的js的map文件株灸，具體可在壓縮的js最后一行可看到map文件路徑彪笼。在felog.js 中，邏輯是先取到 壓縮后的js文件的全名蚂且，然后拼接.map 字段配猫，再用ajax去請求 map文件回來，然后才通過SourceMapConsumer 分析map文件杏死，得出源文件和行數(shù)泵肄。
## 上報的內(nèi)容
###type
* string
*error
* window.onerror
* console.error
* promiseerror
* warn
* console.warn
* info
* console.info
###line
* string
###prj_id
* string
###url
* string
### brower_info
* string
###create_time
* date
###source
* string
###error_msg
* string
## 錯誤上報
###ajax
* 訪問量巨大的情況下，錯誤信息過多
* 設(shè)置采集率
*if(Math.random < x){ajax}
### 動態(tài)創(chuàng)建img
*function report(error) {
var reportUrl ='http://xxxx/report';
? ? new Image().src = reportUrl +'error=' + error;
}
## 成熟的系統(tǒng)
### BadJS
* 鵝廠封裝的window.onerror事件
* https://github.com/BetterJS
* 介紹
* http://slides.com/loskael/badjs/fullscreen#/
* 開源
### FdSafe
* 阿里
### JSTracker
* 淘寶
### ravenjs
* 國外
## 方法總結(jié)
### 使用window.onerror捕獲JS運行時錯誤
### 使用window.addEventListener('unhandledrejection')捕獲未處理的promise reject錯誤
### 重寫console.error捕獲console.error錯誤
###在跨域腳本上配置crossorigin="anonymous"捕獲跨域腳本錯誤
### window.addEventListener('error')捕獲資源加載錯誤淑翼。因為它也能捕獲js運行時錯誤腐巢，為避免重復上報js運行時錯誤，此時只有event.srcElement inatanceof HTMLScriptElement或HTMLLinkElement或HTMLImageElement時才上報
### 重寫window.XMLHttpRequest和window.fetch捕獲請求錯誤
