iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

論前端工程師如何靠 Grafana 吃飯:從 Grafana App 到前端可觀測性 系列

你以為 Grafana 只是後端或 DevOps/SRE 的專屬工具?其實,這個集監控、可觀測性以及數據視覺化於一身的工具與『前端』息息相關。前端工程師不僅可以藉由 Grafana 進行應用程式開發,還能滿足需求越來越高的前端監控。在本系列文章中,我將深入介紹如何利用 Grafana Scenes 打造高度客製的 Grafana App,並結合 Grafana Faro 進行前端效能監控,打破你對 Grafana 的既有認知,讓我們一起探索 Grafana 在前端世界中的無限可能!

鐵人鍊成 | 共 30 篇文章 | 31 人訂閱 訂閱系列文 RSS系列文 團隊Grafana 科研遠征小隊
DAY 11

靠 Grafana 吃飯的第十一天 - Grafana Scenes 的資料取得與管理

前言 在前端服務中如果要取得數據資料,勢必需要向後端服務發起 HTTP 請求,在 Grafana Scenes 中也是相同道理,而取得的資料即為 Dataso...

2024-09-25 ‧ 由 ysl0628 分享
DAY 12

靠 Grafana 吃飯的第十二天 - Grafana Scene 的 Variables 多重宇宙

前言 在 Grafana 中,Dashboard 可能包含了多種查詢結果的 Panel。這些查詢的屬性通常非常複雜,且其可能的值無法一一列舉。在許多情況下,當...

2024-09-26 ‧ 由 ysl0628 分享
DAY 13

靠 Grafana 吃飯的第十三天 - Grafana 的視覺化圖書館 - Visualizations

前言 在前面的篇章中,我們從 Plugin 的初始化設置、時間範圍及變數設定到數據資料的取得,這一系列的資料收集方法即是為了視覺化的呈現,所以本章節會介紹圖表...

2024-09-27 ‧ 由 ysl0628 分享
DAY 14

靠 Grafana 吃飯的第十四天 - Grafana Scenes 的 Data 變形記

前言 雖然經由前面的章節已經可以形成一個完整的 Panel 或 Dashboard,但很多時候我們真正使用的資料數據經過一系列的 query filter 還...

2024-09-28 ‧ 由 ysl0628 分享
DAY 15

靠 Grafana 吃飯的第十五天 - Grafana Dashboard 的 controls 元件

前言 在先前的文章中我們接觸過了許多 Dashboard 或是 Panel 上的 control 元件,包括 Variables 的下拉選單、TimeRang...

2024-09-29 ‧ 由 ysl0628 分享
DAY 16

靠 Grafana 吃飯的第十六天 - Grafana Scenes 進階功能寶典

前言 為了讓開發者可以處理更複雜的視覺化呈現,本篇文章將介紹 Grafana 的一些進階功能。首先,我們會介紹 addActivationHandler 函數...

2024-09-30 ‧ 由 ysl0628 分享
DAY 17

靠 Grafana 吃飯的第十七天 - 實作全客製化的 Scenes App(一)

前言 在前面的章節中,我們已經深入了解了 Grafana Scene 的基本使用方法和非常實用的進階功能,下一步就是藉由基本功能的概念與進階功能結合實現一個完...

2024-10-01 ‧ 由 ysl0628 分享
DAY 18

靠 Grafana 吃飯的第十八天 - 實作全客製化的 Scenes App(二)

前言 在上一章中,我們已經建立了自定義的 Scene、Variable 和 Control。本章將了解在不使用 SceneQueryRunner 的情況下,如...

2024-10-02 ‧ 由 ysl0628 分享
DAY 19

靠 Grafana 吃飯的第十九天 - 你監控過你的前端嗎? - Real User Monitoring

前言 在軟體開發領域中,我們經常聽到 DevOps、SRE 或後端團隊需要監控服務運行狀況、系統流量和資源使用量等。這種監控或可觀測性通常涵蓋從請求到達伺服器...

2024-10-03 ‧ 由 ysl0628 分享
DAY 20

靠 Grafana 吃飯的第二十天 - 深入了解前端效能監測與 Web Vitals

前言 既然我們有監控前端應用程式的需求,是因為我們需要知道我們的網站是否能夠提供良好的使用者體驗,其中佔比最大的就是效能問題。而我們可能都了解過效能需要如何改...

2024-10-04 ‧ 由 ysl0628 分享