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

JSError 常見錯誤處理

開發(fā)者 JSError 問題排查流程

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

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

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

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

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

如何查看并分析 JSError

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

錯誤對象的組成：Error = message + stack。

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

錯誤堆棧：是能夠定位問題的最直觀的信息。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

常見問題

Q：如何上傳 sourcemap 呢？

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

Q：有些 error 信息看不懂？

A：可能是小程序框架的錯誤，請及時反饋。

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

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

Q：為什么有時候還原不出源碼？

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

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

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

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

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

新聞名稱：創(chuàng)新互聯(lián)百度小程序教程：JSError 常見錯誤處理
文章網(wǎng)址：http://www.5511xx.com/article/dhjccod.html