監控微信小程序中的慢HTTP請求

摘要： 請求時間太長，影響用戶體驗，使用 Fundebug 監控慢請求。

Fundebug 的微信小程序監控插件在 0.5.0 版本已經支持監控 HTTP 請求錯誤，在小程序中經過wx.request發起 HTTP 請求，若是請求失敗，會被捕獲並上報。時隔一年，微信小程序插件已經更新到 1.3.1, 並且提供了一個很是有用的功能，支持監控 HTTP 慢請求。對於輕量級的性能分析，能夠說已經夠用。

本文咱們以一個天氣微信小程序爲例(由bodekjan開發)，來演示如何監控慢請求。bmap-wx.js中的weather()函數調用百度地圖小程序 api 提供的接口來獲取天氣預報信息。

接入監控

因爲使用百度的 api，咱們沒法確認該接口的穩定性，可能有時候會特別慢，致使天氣信息顯示不出來。因而，咱們使用 Fundebug 來監控請求過慢的狀況。接下來，咱們來演示如何監控慢請求。註冊帳戶後，記得要在建立項目是選擇「微信小程序」這一項目類型。

根據指示完成接入流程：

在app.js頂部加入下面的代碼(記得將 apikey 替換成你本身的)：

var fundebug = require("./utils/fundebug.1.3.1.min.js");
fundebug.init({
    apikey: "YOUR-API-KEY",
    monitorMethodCall: true,
    monitorMethodArguments: true,
    monitorHttpData: true,
    setSystemInfo: true,
    setUserInfo: true,
    setLocation: true,
    httpTimeout: 200
});

雖然init()函數只要設置apikey便可使用，可是爲了最大程度發揮監控的威力，咱們不妨多設置一些監控選項。
微信小程序插件有不少的可配置項，因爲涉及到數據，默認處於關閉狀態。咱們能夠監控函數調用(monitorMethodCall)，以及函數調用的參數(monitorMethodArguments)，監控 HTTP 請求的 Body 中的數據(monitorHttpData)，獲取系統信息(setSystemInfo)、用戶信息(setUserInfo)、地理位置(setLocation)。

監控慢請求

最後，最重要的一步，配置httpTimeout來監控超過特定時長的請求，httpTimeout 類型爲 Number，單位爲毫秒(ms)。演示起見，咱們將時間設置爲 200 毫秒。

在微信開發者工具內運行代碼，Fundebug 立馬收到報錯。小程序發往https://api.map.baidu.com/telematics/v3/weather接口的請求時長爲 571ms，超過預設時間 200ms。

錯誤詳情

該請求返回代碼 200，代表可以正常獲取數據。點擊該條錯誤，查看錯誤詳情：

經過上方的統計數據，咱們能夠知道獲取天氣信息的接口出現緩慢狀況的趨勢，影響的用戶數量，累計發生的次數。咱們能夠以此來評估是否須要優化該接口，甚至替換成其它第三方接口來解決這個問題。

附加信息

由於配置了 monitorHttpData，因此咱們能夠查看到請求 body 中的詳細數據。當請求失敗的時候，有時候須要結合參數來分析失敗的緣由。

另外，用戶行爲數據記錄了小程序運行的詳細情況，特別是函數的調用序列，對於理解出錯前程序的執行邏輯頗有幫助：

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對一、微脈、青團社等衆多品牌企業。歡迎你們免費試用！

版權聲明

轉載時請註明做者 Fundebug以及本文地址：

https://blog.fundebug.com/2019/06/27/monitor-httptimeout-in-weather-miniapp/