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

by LINE Developers Taiwan

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

YU LINE Taiwan Content Dev TECHFRESH 北科資⼯⼤四 SITCON 2022 ⾏銷組組員

Slide 3

Slide 3 text

為什麼我今天會想分享這個主題？加分條件 1. 使⽤ TypeScript 2. 未使⽤現成的 GitHub API client（Octokit）串接 GitHub API 3. 有處理例外狀況（Error handling） 4. 有 deploy ⾄線上環境

Slide 4

Slide 4 text

⼤部分⼈能想到的作法 1 try … catch 2 顯⽰錯誤訊息給使⽤者看 3 輸出到 console ⽅便⾃⼰ debug

Slide 5

Slide 5 text

我們能做的更好嗎？

Slide 6

Slide 6 text

有做好例外處理的程式應該要... 對使⽤者來說對開發者來說有整合監控系統記錄錯誤有容錯能⼒（Fault tolerance）圖片來源：Flaticon.com

Slide 7

Slide 7 text

LINE-Pay(v)_W238_n.png 什麼是容錯能⼒（ Fault tolerance ）？例⼦：餐廳收款系統圖片來源：Flaticon.com、LINE Pay 官網

Slide 8

Slide 8 text

為什麼我們需要錯誤監控系統？圖片來源：Flaticon.com

Slide 9

Slide 9 text

⽬前市⾯上有的錯誤監控服務圖片來源：Sentry、The LINUX Foundation、 WIKIPEDIA 、GitHub、DATADOG

Slide 10

Slide 10 text

Sentry 功能介紹

Slide 11

Slide 11 text

什麼是 Sentry？圖片來源：Flaticon.com 開源可⾃架前端主流的監控服務之⼀

Slide 12

Slide 12 text

常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知

Slide 13

Slide 13 text

常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知

Slide 14

Slide 14 text

基本偵錯資訊 Sentry: Scopes and Hubs

Slide 15

Slide 15 text

Stack Trace

Slide 16

Slide 16 text

Source Map Sentry: Source Maps

Slide 17

Slide 17 text

Breadcrumbs

Slide 18

Slide 18 text

詳細錯誤資訊

Slide 19

Slide 19 text

相關統計數據

Slide 20

Slide 20 text

有錯誤資訊⾴⾯的好處提昇修復 bug 的效率幫助我們判斷處理的優先度圖片來源：Flaticon.com

Slide 21

Slide 21 text

常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知

Slide 22

Slide 22 text

錯誤搜尋

Slide 23

Slide 23 text

常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知

Slide 24

Slide 24 text

Discord 即時通知 Sentry → Discord

Slide 25

Slide 25 text

官⽅整合設定

Slide 26

Slide 26 text

也可以透過 WebHook DIY

Slide 27

Slide 27 text

設定錯誤通知條件

Slide 28

Slide 28 text

即時通知的好處能整合我們常⽤的通訊軟體做到即時通知在使⽤者/客⼾回報問題前就能主動進⾏修復圖片來源：Flaticon.com

Slide 29

Slide 29 text

聽起來好像很厲害，這樣我們還需要 try catch 和顯⽰錯誤訊息嗎？圖片來源：風傳媒

Slide 30

Slide 30 text

我們仍然需要 try catch 以及各個前端框架的錯誤捕獲機制來做錯誤處理圖片來源：Flaticon.com

Slide 31

Slide 31 text

也需要錯誤訊息，這對使⽤者體驗（UX）很重要圖片來源：Flaticon.com

Slide 32

Slide 32 text

捕獲程式發⽣的錯誤顯⽰錯誤訊息給使⽤者看將錯誤記錄到監控系統

Slide 33

Slide 33 text

捕獲程式發⽣的錯誤顯⽰錯誤訊息給使⽤者看將錯誤記錄到監控系統

Slide 34

Slide 34 text

瀏覽器 / 原⽣ JavaScript 前端框架錯誤捕獲機制圖片來源：WIKIPEDIA

Slide 35

Slide 35 text

錯誤捕獲機制瀏覽器 / 原⽣ JavaScript 圖片來源：WIKIPEDIA 1. try ... catch 2. Promise.Prototype.catch() 3. window.onerror

