一蜒车、意義:
??JavaScript報(bào)錯(cuò)嚴(yán)重影響業(yè)務(wù)邏輯,比如點(diǎn)擊后js報(bào)錯(cuò)用戶將操作不了幔嗦,用戶會(huì)覺得卡死酿愧,渲染JS報(bào)錯(cuò)將導(dǎo)致用戶看到的頁(yè)面異常,所以JS報(bào)錯(cuò)后果也是很嚴(yán)重的邀泉。為了應(yīng)付用戶線上環(huán)境各種異常嬉挡,監(jiān)控JavaScript報(bào)錯(cuò)也是很有必要
二钝鸽、捕獲方法:
首先要明確一點(diǎn),所有錯(cuò)誤都需要被window.onerror接收庞钢,因?yàn)樵摲椒芙馕龀鲥e(cuò)誤消息拔恰、錯(cuò)誤文件、行基括、列仁连、錯(cuò)誤棧,通過這些信息為后面通過sourcemap還原源代碼有重要作用阱穗。
1饭冬、通過window.onerror捕獲JS事件隊(duì)列錯(cuò)誤
window.onerror = function (msg: string, file: string, line: number, column: number, err: Error) {
const stack = getStackMsg(err);
reportError({msg, file, line, column, stack});
return false;
};
2、通過window.onunhandledrejection捕獲Promise未捕獲的報(bào)錯(cuò)揪阶,并拋出
window.onunhandledrejection = function(event: PromiseRejectionEvent) {
if (event.reason instanceof Error) {
throw event.reason;
}
};
3昌抠、通過Vue.config.errorHandler捕獲vue項(xiàng)目報(bào)錯(cuò),并拋出
Vue.config.errorHandler = function (err: ErrorEvent) {
setTimeout(() => {
throw err;
});
}
三鲁僚、上報(bào)參數(shù):
window.onerror上報(bào)以下參數(shù):
??1炊苫、path: string // 頁(yè)面url
??2、msg: string // 錯(cuò)誤消息
??3冰沙、file: string // 錯(cuò)誤文件
??4侨艾、line: number // 錯(cuò)誤行
??5、column: number // 錯(cuò)誤列
??6拓挥、stack?: undefined|string // 錯(cuò)誤堆棧
后面根據(jù)錯(cuò)誤文件唠梨、行、列還原源代碼
更快捷更準(zhǔn)確接入前端監(jiān)控