用Fundebug插件記錄網絡請求異常

時間 2019-11-08

原文原文鏈接

在服務端，無論咱們使用Node.js、Java、PHP仍是Python等等，都會用日誌以文本的形式記錄請求以及報錯信息。這個對於後端作過後分析是頗有用的。javascript

另外一方面，前端有時候出問題實際上是由於後端接口報錯，返回數據異常致使。而實際上，前端纔是用戶直接觸及的端，因此出了問題，首先是在前端體現出來，首先也是找前端。html

爲了更好地定位問題是前端代碼仍是接口問題，在這裏推薦使用Fundebug的前端JavaScript監控插件。該插件從0.1.0以後，就開始支持HTTP請求錯誤的監控。前端

例子

爲了測試，我寫一個簡單的例子。沒有用到任何複雜的框架，就是一個簡單的HTML加上網絡請求的JS。java

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test HTTP Request</title>
</head>
<body>
    <h1>This is a test for HTTP request error !</h1>
    <button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest() {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "http://127.0.0.1:8080/example/");
    oReq.send();
}
</script>
</html>

而後，在Fundebug建立一個JS監控項目，並拷貝接入代碼：npm

完整代碼以下所示：小程序

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test HTTP Request</title>
</head>
<body>
    <h1>This is a test for HTTP request error !</h1>
    <button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest() {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", "http://127.0.0.1:8080/example/");
    oReq.send();
}
</script>
<script src="https://js.fundebug.cn/fundebug.1.0.3.min.js"
        apikey="YOUR-API-KEY"></script>
</html>

使用http-server命令直接運行(推薦小技巧：使用npm install -g http-server安裝一個簡單的服務器。)，在瀏覽器輸入地址http://127.0.0.1:8080訪問該頁面。後端

點擊頁面上的click按鈕，就會觸發這個錯誤。在Fundebug的控制檯能夠看到報錯信息，以下所示：微信小程序

點擊該錯誤，能夠查看報錯詳情。一個http的get請求訪問http://127.0.0.1:8080/example/，而後返回404。固然，http的請求錯誤類型有不少，不只能夠抓404，什麼401啊，403啊，500啊等等都能抓過來。api

另外，經過用戶行爲也能夠很好地看到觸發報錯的過程：跨域

跨域問題

若是訪問的是非同源的請求，那麼報錯會拿不到狀態碼，也就是說status不會是404，而是0。這個比較蛋疼！

總結

監控HTTP請求錯誤有什麼好處？

第一時間發現HTTP請求出現情況；
及時告知後端服務器出了問題，快速應對；
分析前端其它bug的時候多了一份信息參考；
用戶反饋服務沒法使用的時候，能夠快速知道問題緣由。

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！