前言

在人們的印象中，Grafana 的使用者大多是 DevOps 或後端工程師，最常見的應用場景是透過 Prometheus 建立監控圖表等用途，與前端領域幾乎沒有交集。然而，當我們跳脫這種刻板印象，深入思考 Grafana 本身時，會發現它其實包含了豐富的視覺化圖表及可操控的欄位設定，這些 UI 建置工作完全屬於前端工程師的專業範疇。

因此，本系列文章將聚焦於 Grafana Scenes，一個由 Grafana 提供的 React-based 前端框架。開發者可以利用它來打造具備 Grafana 風格與功能的應用程式，讓前端工程師不僅能參與圖表視覺化，還能開發專屬於團隊的 Grafana 功能平台，進一步拓展 Grafana 的應用範圍。

雖然 Grafana Cloud 不斷推出各種實用功能，但基於商業考量，官方未開源這些進階應用服務的程式碼，因此這些功能僅限於付費版本或免費版的有限體驗。然而，透過 Grafana Scenes，我們可以在 Grafana 的開源版本中實現大部分 Grafana Cloud 的進階介面。值得一提的是，許多 Grafana Cloud 上的 Plugin 和工具現在也已經逐步轉向 Grafana Scenes 開發或重構，這更強調了前端開發在 Grafana 生態中的重要性。

在此基礎上，系列文章的後半部將以 Grafana Faro 為例，展示如何使用 Grafana Scenes 克隆出一個前端可觀測性平台，並深入探討可觀測性對於前端開發的深遠影響與價值，讓前端開發不再局限於視覺呈現，而能真正掌握應用的效能與穩定性。

目錄

第一部分 - 前端工程師也需要懂 Grafana 了嗎？

本部分將以一個前端工程師的視角或是從未接觸過 Grafana 的讀者，介紹 Grafana 的基礎知識，包含 Grafana 的架構、Grafana 的資料模型、Grafana 的視覺化圖表工具等，讓讀者能夠初步了解 Grafana 的運作原理與前端工程師在 Grafana 中的角色。

• 靠 Grafana 吃飯的第一天 - 論前端工程師如何靠 Grafana 吃飯
• 靠 Grafana 吃飯的第二天 - 前端眼中的 Grafana
• 靠 Grafana 吃飯的第三天 - Grafana 原始資料到視覺化的旅程
• 靠 Grafana 吃飯的第四天 - Grafana 與前端的千絲萬縷
• 靠 Grafana 吃飯的第五天 - Grafana 的包羅萬象圖表工具（一）
• 靠 Grafana 吃飯的第六天 - Grafana 的包羅萬象圖表工具（二）
• 靠 Grafana 吃飯的第七天 - Grafana Scenes 的革命時代
• 靠 Grafana 吃飯的第八天 - Grafana 的百寶袋 - Plugin

第二部分 - Grafana 前端工程師的吃飯工具

第二部分將以 Grafana Scenes 框架為主軸，介紹前端工程師在 Grafana 中可以使用的工具與技術，包含整體架構、資料請求、變數、視覺化圖表以及進階功能等，讓讀者能夠了解如何使用 Scenes 框架來開發 Grafana 的應用程式。

• 靠 Grafana 吃飯的第九天 - 整個 Grafana Plugin 都是 Scene Object
• 靠 Grafana 吃飯的第十天 - 當 Scenes 成為 Grafana 的切版工具
• 靠 Grafana 吃飯的第十一天 - Grafana Scenes 的資料取得與管理
• 靠 Grafana 吃飯的第十二天 - Grafana Scene 的 Variables 多重宇宙
• 靠 Grafana 吃飯的第十三天 - Grafana 的視覺化圖書館 - Visualizations
• 靠 Grafana 吃飯的第十四天 - Grafana Scenes Data 的變形記
• 靠 Grafana 吃飯的第十五天 - Grafana Dashboard 的可操控元件
• 靠 Grafana 吃飯的第十六天 - Grafana Scenes 進階功能寶典
• 靠 Grafana 吃飯的第十七天 - 實作全客製化的 Scenes App（一）
• 靠 Grafana 吃飯的第十八天 - 實作全客製化的 Scenes App（二）

