監(jiān)控微信小程序中的慢HTTP請(qǐng)求過程詳解
Fundebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請(qǐng)求錯(cuò)誤,在小程序中通過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í)的性能分析,可以說已經(jīng)夠用。
本文我們以一個(gè)天氣微信小程序為例(由bodekjan開發(fā)),來演示如何監(jiān)控慢請(qǐng)求。bmap-wx.js中的weather()函數(shù)調(diào)用百度地圖小程序 api 提供的接口來獲取天氣預(yù)報(bào)信息。
接入監(jiān)控
由于使用百度的 api,我們無法確認(rèn)該接口的穩(wěn)定性,可能有時(shí)候會(huì)特別慢,導(dǎo)致天氣信息顯示不出來。于是,我們使用 Fundebug 來監(jiān)控請(qǐng)求過慢的情況。接下來,我們來演示如何監(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來監(jiān)控超過特定時(shí)長(zhǎng)的請(qǐng)求,httpTimeout 類型為 Number,單位為毫秒(ms)。演示起見,我們將時(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,超過預(yù)設(shè)時(shí)間 200ms。
錯(cuò)誤詳情
該請(qǐng)求返回代碼 200,表明能夠正常獲取數(shù)據(jù)。點(diǎn)擊該條錯(cuò)誤,查看錯(cuò)誤詳情:
通過上方的統(tǒng)計(jì)數(shù)據(jù),我們可以知道獲取天氣信息的接口出現(xiàn)緩慢情況的趨勢(shì),影響的用戶數(shù)量,累計(jì)發(fā)生的次數(shù)。我們可以以此來評(píng)估是否需要優(yōu)化該接口,甚至替換成其它第三方接口來解決這個(gè)問題。
附加信息
因?yàn)榕渲昧?monitorHttpData,所以我們可以查看到請(qǐng)求 body 中的詳細(xì)數(shù)據(jù)。當(dāng)請(qǐng)求失敗的時(shí)候,有時(shí)候需要結(jié)合參數(shù)來分析失敗的原因。
另外,用戶行為數(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)客戶有陽光保險(xiǎn)、核桃編程、荔枝FM、掌門1對(duì)1、微脈、青團(tuán)社等眾多品牌企業(yè)。歡迎大家免費(fèi)試用!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序設(shè)置http請(qǐng)求的步驟詳解
- 微信小程序 http請(qǐng)求封裝詳解及實(shí)例代碼
- 微信小程序 封裝http請(qǐng)求實(shí)例詳解
- 微信小程序 http請(qǐng)求的session管理
- 微信小程序 http請(qǐng)求詳細(xì)介紹
- 微信小程序HTTP接口請(qǐng)求封裝的實(shí)現(xiàn)
- 微信小程序封裝的HTTP請(qǐng)求示例【附升級(jí)版】
- Fundebug支持監(jiān)控微信小程序HTTP請(qǐng)求錯(cuò)誤的方法
- 微信小程序HTTP接口請(qǐng)求封裝代碼實(shí)例
- 微信小程序HTTP請(qǐng)求從0到1封裝
相關(guān)文章
bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
這篇文章主要介紹了bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳,bootstrap fileinput插件對(duì)多種類型的文件提供文件預(yù)覽,并且提供了多選等功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript編寫檢測(cè)用戶所使用的瀏覽器的代碼示例
這篇文章主要介紹了JavaScript編寫檢測(cè)用戶所使用的瀏覽器的代碼示例,這樣就可以根據(jù)用戶的瀏覽狀態(tài)來調(diào)整桌面版移動(dòng)版或者兼容性的頁面,需要的朋友可以參考下2016-05-05webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10JS中DOM元素的attribute與property屬性示例詳解
這篇文章主要給大家介紹了關(guān)于JS中DOM元素的attribute與property屬性的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起看看吧2018-09-09