• JSError 常見(jiàn)錯(cuò)誤處理
  • 開(kāi)發(fā)者 JSError 問(wèn)題排查流程
    • 小程序執(zhí)行環(huán)境的限制
    • 如何查看并分析 JSError
    • 如何區(qū)分是業(yè)務(wù)問(wèn)題 or 小程序框架問(wèn)題
    • 如果為小程序框架側(cè)問(wèn)題，該如何反饋？
  • 應(yīng)用 JSError 的小程序案例
  • 常見(jiàn)問(wèn)題
    • Q：如何上傳 sourcemap 呢？
    • Q：有些 error 信息看不懂？
    • Q：如何根據(jù)錯(cuò)誤堆棧查看源碼？
    • Q：為什么有時(shí)候還原不出源碼？
    • Q：沒(méi)有數(shù)據(jù)顯示是什么情況？
    • Q：異常解決方案有哪些？

JSError 常見(jiàn)錯(cuò)誤處理

開(kāi)發(fā)者 JSError 問(wèn)題排查流程

小程序執(zhí)行環(huán)境的限制

與傳統(tǒng)的網(wǎng)頁(yè)開(kāi)發(fā)不同，小程序的執(zhí)行環(huán)境一定程度上限制了開(kāi)發(fā)者對(duì)代碼運(yùn)行時(shí)信息的把握。

開(kāi)發(fā)者工具的執(zhí)行環(huán)境只是對(duì)真機(jī)環(huán)境的模擬，目前還不能做到完全代表真機(jī)表現(xiàn)，因此在開(kāi)發(fā)測(cè)試階段開(kāi)發(fā)者很難做到讓測(cè)試用例完全覆蓋所有場(chǎng)景和某些小概率時(shí)序問(wèn)題。

再優(yōu)秀的開(kāi)發(fā)者也無(wú)法保證線上的代碼完全不出錯(cuò)，重要的是，當(dāng)錯(cuò)誤真正發(fā)生的時(shí)候，開(kāi)發(fā)者能夠獲取到足夠的信息，定位問(wèn)題、分析問(wèn)題、解決問(wèn)題，從而提升小程序代碼的穩(wěn)定性。

與開(kāi)發(fā)者工具和真機(jī)調(diào)試工具不同，運(yùn)維中心內(nèi)的 JSError 數(shù)據(jù)代表著絕對(duì)真實(shí)的線上小程序質(zhì)量，是唯一能夠準(zhǔn)確衡量業(yè)務(wù)代碼的穩(wěn)定性的指標(biāo)。

如何查看并分析 JSError

錯(cuò)誤信息是從哪里收集來(lái)的？
小程序底層框架捕獲到錯(cuò)誤對(duì)象后，會(huì)將原始錯(cuò)誤堆棧和經(jīng)過(guò)框架包裝后的錯(cuò)誤 message 上報(bào)到開(kāi)發(fā)者運(yùn)維平臺(tái)，幫助開(kāi)發(fā)者定位和排查問(wèn)題。

錯(cuò)誤對(duì)象的組成：Error = message + stack。

能夠協(xié)助錯(cuò)誤分析的其他信息：錯(cuò)誤發(fā)生時(shí)間點(diǎn)、錯(cuò)誤量級(jí)，影響用戶數(shù)，swan 版本。

錯(cuò)誤堆棧：是能夠定位問(wèn)題的最直觀的信息。

原始的錯(cuò)誤堆棧中包含著代碼崩潰時(shí)的函數(shù)調(diào)用棧信息，利用這些線上代碼的調(diào)用信息，結(jié)合小程序代碼編譯時(shí)產(chǎn)出的 sourcemap，開(kāi)發(fā)者就可以精準(zhǔn)的還原出代碼結(jié)構(gòu)，并定位到發(fā)生錯(cuò)誤的那一行代碼，讓線上問(wèn)題的排查變得像本地開(kāi)發(fā)調(diào)試時(shí)一樣簡(jiǎn)單。

