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
0
61k
沒想過的前端錯誤處理 可能比你有做的還多
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
The Magic of Feature Toggles:
line_developers_tw
PRO
0
13
透過 Cloud Function + Firebase 與 Gemini Pro Vision 打造一個旅遊小幫手 LINE ChatBot
line_developers_tw
PRO
0
1.3k
iThome Cloud Summit 2024 - 透過生成式 AI 多模態模型與 LINE Bot 產生有趣應用
line_developers_tw
PRO
0
48
從實習到專家:LINE TECH FRESH -t的成長軌跡
line_developers_tw
PRO
0
52
QA 蝦米 QA?我的扣超讚的啊
line_developers_tw
PRO
0
910
這就很玄囉! 從粽子看開發的世界
line_developers_tw
PRO
0
900
從混亂到掌控:使用 Observability 揭開管家的神秘面紗
line_developers_tw
PRO
0
1.3k
蔡EC:24歲開發一次成功
line_developers_tw
PRO
0
900
你在 DevOps 什麼啦,我要趕快上線!
line_developers_tw
PRO
0
470
Other Decks in Technology
See All in Technology
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
20
10k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
230
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AWSでRAGを作る法方
sonoda_mj
1
140
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
1
150
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
How to Ace a Technical Interview
jacobian
274
23k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Code Review Best Practice
trishagee
58
16k
Building Adaptive Systems
keathley
34
2k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Gamification - CAS2011
davidbonilla
78
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
The Language of Interfaces
destraynor
151
23k
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