全文目錄：https://ithelp.ithome.com.tw/articles/10350897
經過了三十天的挑戰，終於來到了完賽的時刻，在這三十天中，我們認識了 Grafana、Grafana Scenes、Grafana Faro 以及針對前端可觀性的相關知識，並且將這些知識綜合起來，最後時做出了一個前端可觀測性的平台。這次參賽之前雖然有先初步了解過 Grafana Scenes 及 Grafana Faro 的實踐，甚至也有先實作另一個 Grafana Cloud 的應用程式 - Log Volume，但對於 Grafana 本身這個平台以及前端可觀測性的議題，其實是沒有接觸過的，因此這次參賽對我來說是一次全新的體驗。
在進入 Grafana Faro 以及前端監控和可觀測性的議題時，發現知識點是越挖越深，甚至需要了解一些 OpenTelemetry 的知識，因為這些 instrument 都是基於他的規範所建立的。我相信這些規範或是原理對於前端工程師來說，可能比較少機會接觸，但在競爭激烈的市場中，不論是產品面向或是技術面向，可觀測性都是一個非常重要的議題，而前端可觀測性更是近年來逐漸受到重視的技術之一。
在這次的挑戰中，我學習到了很多東西，同時學習最困難的部分是社群上的資源非常少，很多問題或踩到的坑都需要從原始碼或是測試中找到答案，目前不論是 Grafana Scenes 或是 Grafana Faro 的使用者都逐漸增加中，相信未來會有更多人投入這個領域，也會有更多資源被建立起來。同時也希望透過這次的系列文，能夠讓不論是前端、後端、DevOps/SRE，對客製化 Grafana 或是前端可觀測性有興趣的讀者，能夠有所收穫。
當然研究這些內容及實作都還有改進的空間，也有可以更深入探討的議題，對於可觀測性的部分，前端的責任可能在於設置 SDK 並將這些量測內容定義好後進行收集，再傳遞給後端。然而前端應用有很多種，如果非 Web 的應用程式甚至跨語言的應用程式，就可能遇到自行建置 SDK 的問題。而關於前端可觀測性需要收集的資訊也可以有深入研究及討論的空間。
參加這次挑戰的目的，是想要寫一篇讓前端工程師也可以理解 Grafana 的系列文，並且希望可以讓更多前端工程師了解前端可觀測性的重要性，錯誤的發生以及應用程式的效能，並不是在請求發生後才開始，使用者第一個接觸到的是前端應用程式，我們需要將整個訊息鏈於最初的起點設下，才能在問題發生的時候，有更全面的資訊可以進行排除。
再者，希望讓讀者們了解如何透過 Grafana 打造一個前端可觀測性的平台。我們先來看一下下面的比對影片，可以比照一下 Grafana Cloud 的產品以及我在最後兩天使用 Grafana Scenes 實作的範例（頁籤一為 Grafana Cloud，頁籤二為 Grafana Scenes 實作的範例），發現我們的作品其實是相當完整的，功能及介面都可以打造出相似度極高的應用程式，同時也順手將 Cloud 的一些 Bugs 進行優化。
這次系列賽的目的還有最重要的一點，是達成客製化 Grafana 應用程式的實作，希望可以藉由 Grafana Scenes 的實作，讓公司中的使用團隊可以不用煩惱 Grafana Cloud 的限制，因為依據上圖的結果證明，我們也可以實作出功能及 UI 高完整度的應用程式。
在應用程式建立後，它在 Grafana 中被視為一個 Plugin，本地運行和測試都相當方便。然而，實作的最終目的是希望能在自建的 Grafana 平台中使用。因此，我們需要將 Plugin 打包並發布，然後在 Grafana 系統中進行安裝，這樣才能使 Plugin 正式投入使用。
如果有機會，預計在這三十天的系列文章完成後，進一步整理內容，分享更詳細的步驟和教學，延續這個系列文。另外，由於比賽期間時間緊迫，目前只完成了前端可觀測性平台的 Overview 頁面功能。期許自己在比賽結束後能繼續完成其他功能，並將這些技術應用於實踐可觀測性。
最後再次感謝所有的讀者支持，以及一起辛苦三十天的 Grafana 科研遠征小隊隊友們，相信我們這次遠征的成果，都有非常深刻及寶貴的收穫。
另外，上一屆鐵人賽 SideProject30 組優勝得解作品已出版為：
營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThome 鐵人賽系列書)
若有興趣可參考選購！
恭喜完賽，很精彩的一個系列！ 
感謝!你的網頁歷史學(?!也非常有趣~~!
哈，變成網頁歷史學了 🤣
iThome鐵人賽
看影片追技術
看更多
