iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
DevOps

全端監控技術筆記---從Sentry到Opentelemetry 系列

基本上是我這30天對全端監控的學習筆記
包括文章、GPT對話以及原理的demo

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day01--前言

其實這一個系列是我對全端可觀測性、監控的30天學習紀錄。在我之前的工作、專案經驗中,要debug就是直接一個一個看console,自己一步一步trace err...

2024-09-15 ‧ 由 jamieleee 分享
DAY 2

Day02--前端監控簡介

為何需要前端監控 在開發階段,前端開發往往是所見即所得。如果程式碼有問題,通常在開發時就能看到異常,例如畫面錯亂或頁面直接空白,因此大部分問題都能及時發現和解決...

2024-09-16 ‧ 由 jamieleee 分享
DAY 3

Day03--Sentry簡介與使用

Sentry歷史 Sentry的共同創辦人為 David Cramer,在他和其他co-founder在Disqus和Dropbox工作的期間,為了優化錯誤蒐集...

2024-09-17 ‧ 由 jamieleee 分享
DAY 4

Day04--React與Sentry共舞

前言 有了前一天的設定,我們可以開始來在React專案中測試一些異常,看Sentry是如何展示的。 拋出一個error 新增一個組件ErrorComponent...

2024-09-18 ‧ 由 jamieleee 分享
DAY 5

Day05--Sentry是如何獲取error? 直接手寫看看(上)

關於Sentry對前端error的定義 在Sentry JS SDK的原始碼中,可以在packages/utils/src/instrument的路徑下看到以下...

2024-09-19 ‧ 由 jamieleee 分享
DAY 6

Day06--Sentry是如何獲取error? 直接手寫看看(下)

前言 上篇文章我們大致了解了如何捕獲全局error和全局的promise error。但在前端框架中,有些它們框架本身的錯誤處理,例如React的ErrorBo...

2024-09-20 ‧ 由 jamieleee 分享
DAY 7

Day07--如何在錯誤發生時、同時獲取user actions記錄

前言 在前幾篇中,我們嘗試自己獲取全局error、promise error、以及前端框架級別error(react error-boundary)。但就如同之...

2024-09-21 ‧ 由 jamieleee 分享
DAY 8

Day08--Sentry是如何獲取效能指標(上)---react-router

前言 本來想直接談Sentry和網頁效能的話題,但突然想到,我們在查看網頁效能的時候、是想看在「每一個頁面」的狀態,也就是說Sentry要能正確的追蹤到該頁面的...

2024-09-22 ‧ 由 jamieleee 分享
DAY 9

Day09--Sentry是如何獲取效能指標(下)---web vitals

前言 再上一篇我們了解到了Sentry是如何接入 React-Router、來在路由組件掛載的時候獲取url,那麼我們下一步就是在路由組件掛載的時候、檢測該ur...

2024-09-23 ‧ 由 jamieleee 分享
DAY 10

Day10--後端服務與Sentry---以NodeJS為例

前言 雖然近期討論Sentry幾乎都是在前端的錯誤監控,但別忘了當初Sentry在最一開始的開發目的,是為了處理Django後端的日誌問題和錯誤報警。接下來,我...

2024-09-24 ‧ 由 jamieleee 分享