對(duì)于能夠明確為開(kāi)發(fā)者業(yè)務(wù)代碼運(yùn)行時(shí)引起的問(wèn)題，開(kāi)發(fā)者可點(diǎn)擊 JSError 右側(cè)的詳情按鈕，查看錯(cuò)誤詳細(xì)堆棧并定位錯(cuò)誤發(fā)生位置的源碼，此類問(wèn)題開(kāi)發(fā)者可以直接定位到小程序源碼中發(fā)生錯(cuò)誤的那一行代碼，結(jié)合錯(cuò)誤 message 和實(shí)際業(yè)務(wù)代碼中可能存在的問(wèn)題對(duì)錯(cuò)誤日志進(jìn)行分析。

舉個(gè)例子，[setPageInfo Error] Recommended to call setPageInfo in Page.onShow
此類問(wèn)題發(fā)生在過(guò)早的調(diào)用 setPageInfo 這個(gè) API 時(shí)，由于拿不到當(dāng)前頁(yè)面的足夠信息，框架底層會(huì)在此時(shí)拋出一個(gè)錯(cuò)誤，來(lái)提示開(kāi)發(fā)者正確的使用方式。

對(duì)于一些可能沒(méi)有錯(cuò)誤堆棧的 JSError 日志，開(kāi)發(fā)者能夠利用的信息就只有錯(cuò)誤發(fā)生時(shí)間、錯(cuò)誤版本分布、錯(cuò)誤具體量級(jí)等趨勢(shì)數(shù)據(jù)。
此時(shí)開(kāi)發(fā)者雖然不能直接找到問(wèn)題原因所在，但通過(guò) JSError 日志的變化趨勢(shì)，可以推測(cè)到是哪一次版本迭代引入了新的錯(cuò)誤，或是讓某個(gè)類型的錯(cuò)誤出現(xiàn)了突增。
開(kāi)發(fā)者可以根據(jù)受影響的用戶面積，進(jìn)一步排查版本迭代中的代碼 diff，采取修復(fù)或是回滾等補(bǔ)救措施。

舉個(gè)例子，從圖中的 JSError 變化趨勢(shì)和版本分布來(lái)看，在 12.03 當(dāng)天錯(cuò)誤量有比較明顯的增長(zhǎng)，且可以觀察到，錯(cuò)誤集中在小程序的 2.1.27.1 版本中，那么就意味著很有可能是 12.03 當(dāng)天發(fā)布的小程序版本 2.1.27.1 ，在線上存在很大的問(wèn)題，可能會(huì)對(duì)業(yè)務(wù)產(chǎn)生影響，此時(shí)應(yīng)盡快排查和定位問(wèn)題，及時(shí)止損。

如何區(qū)分是業(yè)務(wù)問(wèn)題 or 小程序框架問(wèn)題

為什么會(huì)存在一些看不懂的錯(cuò)誤？
由于小程序底層框架運(yùn)行時(shí)和開(kāi)發(fā)者代碼邏輯依賴較為復(fù)雜，目前還不能做到百分百準(zhǔn)確的區(qū)分錯(cuò)誤是由開(kāi)發(fā)者的代碼執(zhí)行引起的，還是觸發(fā)了小程序框架運(yùn)行時(shí)的某些異常導(dǎo)致的。

區(qū)分錯(cuò)誤的核心依據(jù)還是原始錯(cuò)誤堆棧，能夠通過(guò) JSError 面板中的錯(cuò)誤詳情，一鍵還原的錯(cuò)誤，都一定為開(kāi)發(fā)者業(yè)務(wù)代碼引入的問(wèn)題。

但反過(guò)來(lái)，錯(cuò)誤堆棧顯示錯(cuò)誤來(lái)源于小程序底層框架的問(wèn)題，就一定不需要開(kāi)發(fā)者關(guān)心嗎？并不一定。

為了保證小程序的正常穩(wěn)定運(yùn)行， 小程序底層框架對(duì)開(kāi)發(fā)者的很多操作都做了制約。

而如果開(kāi)發(fā)者的業(yè)務(wù)代碼在運(yùn)行過(guò)程中，存在某些地方不符合框架約定和語(yǔ)法的邏輯，比如錯(cuò)誤的使用一個(gè) API、在某些拿不到元素節(jié)點(diǎn)的生命周期執(zhí)行一些依賴視圖的操作，或是缺少相關(guān)的配置項(xiàng)，這些都有可能觸發(fā)框架內(nèi)部拋出異常，并中斷后續(xù)邏輯，從而影響到小程序的穩(wěn)定性和用戶實(shí)際體驗(yàn)。

