摘要： 請(qǐng)求時(shí)間太長(zhǎng)，影響用戶體驗(yàn)，使用 Fundebug 監(jiān)控慢請(qǐng)求。

Fundebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請(qǐng)求錯(cuò)誤，在小程序中通過(guò)wx.request發(fā)起 HTTP 請(qǐng)求，如果請(qǐng)求失敗，會(huì)被捕獲并上報(bào)。時(shí)隔一年，微信小程序插件已經(jīng)更新到 1.3.1, 而且提供了一個(gè)非常有用的功能，支持監(jiān)控 HTTP 慢請(qǐng)求。對(duì)于輕量級(jí)的性能分析，可以說(shuō)已經(jīng)夠用。

本文我們以一個(gè)天氣微信小程序為例(由bodekjan開發(fā))，來(lái)演示如何監(jiān)控慢請(qǐng)求。bmap-wx.js中的weather()函數(shù)調(diào)用百度地圖小程序 api 提供的接口來(lái)獲取天氣預(yù)報(bào)信息。

接入監(jiān)控

由于使用百度的 api，我們無(wú)法確認(rèn)該接口的穩(wěn)定性，可能有時(shí)候會(huì)特別慢，導(dǎo)致天氣信息顯示不出來(lái)。于是，我們使用 Fundebug 來(lái)監(jiān)控請(qǐng)求過(guò)慢的情況。接下來(lái)，我們來(lái)演示如何監(jiān)控慢請(qǐng)求。注冊(cè)賬戶后，記得要在創(chuàng)建項(xiàng)目是選擇“微信小程序”這一項(xiàng)目類型。

根據(jù)指示完成接入流程：

在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()函數(shù)只要設(shè)置apikey即可使用，但是為了最大程度發(fā)揮監(jiān)控的威力，我們不妨多設(shè)置一些監(jiān)控選項(xiàng)。
微信小程序插件有很多的可配置項(xiàng)，由于涉及到數(shù)據(jù)，默認(rèn)處于關(guān)閉狀態(tài)。我們可以監(jiān)控函數(shù)調(diào)用(monitorMethodCall)，以及函數(shù)調(diào)用的參數(shù)(monitorMethodArguments)，監(jiān)控 HTTP 請(qǐng)求的 Body 中的數(shù)據(jù)(monitorHttpData)，獲取系統(tǒng)信息(setSystemInfo)、用戶信息(setUserInfo)、地理位置(setLocation)。

監(jiān)控慢請(qǐng)求

最后，最重要的一步，配置httpTimeout來(lái)監(jiān)控超過(guò)特定時(shí)長(zhǎng)的請(qǐng)求，httpTimeout 類型為 Number，單位為毫秒(ms)。演示起見(jiàn)，我們將時(shí)間設(shè)置為 200 毫秒。

在微信開發(fā)者工具內(nèi)運(yùn)行代碼，F(xiàn)undebug 立馬收到報(bào)錯(cuò)。小程序發(fā)往https://api.map.baidu.com/telematics/v3/weather接口的請(qǐng)求時(shí)長(zhǎng)為 571ms，超過(guò)預(yù)設(shè)時(shí)間 200ms。

錯(cuò)誤詳情

該請(qǐng)求返回代碼 200，表明能夠正常獲取數(shù)據(jù)。點(diǎn)擊該條錯(cuò)誤，查看錯(cuò)誤詳情：

通過(guò)上方的統(tǒng)計(jì)數(shù)據(jù)，我們可以知道獲取天氣信息的接口出現(xiàn)緩慢情況的趨勢(shì)，影響的用戶數(shù)量，累計(jì)發(fā)生的次數(shù)。我們可以以此來(lái)評(píng)估是否需要優(yōu)化該接口，甚至替換成其它第三方接口來(lái)解決這個(gè)問(wèn)題。

附加信息

因?yàn)榕渲昧?monitorHttpData，所以我們可以查看到請(qǐng)求 body 中的詳細(xì)數(shù)據(jù)。當(dāng)請(qǐng)求失敗的時(shí)候，有時(shí)候需要結(jié)合參數(shù)來(lái)分析失敗的原因。

另外，用戶行為數(shù)據(jù)記錄了小程序運(yùn)行的詳細(xì)狀況，特別是函數(shù)的調(diào)用序列，對(duì)于理解出錯(cuò)前程序的執(zhí)行邏輯很有幫助：

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有陽(yáng)光保險(xiǎn)、核桃編程、荔枝FM、掌門1對(duì)1、微脈、青團(tuán)社等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者 Fundebug以及本文地址：

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