資訊專欄INFORMATION COLUMN
摘要：前言前段時(shí)間做項(xiàng)目的時(shí)候，發(fā)布功能的時(shí)候，本地是好的，測試是好的，正式也是好的，但是客戶打開正式的時(shí)候白屏了，把軟件刪除了，重新打開了又好了，但是不能總是讓用戶去刪除軟件又重新下。所以弄了一個(gè)簡單的前段監(jiān)控。
前言
前段時(shí)間做項(xiàng)目的時(shí)候，發(fā)布功能的時(shí)候，本地是好的，測試是好的，正式也是好的，但是客戶打開正式的時(shí)候白屏了，把軟件刪除了，重新打開了又好了，但是不能總是讓用戶去刪除軟件又重新下。所以弄了一個(gè)簡單的前段監(jiān)控。
window提供了一個(gè)監(jiān)聽頁面錯(cuò)誤的方法，具體代碼如下
window.onerror = (errorMessage, scriptURI, lineNo, columnNo, error) => {
sendError({ errorMessage, scriptURI, lineNo, columnNo, error,hash:location.href}); //發(fā)送ajax
};
參數(shù)
errorMessage 異常信息
scriptURI 異常文件路徑
lineNo 異常行號(hào)
columnNo 異常列號(hào)
error 異常堆棧信息
hash 當(dāng)前頁面鏈接
還可以根據(jù)需求添加更多信息，比如當(dāng)前時(shí)間，瀏覽器版本，電腦類型（window or mac） 瀏覽器類型（谷歌 ie 之類），還可以記錄是pc或者移動(dòng)端，移動(dòng)端又可以增加手機(jī)類型，手機(jī)網(wǎng)絡(luò)，來排查問題是出自哪里。
優(yōu)化(性能考慮)前端報(bào)錯(cuò)有可能會(huì)一直報(bào)錯(cuò)，然后一直在發(fā)送請求給后端，然后就會(huì)浪費(fèi)大量帶寬，所以我們可以先放在本地，然后頁面注銷的時(shí)候把之前收集的消息全部一次性發(fā)送給后端,具體代碼如下:
window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
console.log("errorMessage: " + errorMessage); // 異常信息
console.log("scriptURI: " + scriptURI); // 異常文件路徑
console.log("lineNo: " + lineNo); // 異常行號(hào)
console.log("columnNo: " + columnNo); // 異常列號(hào)
console.log("error: " + error); // 異常堆棧信息
let errorInfo = {
errorMessage,
scriptURI,
lineNo,
columnNo,
error,
time: new Date(),
};
if (localStorage.getItem("errorLog")) { //檢查本地是否有錯(cuò)誤日志
let errorLog = JSON.parse(localStorage.getItem("errorLog"));
errorLog.push(errorInfo);
} else {
localStorage.setItem("errorLog", JSON.stringify([errorInfo]));
}
};
window.addEventListener( //在頁面注銷時(shí)候檢查是否有錯(cuò)誤日志，如果有上傳
"unload",
() => {
if (localStorage.getItem("errorLog")) { //
localStorage.removeItem("errorLog")
//ajax 上傳
}
},
false
);
后言
這樣一個(gè)監(jiān)控頁面錯(cuò)誤日志的功能就起來了,代碼地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95407.html
摘要：日志規(guī)范一般前端開發(fā)同學(xué)，對(duì)日志其實(shí)不太敏感，畢竟前端大多數(shù)情況下，不太關(guān)心日志。本文主要梳理了目前我們團(tuán)隊(duì)在開發(fā)中日志方面存在的問題，以及通過統(tǒng)一日志規(guī)范，希望達(dá)到什么樣的效果。日志格式字段日志格式統(tǒng)一采用，便于解析處理。nodejs 日志規(guī)范 一般前端開發(fā)同學(xué)，對(duì)日志其實(shí)不太敏感，畢竟前端大多數(shù)情況下，不太關(guān)心日志。即使有，也可能調(diào)用一些第三方的統(tǒng)計(jì)，比如百度統(tǒng)計(jì)或者別的等。在 Node...
摘要：還可以初步判斷出問題的原因是異常導(dǎo)致還是突增的壓力所致。通過面板配置的服務(wù)調(diào)用量和業(yè)務(wù)進(jìn)出量，排除上下游問題，定位出問題的模塊。 這里所說的六兄弟只指ELK套件（ElasticSearch+Logstash+Kibana）以及TIG套件（Telegraf+InfluxDb+Grafana）。 showImg(https://segmentfault.com/img/bVbhS81?w=...
摘要：前端異常監(jiān)控如果是移除的流程，那么編程就一定是將放進(jìn)去的流程。過濾掉運(yùn)行時(shí)錯(cuò)誤上報(bào)加載錯(cuò)誤事件捕獲異常最新的規(guī)范中定義了事件用于全局捕獲對(duì)象沒有處理器時(shí)異常情況。 前端異常監(jiān)控 如果debug是移除bug的流程，那么編程就一定是將bug放進(jìn)去的流程。如果沒有用戶反饋問題，那就代表我們的產(chǎn)品棒棒噠，對(duì)不對(duì)？ 主要內(nèi)容 Web規(guī)范中相關(guān)前端異常 異常按照捕獲方式分類 異常的捕獲方式 日志...
閱讀 1701·2021-09-26 09:55
閱讀 1443·2021-09-23 11:22
閱讀 2811·2021-09-06 15:02
閱讀 2711·2021-09-01 11:43
閱讀 4071·2021-08-27 13:10
閱讀 3747·2021-08-12 13:24
閱讀 2125·2019-08-30 12:56
閱讀 3056·2019-08-30 11:22