對(duì)于這些非業(yè)務(wù)代碼異常直接引起的錯(cuò)誤，框架會(huì)盡可能的將最后的錯(cuò)誤信息上報(bào)給開(kāi)發(fā)者，供開(kāi)發(fā)者分析和排查業(yè)務(wù)代碼中存在的問(wèn)題。

而對(duì)于某些框架引入的 bug，或是開(kāi)發(fā)者排查后認(rèn)為該條 JSError 與自己實(shí)際業(yè)務(wù)代碼不相關(guān)，懷疑為誤報(bào)的 case，運(yùn)維中心也會(huì)提供反饋入口，為開(kāi)發(fā)者提供技術(shù)支持的通路。

業(yè)務(wù)方 JSError 場(chǎng)景異常速查字典
不能被框架生命周期或內(nèi)部方法捕獲到的錯(cuò)誤，目前上報(bào)的 message 仍為原始格式。
例如TypeError: Cannot read property 'show' of undefined

這里列出了目前典型的業(yè)務(wù)代碼引起的 JSError 的錯(cuò)誤信息格式和常見(jiàn)的原因。
一條完整的 JSError 錯(cuò)誤 message 一般由前綴信息 + 原生錯(cuò)誤 message 組成，例如：

錯(cuò)誤前綴信息	常見(jiàn)場(chǎng)景 & 原因	錯(cuò)誤級(jí)別	備注
[Lifecycle Fail] call App.onLaunch method fail:	生命周期存在未捕獲錯(cuò)誤，涵蓋小程序所有 App 級(jí)別，Page 級(jí)別，Component 級(jí)別生命周期。	【Error嚴(yán)重】任何沒(méi)有捕獲到的錯(cuò)誤都會(huì)中斷該生命周期后續(xù)邏輯執(zhí)行	最常見(jiàn)的開(kāi)發(fā)者錯(cuò)誤，意味著業(yè)務(wù)代碼在生命周期執(zhí)行階段報(bào)錯(cuò)
[Component Error] Call component method fail:	Component 中自定義方法執(zhí)行失敗	【Error 嚴(yán)重】 會(huì)導(dǎo)致后續(xù)邏輯中斷	-
[Component Error] Can’t find components/bar, please check your config	自定義組件配置有誤	【Error 嚴(yán)重】 會(huì)影響組件初始化
[Page Error] Call current page foo method fail:	Page 中自定義方法執(zhí)行失敗	【Error 嚴(yán)重】 會(huì)導(dǎo)致后續(xù)邏輯中斷	-
[Open new Page fail] from pages/index to pages/feed	頁(yè)面跳轉(zhuǎn)相關(guān)能力調(diào)用失敗，涵蓋所有路由能力：navigateTo / redirectTo / switchTab / relaunch	【Error 嚴(yán)重】頁(yè)面跳轉(zhuǎn)失敗，用戶的操作沒(méi)有得到預(yù)期的結(jié)果	最常見(jiàn)的原因?yàn)樘D(zhuǎn)路徑未配置，頁(yè)面參數(shù)拼接錯(cuò)誤，跳轉(zhuǎn) url 不合法等
[Skeleton Error] Skeleton template path error.	骨架屏路徑配置錯(cuò)誤	【W(wǎng)arning 警告】 會(huì)導(dǎo)致骨架屏加載異常	-
[setPageInfo Error] Recommended to call setPageInfo in Page.onShow	過(guò)早的調(diào)用 setPageInfo	【W(wǎng)arning 警告】 會(huì)導(dǎo)致 setPageInfo 失敗	過(guò)早的調(diào)用 setPageInfo 會(huì)獲取不到頁(yè)面相關(guān)信息
[Plugin Error] get plugin compile path error:	插件編譯錯(cuò)誤，沒(méi)有在 .json 文件中找到對(duì)應(yīng)插件配置信息	【W(wǎng)arning 警告】插件加載異常	-
[Dynamic(swan-interaction)][Developer error] error commentParam: {}	一站式互動(dòng)組件動(dòng)態(tài)庫(kù)錯(cuò)誤	【W(wǎng)arning 警告】	互動(dòng)組件 commentParam 內(nèi)部參數(shù)為必填字段。不建議存在留空的情況

