Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
沒想過的前端錯誤處理可能比你有做的還多
Search
LINE Developers Taiwan
PRO
March 18, 2024
Technology
1
79k
沒想過的前端錯誤處理 可能比你有做的還多
Speaker: Yu Chen
Event: SITCON 2024
LINE Developers Taiwan
PRO
March 18, 2024
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
21
在 GCP 運用 Parse 全家餐管理那堆 AI 應用的資料
line_developers_tw
PRO
0
24
40歲的我會給20歲的自己,關於軟體開發的7個建議
line_developers_tw
PRO
0
7.7k
從零到一:轉碼仔的實習攻略
line_developers_tw
PRO
0
39
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
47
做Data超讚的 誰懂?
line_developers_tw
PRO
0
36
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
770
Other Decks in Technology
See All in Technology
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
2.5Dモデルのすべて
yu4u
2
930
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
100
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
600
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
200
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
280
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
452
42k
Bash Introduction
62gerente
611
210k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Transcript
沒想過的前端錯誤處理 可能比你有做的還多
YU LINE Taiwan Content Dev TECHFRESH 北科資⼯⼤四 SITCON 2022 ⾏銷組組員
為什麼我今天會想分享這個主題? 加分條件 1. 使⽤ TypeScript 2. 未使⽤現成的 GitHub API client(Octokit)串接
GitHub API 3. 有處理例外狀況(Error handling) 4. 有 deploy ⾄線上環境
⼤部分⼈能想到的作法 1 try … catch 2 顯⽰錯誤訊息 給使⽤者看 3 輸出到
console ⽅便⾃⼰ debug
我們能做的更好 嗎?
有做好例外處理的程式應該要... 對使⽤者來說 對開發者來說 有整合監控系統記錄錯誤 有容錯能⼒(Fault tolerance) 圖片來源:Flaticon.com
LINE-Pay(v)_W238_n.png 什麼是容錯能⼒( Fault tolerance )? 例⼦:餐廳收款系統 圖片來源:Flaticon.com、LINE Pay 官網
為什麼我們需要錯誤監控系統? 圖片來源:Flaticon.com
⽬前市⾯上有的錯誤監控服務 圖片來源:Sentry、The LINUX Foundation、 WIKIPEDIA 、GitHub、DATADOG
Sentry 功能介紹
什麼是 Sentry? 圖片來源:Flaticon.com 開源可⾃架 前端主流的監控服務之⼀
常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
基本偵錯資訊 Sentry: Scopes and Hubs
Stack Trace
Source Map Sentry: Source Maps
Breadcrumbs
詳細錯誤資訊
相關統計數據
有錯誤資訊⾴⾯的好處 提昇修復 bug 的效率 幫助我們判斷處理的 優先度 圖片來源:Flaticon.com
常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
錯誤搜尋
常⽤的基本功能 1 錯誤資訊⾴⾯ 2 錯誤搜尋 3 即時錯誤通知
Discord 即時通知 Sentry → Discord
官⽅整合設定
也可以透過 WebHook DIY
設定錯誤通知條件
即時通知的好處 能整合我們常⽤的 通訊軟體做到即時通知 在使⽤者/客⼾回報問題前 就能主動進⾏修復 圖片來源:Flaticon.com
聽起來好像很厲害,這樣我們還需要 try catch 和顯⽰錯誤訊息嗎? 圖片來源:風傳媒
我們仍然需要 try catch 以及各個前端框架的錯誤捕獲機制來做錯誤處理 圖片來源:Flaticon.com
也需要錯誤訊息,這對使⽤者體驗(UX)很重要 圖片來源:Flaticon.com
捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
瀏覽器 / 原⽣ JavaScript 前端框架 錯誤捕獲機制 圖片來源:WIKIPEDIA
錯誤捕獲機制 瀏覽器 / 原⽣ JavaScript 圖片來源:WIKIPEDIA 1. try ... catch
2. Promise.Prototype.catch() 3. window.onerror
window.onerror
五個參數的⽤途
前端框架的錯誤捕獲機制 getDerivedStateFromError componentDidCatch onErrorCaptured handleError 圖片來源:WIKIPEDIA
<ErrorBoundary /> can help you ErrorBoundary
如何實作 ErrorBoundary getDerivedStateFromError componentDidCatch onErrorCaptured handleError <ErrorBoundary /> 圖片來源:WIKIPEDIA
ErrorBoundary 介⾯定義 State: • hasError: false Props: • children •
fallback(顯⽰錯誤訊息的元件)
ErrorBoundary 實作邏輯 渲染 children 時 有沒有發⽣錯誤 檢查 hasError 的狀態 true
開始渲染 渲染 fallback false 沒有 正常顯⽰ children 將 hasError 設成 true,並做錯誤處理 有
什麼元件需要⽤ ErrorBoundary 包? 當壞掉時 不會影響其他在元件樹上 同層的元件運作的元件 網⾴程式的進入點
為什麼進入點需要包 ErrorBoundary? 圖片來源:Flaticon.com
“當壞掉時,不會影響其他在元件樹上同 層的元件運作的元件。” 這句話是什麼意思?
ErrorBoundary 圖片來源:Flaticon.com
如果每個都包會有什麼問題? • 不是所有元件都需要包 ErrorBoundary • 會影響效能 • 可能會產⽣不好的使⽤者體驗
壞⼀半的 UI === 全壞爛的 UX ErrorBoundary
壞⼀半的 UI === 全壞爛的 UX
那要怎麼判斷呢?
當這個元件壞掉時, 其他同層的元件該跟著消失嗎? 遍歷整顆元件樹,並對每個元件問這個問題
以 X 為例⼦模擬⼀遍
以 X 為例⼦模擬⼀遍
捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
顯⽰錯誤訊息實作
捕獲程式發⽣的錯誤 顯⽰錯誤訊息 給使⽤者看 將錯誤記錄 到監控系統
將錯誤紀錄到 Sentry 當程式進到 try...catch 的 catch 區塊時 ErrorBoundary 中發⽣ 錯誤時觸發的
hook
可能會拋出錯誤的 function 第三⽅ library 中 ⽂件明確寫出可能會拋出 錯誤的 function 開發團隊⾃⼰寫 且確定可能會拋出錯誤的
utility function
把 fetch 重新封裝
把 fetch 重新封裝
⽤ axios 更⽅便 請求失敗 回應失敗 axios: Interceptors 圖片來源:Flaticon.com、 WIKIPEDIA
window.onerror 呢? Sentry 會幫我們⾃動捕獲所有的 uncaught error 除非你對 uncaught error 需要做其他的錯誤處理,不然你不會需要⽤到。
圖片來源:Flaticon.com
最後的⼀些⼩建議 • 並不是所有專案都需要做錯誤監控,也不需要⼀次做到位 • 如果有專案有整合錯誤監控系統要好好善⽤ • 注意不要將使⽤者的機密資訊傳到錯誤監控系統 • 容錯能⼒的「粒度」不⼀定要這麼細
Q & A yu2001 @justYu2001 圖片來源:Discord、 WIKIPEDIA
None