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
68k
沒想過的前端錯誤處理 可能比你有做的還多
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
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
85
Scaling The E-Commerce Recommendation System
line_developers_tw
PRO
0
16
Enhanced EC Recommendations: Trustworthy Validation with Large Language Models for Two-Tower Model
line_developers_tw
PRO
0
6
揭秘LLMOps: 讓LLM服務像火箭 般穩定高效的祕密!
line_developers_tw
PRO
0
44
ML Life Cycle for LINE SHOPPING Recommender
line_developers_tw
PRO
0
10
Review AI from LINE EC NLP
line_developers_tw
PRO
0
7
LINE購物 App x ATDD: 利用 ATDD 改善開發流程
line_developers_tw
PRO
0
29
Grafana Alloy Best Practice
line_developers_tw
PRO
0
3.7k
Distributed Tracing in LINE Taiwan
line_developers_tw
PRO
0
37
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
Do you know “Environment Variables” ?
akimiya
0
140
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
910
20241017_俺たちは雰囲気で scope をやっているけどもうちょっとなんとかならんのか?
tokai235
0
230
太田博三(@usagisan2020)
otanet
0
140
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
390
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
170
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
580
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
130
Amazon Managed Grafana で AWS IoT TwinMaker によるデジタルツインアプリケーションを動かしてみた
wakatsuki
0
110
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
A Tale of Four Properties
chriscoyier
156
22k
Fireside Chat
paigeccino
32
3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Scaling GitHub
holman
458
140k
How STYLIGHT went responsive
nonsquared
95
5.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Bash Introduction
62gerente
608
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
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