如果為小程序框架側(cè)問(wèn)題，該如何反饋？

我們將在運(yùn)維中心面板增加誤報(bào)反饋入口，開(kāi)發(fā)者可一鍵上報(bào)，小程序官方有專門(mén)的工作人員對(duì)接處理。

應(yīng)用 JSError 的小程序案例

以下為 JSError 幫助到的小程序（排名不分先后）。

小程序	導(dǎo)致的問(wèn)題	影響
本地寶	小程序邏輯層卡死	功能異常
百度知道	視頻流統(tǒng)計(jì)問(wèn)題，導(dǎo)致統(tǒng)計(jì)策略完全失效	功能異常
百度百科	大范圍白屏，原因是 npm 鏡像服務(wù)掛掉問(wèn)題	白屏
孔夫子舊書(shū)網(wǎng)	邏輯錯(cuò)誤	白屏
康波財(cái)經(jīng)	分包與自定義路由邏輯問(wèn)題，到達(dá)率下降 15%	白屏
時(shí)間財(cái)富	路由地址不存在，pageNotFound 中死循環(huán)	跳轉(zhuǎn)失效
臺(tái)風(fēng)路徑查詢	舊包邏輯兼容問(wèn)題，導(dǎo)致小范圍白屏	白屏
企查查	路由地址不存在	跳轉(zhuǎn)失效
安居客	路由地址不存在	跳轉(zhuǎn)失效
汽車(chē)之家極速版	邏輯錯(cuò)誤，導(dǎo)致部分頁(yè)面白屏	白屏
蜜小助戀愛(ài)聊天話術(shù)	setPageInfo 圖片設(shè)置失效，影響爬蟲(chóng)	功能異常
愛(ài)奇藝	內(nèi)部邏輯錯(cuò)誤，導(dǎo)致部分功能異常	功能異常
某小程序	使用插件不合法	白屏
贏眾海外咨詢	邏輯死循環(huán)，導(dǎo)致功能異常	白屏
58 白菜二手車(chē)	頁(yè)面邏輯問(wèn)題	功能異常
大眾點(diǎn)評(píng)	邏輯錯(cuò)誤	跳轉(zhuǎn)失效
攜程	邏輯死循環(huán)，導(dǎo)致一直顯示 Toast	功能異常
喵時(shí)尚資訊	網(wǎng)絡(luò)資源問(wèn)題，首頁(yè)和二級(jí)頁(yè)部分圖片不顯示	功能異常
圓通快遞助手	內(nèi)部邏輯異常	跳轉(zhuǎn)失效

常見(jiàn)問(wèn)題

Q：如何上傳 sourcemap 呢？

A：當(dāng)在開(kāi)發(fā)者工具發(fā)布小程序時(shí)，sourcemap 為默認(rèn)勾選上傳。

Q：有些 error 信息看不懂？

A：可能是小程序框架的錯(cuò)誤，請(qǐng)及時(shí)反饋。

Q：如何根據(jù)錯(cuò)誤堆棧查看源碼？

A：當(dāng)開(kāi)發(fā)者提供 sourcemap 后，可點(diǎn)擊錯(cuò)誤 message 右側(cè)的詳情按鈕，打開(kāi)源碼頁(yè)面查看。

Q：為什么有時(shí)候還原不出源碼？

A：官方只保存最近一份 sourcemap，其它版本的錯(cuò)誤堆棧不能進(jìn)行還原。

Q：沒(méi)有數(shù)據(jù)顯示是什么情況？

A：數(shù)據(jù)延遲 2 小時(shí)，只展示當(dāng)前線上包的數(shù)據(jù)，剛發(fā)布新的包版本后存在短期內(nèi)無(wú)數(shù)據(jù)的情況。

Q：異常解決方案有哪些？

A：簡(jiǎn)單的 error 直接進(jìn)行查看后修復(fù)；復(fù)雜的 error 可點(diǎn)擊 error message 右側(cè)詳情，根據(jù)錯(cuò)誤堆棧查看具體發(fā)生錯(cuò)誤的原代碼。

網(wǎng)站題目：創(chuàng)新互聯(lián)百度小程序教程：JSError 常見(jiàn)錯(cuò)誤處理
轉(zhuǎn)載注明：http://www.fisionsoft.com.cn/article/dhjccod.html