沒想過的前端錯誤處理 可能比你有做的還多

Speaker: Yu Chen
Event: SITCON 2024

Transcript

1. 沒想過的前端錯誤處理 可能比你有做的還多
2. YU LINE Taiwan Content Dev TECHFRESH 北科資⼯⼤四 SITCON 2022 ⾏銷組組員
3. 為什麼我今天會想分享這個主題？ 加分條件 1. 使⽤ TypeScript 2. 未使⽤現成的 GitHub API client（Octokit）串接 GitHub API 3. 有處理例外狀況（Error handling） 4. 有 deploy ⾄線上環境
4. ⼤部分⼈能想到的作法 1 try … catch 2 顯⽰錯誤訊息 給使⽤者看 3 輸出到 console ⽅便⾃⼰ debug
5. 我們能做的更好 嗎？
6. 有做好例外處理的程式應該要... 對使⽤者來說 對開發者來說 有整合監控系統記錄錯誤 有容錯能⼒（Fault tolerance） 圖片來源：Flaticon.com
7. LINE-Pay(v)_W238_n.png 什麼是容錯能⼒（ Fault tolerance ）？ 例⼦：餐廳收款系統 圖片來源：Flaticon.com、LINE Pay 官網
8. 為什麼我們需要錯誤監控系統？ 圖片來源：Flaticon.com
9. ⽬前市⾯上有的錯誤監控服務 圖片來源：Sentry、The LINUX Foundation、 WIKIPEDIA 、GitHub、DATADOG
10. Sentry 功能介紹
11. 什麼是 Sentry？ 圖片來源：Flaticon.com 開源可⾃架 前端主流的監控服務之⼀
12. 常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
13. 常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
14. 基本偵錯資訊 Sentry: Scopes and Hubs
15. Stack Trace
16. Source Map Sentry: Source Maps
17. Breadcrumbs
18. 詳細錯誤資訊
19. 相關統計數據
20. 有錯誤資訊⾴⾯的好處 提昇修復 bug 的效率 幫助我們判斷處理的 優先度 圖片來源：Flaticon.com
21. 常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
22. 錯誤搜尋
23. 常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
24. Discord 即時通知 Sentry → Discord
25. 官⽅整合設定
26. 也可以透過 WebHook DIY
27. 設定錯誤通知條件
28. 即時通知的好處 能整合我們常⽤的 通訊軟體做到即時通知 在使⽤者/客⼾回報問題前 就能主動進⾏修復 圖片來源：Flaticon.com
29. 聽起來好像很厲害，這樣我們還需要 try catch 和顯⽰錯誤訊息嗎？ 圖片來源：風傳媒
30. 我們仍然需要 try catch 以及各個前端框架的錯誤捕獲機制來做錯誤處理 圖片來源：Flaticon.com
31. 也需要錯誤訊息，這對使⽤者體驗（UX）很重要 圖片來源：Flaticon.com
32. 捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
33. 捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
34. 瀏覽器 / 原⽣ JavaScript 前端框架 錯誤捕獲機制 圖片來源：WIKIPEDIA
35. 錯誤捕獲機制 瀏覽器 / 原⽣ JavaScript 圖片來源：WIKIPEDIA 1. try ... catch 2. Promise.Prototype.catch() 3. window.onerror
36. window.onerror
37. 五個參數的⽤途
38. 前端框架的錯誤捕獲機制 getDerivedStateFromError componentDidCatch onErrorCaptured handleError 圖片來源：WIKIPEDIA
39. <ErrorBoundary /> can help you ErrorBoundary
40. 如何實作 ErrorBoundary getDerivedStateFromError componentDidCatch onErrorCaptured handleError <ErrorBoundary /> 圖片來源：WIKIPEDIA
41. ErrorBoundary 介⾯定義 State: • hasError: false Props: • children • fallback（顯⽰錯誤訊息的元件）
42. ErrorBoundary 實作邏輯 渲染 children 時 有沒有發⽣錯誤 檢查 hasError 的狀態 true 開始渲染 渲染 fallback false 沒有 正常顯⽰ children 將 hasError 設成 true，並做錯誤處理 有
43. 什麼元件需要⽤ ErrorBoundary 包？ 當壞掉時 不會影響其他在元件樹上 同層的元件運作的元件 網⾴程式的進入點
44. 為什麼進入點需要包 ErrorBoundary? 圖片來源：Flaticon.com
45. “當壞掉時，不會影響其他在元件樹上同 層的元件運作的元件。” 這句話是什麼意思？
46. ErrorBoundary 圖片來源：Flaticon.com
47. 如果每個都包會有什麼問題？ • 不是所有元件都需要包 ErrorBoundary • 會影響效能 • 可能會產⽣不好的使⽤者體驗
48. 壞⼀半的 UI === 全壞爛的 UX ErrorBoundary
49. 壞⼀半的 UI === 全壞爛的 UX
50. 那要怎麼判斷呢？
51. 當這個元件壞掉時， 其他同層的元件該跟著消失嗎？ 遍歷整顆元件樹，並對每個元件問這個問題
52. 以 X 為例⼦模擬⼀遍
53. 以 X 為例⼦模擬⼀遍
54. 捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
55. 顯⽰錯誤訊息實作
56. 捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
57. 將錯誤紀錄到 Sentry 當程式進到 try...catch 的 catch 區塊時 ErrorBoundary 中發⽣ 錯誤時觸發的 hook
58. 可能會拋出錯誤的 function 第三⽅ library 中 ⽂件明確寫出可能會拋出 錯誤的 function 開發團隊⾃⼰寫 且確定可能會拋出錯誤的 utility function
59. 把 fetch 重新封裝
60. 把 fetch 重新封裝
61. ⽤ axios 更⽅便 請求失敗 回應失敗 axios: Interceptors 圖片來源：Flaticon.com、 WIKIPEDIA
62. window.onerror 呢？ Sentry 會幫我們⾃動捕獲所有的 uncaught error 除非你對 uncaught error 需要做其他的錯誤處理，不然你不會需要⽤到。 圖片來源：Flaticon.com
63. 最後的⼀些⼩建議 • 並不是所有專案都需要做錯誤監控，也不需要⼀次做到位 • 如果有專案有整合錯誤監控系統要好好善⽤ • 注意不要將使⽤者的機密資訊傳到錯誤監控系統 • 容錯能⼒的「粒度」不⼀定要這麼細
64. Q & A yu2001 @justYu2001 圖片來源：Discord、 WIKIPEDIA