資訊專(zhuān)欄INFORMATION COLUMN
摘要：前言開(kāi)發(fā)應(yīng)用程序過(guò)程中的一種常見(jiàn)的做法就是集中保存錯(cuò)誤日志以便查找重要錯(cuò)誤的原因就像數(shù)據(jù)庫(kù)和服務(wù)器都會(huì)定期寫(xiě)入日志一樣在復(fù)雜的應(yīng)用程序中我們同樣推薦你把錯(cuò)誤也回寫(xiě)到服務(wù)器換句話再說(shuō)我們也可以將這些錯(cuò)誤寫(xiě)入到保存服務(wù)器端錯(cuò)誤的地方只不過(guò)標(biāo)明他
前言
開(kāi)發(fā)web應(yīng)用程序過(guò)程中的一種常見(jiàn)的做法,就是集中保存錯(cuò)誤日志,以便查找重要錯(cuò)誤的原因.
就像數(shù)據(jù)庫(kù)和服務(wù)器都會(huì)定期寫(xiě)入日志一樣,在復(fù)雜的web應(yīng)用程序中,我們同樣推薦你把JavaScript錯(cuò)誤也回寫(xiě)到服務(wù)器,換句話再說(shuō),我們也可以將這些錯(cuò)誤寫(xiě)入到保存服務(wù)器端錯(cuò)誤的地方,只不過(guò)標(biāo)明他們來(lái)自前端.從而把前端的錯(cuò)誤集中起來(lái),可以及大地方便前端開(kāi)發(fā)者分析代碼.
后端需要提供一個(gè)接收錯(cuò)誤信息的接口,把接收到的錯(cuò)誤信息存放在一個(gè)日志文件中,比如 font-msg.log.
前端在比較可能會(huì)出現(xiàn)錯(cuò)誤的地方用 try{}catch(err){} 語(yǔ)句來(lái)捕獲,然后通過(guò)一些可以發(fā)送請(qǐng)求的方法,把收集到的報(bào)錯(cuò)信息發(fā)送到這個(gè)后端提供的日志接口.
這樣就得到了前端的報(bào)錯(cuò)日志了,開(kāi)發(fā)者可以經(jīng)常去查看,分析自己代碼中的不足,優(yōu)化改善代碼.
前端代碼中,我們使用了Image對(duì)象來(lái)發(fā)送請(qǐng)求,這樣做非常靈活,主要原因如下:
所有瀏覽器都支持Image對(duì)象;
可以避免跨域限制,img的src屬性可以實(shí)現(xiàn)跨域訪問(wèn).
在記錄錯(cuò)誤的過(guò)程中出問(wèn)題的概率比較低.
收集前端日志實(shí)例頁(yè)面
日志收集學(xué)習(xí)
補(bǔ)充:
評(píng)論里有朋友建議使用window.onerror事件,我在這里引用一下JavaScript高級(jí)程序設(shè)計(jì)(第三版)的書(shū)中對(duì)這個(gè)事件的解釋:
任何沒(méi)有通過(guò)try-catch處理的錯(cuò)誤都會(huì)觸發(fā)window對(duì)象的error事件,在任何web瀏覽器中,onerror事件處理程序都不會(huì)創(chuàng)建event對(duì)象,但它可以接收三個(gè)參數(shù): 錯(cuò)誤信息,錯(cuò)誤所在的URL和行號(hào).多數(shù)情況下,只有錯(cuò)誤信息有用,因?yàn)閁RL只給出了文檔的位置,而行號(hào)所指的代碼既可能出自?xún)?nèi)部JavaScript代碼,也可能出自外部文件.
只要發(fā)生錯(cuò)誤,無(wú)論是不是瀏覽器生成的,都會(huì)觸發(fā)error事件
window.onerror = function (message, url, line) {
alert(message);
return false;
}
通過(guò)返回false,這個(gè)函數(shù)實(shí)際就充當(dāng)了整個(gè)文檔的try-catch語(yǔ)句,可以捕獲所有無(wú)代碼處理的運(yùn)行錯(cuò)誤.但是瀏覽器在使用這個(gè)事件處理錯(cuò)誤的方式有明顯不同,在IE中,即使發(fā)生onerror事件,代碼仍然會(huì)正常執(zhí)行,所有變量和數(shù)據(jù)都將得到保留,因此能在onerror事件處理程序中訪問(wèn)它們,但在firefox中,常規(guī)代碼會(huì)停止執(zhí)行,事件發(fā)生之前的所有變量和數(shù)據(jù)都將被銷(xiāo)毀,因此幾乎就無(wú)法判斷錯(cuò)誤了,且另外window.onerror事件不能捕獲promise的異常錯(cuò)誤信息.后端代碼示例
所以我在這里使用的是try...catch...,但是我覺(jué)得具體的使用方法可以根據(jù)自己的業(yè)務(wù)需求來(lái)確定,我這里只是做一個(gè)示例,實(shí)際的實(shí)現(xiàn)途徑還有很多,但是萬(wàn)法同宗.
這里我使用node寫(xiě)了一個(gè)日志采集的接口,并將采集到的信息寫(xiě)入日志文件.
app.js(主入口文件):
const Koa = require("koa");
const app = new Koa();
const router = require("./router");
const axios = require("axios")
app.use(router.routes());
app.use(router.allowedMethods());
app.on("error", function (err, ctx) {
console.log(err)
})
app.listen(4000, function (ctx) {
console.log("i am listening");
})
router/index.js(路由入口文件):
const koaRouter = require("koa-router");
const router = new koaRouter();
const log4js = require("log4js");
var config = {
"replaceConsole": true,
"appenders": {
"stdout": {
"type": "stdout"
},
"req": {
"type": "dateFile",
"filename": "logs/reqlog/",
"pattern": "req-yyyy-MM-dd.log",
"alwaysIncludePattern": true
},
"err": {
"type": "dateFile",
"filename": "logs/errlog/",
"pattern": "err-yyyy-MM-dd.log",
"alwaysIncludePattern": true
},
"oth": {
"type": "dateFile",
"filename": "logs/othlog/",
"pattern": "oth-yyyy-MM-dd.log",
"alwaysIncludePattern": true
}
},
"categories": {
"default": {
"appenders": ["stdout", "req"],
"level": "debug"
},
"err": {
"appenders": ["stdout", "err"],
"level": "error"
},
"oth": {
"appenders": ["stdout", "oth"],
"level": "info"
}
}
}
log4js.configure(config);
const reqLogger = log4js.getLogger();
const errLogger = log4js.getLogger("err");
const infoLogger = log4js.getLogger("oth");
router.get("/postMessage", async(ctx, next) => {
console.log(ctx.query);
infoLogger.info(ctx.query.sev + "--" + ctx.query.msg);
ctx.body = {
msg: "i get it",
code: 200
};
return next();
})
module.exports = router;
收集到的日志信息截圖:
更詳細(xì)的代碼: https://github.com/muzishuiji...
推薦閱讀:
<
談?wù)勄岸水惓２东@與上報(bào)
評(píng)論區(qū)的朋友推薦的sentry的介紹
不知道你們是怎樣前端報(bào)錯(cuò)信息的呢?如果你們有更好的采集方法,歡迎email([email protected])或者私信給我,愛(ài)分享的你最可愛(ài)^_^^_^
如果我的文章中有不足之處,歡迎批評(píng)指正~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107974.html
摘要：前端錯(cuò)誤日志采集上報(bào)上報(bào)給后端分析錯(cuò)誤日主要用于移動(dòng)端各手機(jī)類(lèi)型錯(cuò)誤日志的收集分析業(yè)務(wù)背景在開(kāi)發(fā)移動(dòng)端項(xiàng)目，運(yùn)營(yíng)同學(xué)反饋了一個(gè)客戶(hù)手機(jī)上頁(yè)面白屏的問(wèn)題此時(shí)說(shuō)第一句話是，在我的手機(jī)上是正產(chǎn)的啊，可是問(wèn)題就是存在，生產(chǎn)環(huán)境啊，需要怎么處 js-log-report 前端錯(cuò)誤日志采集上報(bào)、上報(bào)給后端分析錯(cuò)誤日、主要用于移動(dòng)端各手機(jī)類(lèi)型錯(cuò)誤日志的收集分析 GitHub:js-log-repor...
摘要：典型實(shí)現(xiàn)不同的監(jiān)控模塊，側(cè)重于不同領(lǐng)域，有著不同的職責(zé)。指標(biāo)收集方面，支持多樣化的組件將被優(yōu)先下使用。以上談了這么多，僅僅是聊了一下收集方面而已。 更多文章，請(qǐng)移步微信公眾號(hào)《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...監(jiān)控是分布式系統(tǒng)的必備組件，能夠起到提前預(yù)警、問(wèn)題排查、評(píng)估決策等功效，乃行走江湖、居家必備之良品。 監(jiān)控系統(tǒng)概要 功能劃分...
摘要：典型實(shí)現(xiàn)不同的監(jiān)控模塊，側(cè)重于不同領(lǐng)域，有著不同的職責(zé)。指標(biāo)收集方面，支持多樣化的組件將被優(yōu)先下使用。以上談了這么多，僅僅是聊了一下收集方面而已。 更多文章，請(qǐng)移步微信公眾號(hào)《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...監(jiān)控是分布式系統(tǒng)的必備組件，能夠起到提前預(yù)警、問(wèn)題排查、評(píng)估決策等功效，乃行走江湖、居家必備之良品。 監(jiān)控系統(tǒng)概要 功能劃分...
摘要：我所在的美團(tuán)酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開(kāi)發(fā)團(tuán)隊(duì)，這一切使得我們的前后端分離推進(jìn)的很徹底。日志監(jiān)控平臺(tái)日志監(jiān)控平臺(tái)是美團(tuán)內(nèi)部的一個(gè)日志收集系統(tǒng)，目前美團(tuán)統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺(tái)也是以格式日志來(lái)收集。 轉(zhuǎn)自：美團(tuán)技術(shù)團(tuán)隊(duì) 作者：美團(tuán)技術(shù)團(tuán)隊(duì) 分享理由：很好的分享，可見(jiàn)，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...
摘要：前端異常監(jiān)控如果是移除的流程，那么編程就一定是將放進(jìn)去的流程。過(guò)濾掉運(yùn)行時(shí)錯(cuò)誤上報(bào)加載錯(cuò)誤事件捕獲異常最新的規(guī)范中定義了事件用于全局捕獲對(duì)象沒(méi)有處理器時(shí)異常情況。 前端異常監(jiān)控 如果debug是移除bug的流程，那么編程就一定是將bug放進(jìn)去的流程。如果沒(méi)有用戶(hù)反饋問(wèn)題，那就代表我們的產(chǎn)品棒棒噠，對(duì)不對(duì)？ 主要內(nèi)容 Web規(guī)范中相關(guān)前端異常 異常按照捕獲方式分類(lèi) 異常的捕獲方式 日志...
閱讀 2186·2021-11-25 09:43
閱讀 2274·2021-11-24 09:39
閱讀 1588·2021-11-22 12:02
閱讀 3001·2021-11-17 09:33
閱讀 3425·2021-11-15 11:38
閱讀 2780·2021-10-13 09:40
閱讀 1084·2021-09-22 15:41
閱讀 1697·2019-08-30 10:58