第三部分 - 前端從監控疊加可觀測性

本部分將以前端工程師的視角，介紹前端領域中門檻較高但需求越來越多的監控和可觀測性觀念，包含 Real User Monitoring、Web Vitals、OpenTelemetry 以及 Grafana 所提供的前端可觀測性工具 - Faro，讓讀者能夠擁有對於前端監控和可觀測性的基礎知識。

• 靠 Grafana 吃飯的第十九天 - 你監控過你的前端嗎? - Real User Monitoring
• 靠 Grafana 吃飯的第二十天 - 深度了解前端監測效能所依賴的 Web Vitals
• 靠 Grafana 吃飯的第二十一天 - 所以，Web Vitals 各指標的閾值怎麼定義
• 靠 Grafana 吃飯的第二十二天 - 前端除了監控還需要可觀測性 - OpenTelemetry
• 靠 Grafana 吃飯的第二十三天 - 前端可觀測性的未來 - Grafana Faro

第四部分 - 搭起一座 Grafana Faro

第四部分將以第二與第三部分的概念，實作一個 Grafana Cloud 版本的 Grafana Faro Demo，打造一個功能及資料呈現更完善，且不需付費的前端可觀測性平台。

• 靠 Grafana 吃飯的第二十四天 - Grafana Faro 實作建置前端可觀測性
• 靠 Grafana 吃飯的第二十五天 - Grafana Faro UI 就靠 Scenes 撐起來
• 靠 Grafana 吃飯的第二十六天 - 建立 Grafana Faro 的 $data
• 靠 Grafana 吃飯的第二十七天 - 實作完整的 Grafana Faro

第五部分 - 成為 Plugin 貢獻者吧

最後一部分，在完成 Grafana 應用程式的實作後，接下來就是將應用程式發布並安裝在自己的 Grafana 環境中。這部分將介紹應用程式的發布流程以及安裝方法，完成前端工程師的完整旅程。

• 靠 Grafana 吃飯的第二十八天 - Publish 一個 Grafana Plugin 需要什麼
• 靠 Grafana 吃飯的第二十九天 - 終於可以在 Grafana 使用我的 Plugin 了
• 靠 Grafana 吃飯的第三十天 - 前端可以靠 Grafana 吃飯了嗎？

適合閱讀的對象

• 前端工程師
• 公司內部有使用 Grafana 的團隊，並且有客製化應用程式需求
• 對 Grafana 有興趣的所有開發者
• 於日常開發時，曾經遇過前端應用程式效能問題、錯誤問題卻無從下手的開發者
• 想成為 Grafana 貢獻者且希望更簡易上手，卻不知道該從何開始的開發者

其他參考文章

本次組成的 Grafana 科研遠征小隊，是一支集結了對 Grafana 應用所需具備技能的研究團隊。
如果對 Grafana 大規模維運、團隊管理或進階應用有興趣的讀者，可以參考以下系列文：
後 Grafana 時代的自我修養

如果對 Kubernetes 與基礎工程有興趣的讀者，可以參考以下系列文：
都什麼年代了，還在學 Kubernetes

另外，上一屆鐵人賽 SideProject30 組優勝得解作品已出版為：
營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThome 鐵人賽系列書)

若有興趣可參考選購！

筆者語錄
希望這系列文章能夠讓前端工程師了解 Grafana 的生態，並且能夠在未來的開發工作中，將 Grafana 的技術應用到實際的專案中，甚至成為 Grafana 的貢獻者。同時也打破前端與 Grafana 的刻板印象，讓前端工程師也能夠在 Grafana 的生態中發光發熱。