原文鏈接:https://dsx2016.com/?p=991
微信公衆號:大師兄2016
場景
微信公衆號H5上傳照片的時候前端進行壓縮後上傳
由於使用canvas轉blob流的兼容性問題,導致如ios 10.0系統等出現異常
表現爲提交按鈕一直處理提交中,既沒有返回錯誤提示,也沒有表示完成,卡在那裏沒反應
難點
如果是本地測試還好,能夠針對性的調試和兼容
但是上述問題都是基於龐大的用戶基數暴露在線上
同時因爲涉及到敏感信息和用戶反饋的積極性,導致很難排查問題,只能瞭解到機型等信息
也因爲涉及到文件流體積較大,反饋時間比較長,受網速等影響,用戶可能等到一半就不等了,以爲有問題
運營既沒有反饋60s的timeout 吐司提示,後臺也說沒有看到錯誤日誌,沒有用戶的錄屏截圖,無法獲取關鍵信息
但是因爲前端是表現層,圖片無法上傳是比較嚴重的現象,這種場景下,連用戶是否真正發起http請求都不能完全確定
改進
原先是隻提交canvas的blob流,在遇到兼容等異常問題時,無法提交圖片等
做了容錯處理後,在點擊提交時,如果檢測到沒有壓縮後的blob流,則上傳選擇照片時的源file(雖然沒有壓縮但好過上傳失敗)
但是僅此一點仍然無法很好的解決問題,因爲上傳時間過長,本身就是一種問題
如果證明前端已經發起了http請求,並且在超時前給用戶足夠明顯的反饋信息呢?
同時也是給自己排查信息的時候,瞭解真正的網速和錯誤反饋等信息.
那就是設置進度條,最好是帶有數值的進度條,這樣網速快慢,上傳進度一目瞭解.
思考
容錯處理
在使用htmlcanvas的插件的時候,文檔上並沒有catch的容錯處理,所以下意識的忽略了錯誤的場景.
後來在處理異常的時候,監聽文件最後的文件流file或者blob是否存在,存在則提交對應的數據.
把try catch也使用了,因爲沒有埋點上報,只能儘可能的考慮錯誤的場景
文件進度
本意是打算看看axios提供的方法有沒有可以定位http已經發起請求的功能
然後看到axios本身就有提供文件上傳下載的進度值方法,進度有值,本身就代表請求中
其實迴歸到產品原型設計,在文件上傳和下載的地方,最好有應該有當前進度提示,無論是數值還是進度條
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}
// `onDownloadProgress` allows handling of progress events for downloads
// browser only
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}