前端代碼的錯誤日志收集了解一下

changfeng1050 發(fā)布于2019-08-26 11:59 / 2888人閱讀

摘要：前言開發(fā)應用程序過程中的一種常見的做法就是集中保存錯誤日志以便查找重要錯誤的原因就像數據庫和服務器都會定期寫入日志一樣在復雜的應用程序中我們同樣推薦你把錯誤也回寫到服務器換句話再說我們也可以將這些錯誤寫入到保存服務器端錯誤的地方只不過標明他

前言

開發(fā)web應用程序過程中的一種常見的做法,就是集中保存錯誤日志,以便查找重要錯誤的原因.
就像數據庫和服務器都會定期寫入日志一樣,在復雜的web應用程序中,我們同樣推薦你把JavaScript錯誤也回寫到服務器,換句話再說,我們也可以將這些錯誤寫入到保存服務器端錯誤的地方,只不過標明他們來自前端.從而把前端的錯誤集中起來,可以及大地方便前端開發(fā)者分析代碼.

具體操作 主要思想

后端需要提供一個接收錯誤信息的接口,把接收到的錯誤信息存放在一個日志文件中,比如 font-msg.log.
前端在比較可能會出現錯誤的地方用 try{}catch(err){} 語句來捕獲,然后通過一些可以發(fā)送請求的方法,把收集到的報錯信息發(fā)送到這個后端提供的日志接口.
這樣就得到了前端的報錯日志了,開發(fā)者可以經常去查看,分析自己代碼中的不足,優(yōu)化改善代碼.

代碼示例 前端代碼示例

前端代碼中,我們使用了Image對象來發(fā)送請求,這樣做非常靈活,主要原因如下:

所有瀏覽器都支持Image對象;

可以避免跨域限制,img的src屬性可以實現跨域訪問.

在記錄錯誤的過程中出問題的概率比較低.




    
    收集前端日志實例頁面
    


    日志收集學習

補充:
評論里有朋友建議使用window.onerror事件,我在這里引用一下JavaScript高級程序設計(第三版)的書中對這個事件的解釋:

任何沒有通過try-catch處理的錯誤都會觸發(fā)window對象的error事件,在任何web瀏覽器中,onerror事件處理程序都不會創(chuàng)建event對象,但它可以接收三個參數: 錯誤信息,錯誤所在的URL和行號.多數情況下,只有錯誤信息有用,因為URL只給出了文檔的位置,而行號所指的代碼既可能出自內部JavaScript代碼,也可能出自外部文件.
只要發(fā)生錯誤,無論是不是瀏覽器生成的,都會觸發(fā)error事件

window.onerror = function (message, url, line) {
    alert(message);
    return false;
}

通過返回false,這個函數實際就充當了整個文檔的try-catch語句,可以捕獲所有無代碼處理的運行錯誤.但是瀏覽器在使用這個事件處理錯誤的方式有明顯不同,在IE中,即使發(fā)生onerror事件,代碼仍然會正常執(zhí)行,所有變量和數據都將得到保留,因此能在onerror事件處理程序中訪問它們,但在firefox中,常規(guī)代碼會停止執(zhí)行,事件發(fā)生之前的所有變量和數據都將被銷毀,因此幾乎就無法判斷錯誤了,且另外window.onerror事件不能捕獲promise的異常錯誤信息.
所以我在這里使用的是try...catch...,但是我覺得具體的使用方法可以根據自己的業(yè)務需求來確定,我這里只是做一個示例,實際的實現途徑還有很多,但是萬法同宗.

后端代碼示例

這里我使用node寫了一個日志采集的接口,并將采集到的信息寫入日志文件.

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;

收集到的日志信息截圖:

更詳細的代碼: https://github.com/muzishuiji...

推薦閱讀:

談談前端異常捕獲與上報

評論區(qū)的朋友推薦的sentry的介紹

不知道你們是怎樣前端報錯信息的呢?如果你們有更好的采集方法,歡迎email(2510909248@qq.com)或者私信給我,愛分享的你最可愛^_^^_^

如果我的文章中有不足之處,歡迎批評指正~~

云服務器 GPU云服務器多臺服務器的日志收集日志收集、集群日志收集 webrtc的錯誤日志在哪里

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107974.html

前端錯誤日志采集上報

摘要：前端錯誤日志采集上報上報給后端分析錯誤日主要用于移動端各手機類型錯誤日志的收集分析業(yè)務背景在開發(fā)移動端項目，運營同學反饋了一個客戶手機上頁面白屏的問題此時說第一句話是，在我的手機上是正產的啊，可是問題就是存在，生產環(huán)境啊，需要怎么處 js-log-report 前端錯誤日志采集上報、上報給后端分析錯誤日、主要用于移動端各手機類型錯誤日志的收集分析 GitHub:js-log-repor...

AZmake 2019-08-22 18:12 評論0 收藏0
這么多監(jiān)控組件，總有一款適合你

摘要：典型實現不同的監(jiān)控模塊，側重于不同領域，有著不同的職責。指標收集方面，支持多樣化的組件將被優(yōu)先下使用。以上談了這么多，僅僅是聊了一下收集方面而已。更多文章，請移步微信公眾號《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...監(jiān)控是分布式系統(tǒng)的必備組件，能夠起到提前預警、問題排查、評估決策等功效，乃行走江湖、居家必備之良品。監(jiān)控系統(tǒng)概要功能劃分...

simon_chen 2019-08-16 13:52 評論0 收藏0
這么多監(jiān)控組件，總有一款適合你

摘要：典型實現不同的監(jiān)控模塊，側重于不同領域，有著不同的職責。指標收集方面，支持多樣化的組件將被優(yōu)先下使用。以上談了這么多，僅僅是聊了一下收集方面而已。更多文章，請移步微信公眾號《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...監(jiān)控是分布式系統(tǒng)的必備組件，能夠起到提前預警、問題排查、評估決策等功效，乃行走江湖、居家必備之良品。監(jiān)控系統(tǒng)概要功能劃分...

wpw 2019-05-28 17:12 評論0 收藏0
[ 好文分享 ] 美團酒店Node全棧開發(fā)實踐

摘要：我所在的美團酒店事業(yè)部去年月份成立，新的業(yè)務新的開發(fā)團隊，這一切使得我們的前后端分離推進的很徹底。日志監(jiān)控平臺日志監(jiān)控平臺是美團內部的一個日志收集系統(tǒng)，目前美團統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺也是以格式日志來收集。轉自：美團技術團隊作者：美團技術團隊分享理由：很好的分享，可見，基于Node的前后端分離的架構是越顯流行和重要，前端攻城獅們，No...

wangdai 2019-08-21 10:34 評論0 收藏0
前端異常監(jiān)控-看這篇就夠了

摘要：前端異常監(jiān)控如果是移除的流程，那么編程就一定是將放進去的流程。過濾掉運行時錯誤上報加載錯誤事件捕獲異常最新的規(guī)范中定義了事件用于全局捕獲對象沒有處理器時異常情況。前端異常監(jiān)控如果debug是移除bug的流程，那么編程就一定是將bug放進去的流程。如果沒有用戶反饋問題，那就代表我們的產品棒棒噠，對不對？主要內容 Web規(guī)范中相關前端異常異常按照捕獲方式分類異常的捕獲方式日志...

Aklman 2019-08-23 12:59 評論0 收藏0