Slide 36

Slide 36 text

window.onerror

Slide 37

Slide 37 text

五個參數的⽤途

Slide 38

Slide 38 text

前端框架的錯誤捕獲機制 getDerivedStateFromError componentDidCatch onErrorCaptured handleError 圖片來源：WIKIPEDIA

Slide 39

Slide 39 text

can help you ErrorBoundary

Slide 40

Slide 40 text

如何實作 ErrorBoundary getDerivedStateFromError componentDidCatch onErrorCaptured handleError 圖片來源：WIKIPEDIA

Slide 41

Slide 41 text

ErrorBoundary 介⾯定義 State: • hasError: false Props: • children • fallback（顯⽰錯誤訊息的元件）

Slide 42

Slide 42 text

ErrorBoundary 實作邏輯渲染 children 時有沒有發⽣錯誤檢查 hasError 的狀態 true 開始渲染渲染 fallback false 沒有正常顯⽰ children 將 hasError 設成 true，並做錯誤處理有

Slide 43

Slide 43 text

什麼元件需要⽤ ErrorBoundary 包？當壞掉時不會影響其他在元件樹上同層的元件運作的元件網⾴程式的進入點

Slide 44

Slide 44 text

為什麼進入點需要包 ErrorBoundary? 圖片來源：Flaticon.com

Slide 45

Slide 45 text

“當壞掉時，不會影響其他在元件樹上同層的元件運作的元件。” 這句話是什麼意思？

Slide 46

Slide 46 text

ErrorBoundary 圖片來源：Flaticon.com

Slide 47

Slide 47 text

如果每個都包會有什麼問題？ ● 不是所有元件都需要包 ErrorBoundary ● 會影響效能 ● 可能會產⽣不好的使⽤者體驗

Slide 48

Slide 48 text

壞⼀半的 UI === 全壞爛的 UX ErrorBoundary

Slide 49

Slide 49 text

壞⼀半的 UI === 全壞爛的 UX

Slide 50

Slide 50 text

那要怎麼判斷呢？

Slide 51

Slide 51 text

當這個元件壞掉時，其他同層的元件該跟著消失嗎？遍歷整顆元件樹，並對每個元件問這個問題

Slide 52

Slide 52 text

以 X 為例⼦模擬⼀遍

Slide 53

Slide 53 text

以 X 為例⼦模擬⼀遍

Slide 54

Slide 54 text

捕獲程式發⽣的錯誤顯⽰錯誤訊息給使⽤者看將錯誤記錄到監控系統

Slide 55

Slide 55 text

顯⽰錯誤訊息實作

Slide 56

Slide 56 text

捕獲程式發⽣的錯誤顯⽰錯誤訊息給使⽤者看將錯誤記錄到監控系統

Slide 57

Slide 57 text

將錯誤紀錄到 Sentry 當程式進到 try...catch 的 catch 區塊時 ErrorBoundary 中發⽣錯誤時觸發的 hook

Slide 58

Slide 58 text

可能會拋出錯誤的 function 第三⽅ library 中⽂件明確寫出可能會拋出錯誤的 function 開發團隊⾃⼰寫且確定可能會拋出錯誤的 utility function

Slide 59

Slide 59 text

把 fetch 重新封裝

Slide 60

Slide 60 text

把 fetch 重新封裝

Slide 61

Slide 61 text

⽤ axios 更⽅便請求失敗回應失敗 axios: Interceptors 圖片來源：Flaticon.com、 WIKIPEDIA

Slide 62

Slide 62 text

window.onerror 呢？ Sentry 會幫我們⾃動捕獲所有的 uncaught error 除非你對 uncaught error 需要做其他的錯誤處理，不然你不會需要⽤到。圖片來源：Flaticon.com

Slide 63

Slide 63 text

最後的⼀些⼩建議 ● 並不是所有專案都需要做錯誤監控，也不需要⼀次做到位 ● 如果有專案有整合錯誤監控系統要好好善⽤ ● 注意不要將使⽤者的機密資訊傳到錯誤監控系統 ● 容錯能⼒的「粒度」不⼀定要這麼細