Grafana faro

官方文檔: https://grafana.com/oss/faro/
官方範例: https://github.com/grafana/faro-web-sdk

什麼是前端可觀測性？

簡單來說是指針對前端應用程序進行全面監控和分析的能力，確保有良好的 performance 和用戶體驗
最重要的目的在於從效能的角度 改善使用者體驗。

可觀測性技術是通過紀錄即時日誌記錄(Logs)、指標監控(Metrics)、分布式追踪(Traces) 等工具和技術，為企業提供全面、精確和實時的系統觀測能力，從而幫助企業深入了解系統的運行狀況、行為模式和性能指標。

可觀測性技術不僅僅是簡單地監控系統狀態，還可以提供對系統內部進行深度洞察的能力，有助於快速發現問題、定位故障，並採取相應措施進行故障修復和性能優化。

為什麼需要前端可觀測性

最初由 Steve Souders，一位在網站性能優化領域的先驅和專家提出：
提出了一個觀點「Performance Golden Rule」，是一個在網站性能優化領域常被提及的概念，

80-90% of the end-user response time is spent on the frontend
用戶感知到的 80-90% 響應時間是在前端發生的。

在這理論的 Response Time / Concurrnet Users 矩陣圖中，可以得出當同時使用人數越低或後端服務負載不高時，前端的處理時間在影響效能的比重就越大。
可以看出前端效能優化的重要性完全不小於後端，進而點出 Grafana Faro 在效能指標、量測與可觀測性的重要之處。

humans are impatient

任何造成延遲的原因都可能導致 application 失去潛在客戶
RD 需要知道

當系統的效能變慢，是哪一個 function 在作怪，錯誤在哪一個階段壞掉？
請求時間變長，這些問題是在前端發生還是後端發生的？以上都是可觀測性都是要解決的問題，因為真實體感時間是 USER 從前端按下按鈕開始

當前數位時代中，為用戶提供高效能且流暢的體驗對任何線上服務至關重要。
這正是實際用戶監測（Real User Monitoring，簡稱 RUM）在前端開發和生產環境中成為不可或缺工具的原因。

What is Real User Monitoring (RUM)?

Real User Monitoring (RUM) 是一種前端性能監控技術，可記錄使用者與網站或 Web 應用程式的互動，並提供對最終使用者體驗問題的可見性。

RUM 會在網站的頁面上插入一個小的 JavaScript 程式碼，當使用者訪問該網站時自動觸發該程式碼，用來報告頁面載入數據和其他性能指標。
這些數據基於實際的使用者在網站上的互動，使您能夠快速識別和優化需要立即關注的網站區域，以改善最終用戶體驗。

Grafana Faro

Grafana Faro 是 Grafana Labs 開發的一個開源前端可觀測性平台。

它提供了一套工具庫，可以僅僅使用兩三行代碼輕鬆嵌入到 Web 應用服務中(跟 React 高度整合)，可以收集和分析用戶行為、效能指標及其他可觀測性數據(包括 Web Vitals 效能指標、Console Log、Exception、Events、Traces。)

追蹤用戶的具體行為，如點擊和滾動
監控頁面加載時間和服務器響應時間等關鍵效能指標
瀏覽器錯誤日誌、API 請求狀態，以及用戶設備信息等

使用情境

在某些大型活動期間訪問該商店，此時流量可能會擴大成 100 倍。
後端 API 可以使用 OpenTelemetry 來監控 API。
前端的部分則可以使用 Grafana Faro 來監控前端的效能指標、日誌、異常、事件和追踪。

介紹

Web 應用程序通過 Grafana Faro Web SDK 收集各種數據，這些數據被發送到 Grafana Agent 進行處理，
然後分別存儲到 Logs 和 Tempo，最終在 Grafana 中進行可視化和分析。

Web Application：

這是指 Web 應用程序本身，通過 Grafana Faro Web SDK 收集日誌、異常、測量、事件和追踪信息。
Grafana Agent：
- 收集到的數據隨後會被 Grafana Agent 接收。
- 接收來自 Web SDK 的數據（包括日誌、異常、測量、事件和追踪），並將這些數據進一步處理和轉發，送到不同的儲存系統中。
最終數據會被匯聚到 Grafana Dashboard 上(Logs, Tempo, and Grafana)

Logs：存儲並處理日誌、異常、事件和測量數據。
Tempo：專門處理 Trace 數據。
Grafana：一個視覺化和分析平台，用於展示來自 Logs 和 Tempo 的數據。

傳統的可觀測性三大支柱

日誌（Logs）：記錄應用程序運行過程中的各種事件和操作，用於追蹤錯誤和調試問題。
度量（Metrics）：收集關鍵性能指標（如頁面加載時間、資源加載時間）以監控應用程序的健康狀態和性能。
分佈式追踪（Distributed Tracing）：跟踪單個請求在應用程序中的路徑，幫助識別性能瓶頸和延遲來源。

實現 Observability 的目的

實現可觀測性的目的

核心：不僅收集數據，更要解答關鍵業務問題，來提高系統透明度和理解度

具體目標：
a. 服務範圍：識別請求經過的服務及其交互
b. 服務行為：了解每個服務在處理請求時的具體操作
c. 性能瓶頸：定位系統性能緩慢的原因
d. 錯誤定位：確定請求失敗的具體位置
e. 關鍵路徑分析：識別請求的關鍵路徑元素
f. 異常檢測：比較當前執行狀態與正常系統行為的差異
g. 時間分析：找出處理時間延長的原因

實作

官方範例程式碼: https://github.com/grafana/faro-web-sdk/tree/main/demo

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-react';

const faro = initializeFaro({
  url: 'http://localhost:${env.faro.portAppReceiver}/collect',
  apiKey: 'secret',
  instrumentations: [
    ...getWebInstrumentations({
    captureConsole: true,
    }),
  ],
  trackWebVitalsAttribution: true, // 啟用偵測 web vitals
  app: {
    name: 'frontend',
    version: '1.0.0',
  },
});

Faro Web SDK request payload example

Faro Web SDK 會透過 HTTP 請求將其傳送到 Grafana Agent，這裡的數據被分類為日誌、異常、事件、測量值和追蹤。
Request payload 範例
接著，Grafana Agent 將數據分別傳送到 Loki 和 Tempo。
對 Tempo 而言，追蹤數據是通過 OpenTelemetry 協議（OTLP）發送的，
而日誌、異常、事件和測量值則保存在 Loki 中，並附加了額外的 Metadata。
當數據保存在 Loki 或 Tempo 時，可以使用 Grafana 簡單地查詢數據並在 Dashboard 上查看，或使用 Explore 頁面。

Console Instrumentation

收集各式各樣的 console logs
Logs 對於排查錯誤至關重要，因為它們提供了應用程式中發生的情況的上下文和詳細資訊。

// 手動送 logs
faro.api.pushLog([`This is a console ${method} message`], {
    level: method,
});

文檔參考:

Errors Instrumentation

會去訂閱瀏覽器 window.onerror 的和 onunhandledrejection 事件以收集錯誤，提取堆疊跟蹤（如果可用），並透過 faro.api.pushError() 將它們回報給 Grafana Faro Web SDK API。

追蹤錯誤目的：

分析應用程式中發生的異常（crashes, incorrect behavior)
監視應用程式是否按預期工作

const throwError = () => {
  throw new Error('Buggy function');
};

try {
  throwError();
} catch (err) {
  // 自動回報錯誤
  throw err;

  // 手動回報錯誤
  faro.api.pushError(err);
}

操作文檔: https://github.com/grafana/faro-web-sdk/blob/main/demo/docs/instrumentations/errors.md

Web Vitals Instrumentation

網站體驗核心指標（Core Web Vitals）是 Google 於 2020 年推出的指標，用來量測訪客在頁面的瀏覽體驗狀況，主要用於量測瀏覽器中網站的實際性能，以便改善用戶體驗
在 http request payload 裡的 measurement 物件都會包含 metrics 和 context

範例參考: 參數介紹

[
    // LCP
    {
        "type": "web-vitals",
        "values": {
            "lcp": 855.5,
            "delta": 855.5,
            "element_render_delay": 352.9000000001397,
            "time_to_first_byte": 502.5999999998603
        },
        "timestamp": "2024-07-24T09:52:24.414Z",
        "context": {
            "id": "v4-1721814739927-5410717528120",
            "rating": "good",
            "navigation_type": "reload",
            "navigation_entry_id": "8Aj6d2cA57"
        }
    },
    // CLS
    {
        "type": "web-vitals",
        "values": {
            "cls": 0,
            "delta": 0
        },
        "timestamp": "2024-07-24T09:52:24.415Z",
        "context": {
            "id": "v4-1721814739969-5391931898292",
            "rating": "good",
            "navigation_type": "reload",
            "navigation_entry_id": "8Aj6d2cA57"
        }
    }
]

手動送 meaurement

faro.api.pushMeasurement({
  type: 'cart-transaction',
  values: {
    delay: 122,
    duration: 4000,
  },
});

操作文檔: https://github.com/grafana/faro-web-sdk/blob/main/demo/docs/instrumentations/measurements.md

Trace Instrumentation

能夠收集使用者每次跟前端服務互動時產生的詳細流程追蹤資料

實際畫面:

操作文檔: https://github.com/grafana/faro-web-sdk/blob/main/demo/docs/instrumentations/traces.md

Grafana Faro 與 Sentry 的比較

優點：

開源免費 : Faro 完全開源且免費，而 Sentry 雖有開源版本，但完整功能需付費。
Grafana 整合 : Faro 與 Grafana 生態系統的整合更為緊密，適合已使用 Grafana 的團隊
效能監控 : Faro 在前端效能監控方面提供更全面的解決方案。
客製化彈性 : Faro 提供更多客製化選項，可以更好地適應特定需求。

缺點：

成熟度 : 相較於 Sentry，Faro 是較新的專案，可能在穩定性和功能完整性上稍顯不足。
社群支援 : Sentry 擁有更大的使用者群體和更活躍的社群支援。
多平台支援 : Sentry 支援更多的程式語言和平台，而 Faro 主要聚焦於前端監控。
學習曲線 : 對於已經熟悉 Sentry 的團隊來說，轉換到 Faro 可能需要一定的學習成本。
整合生態系統 : Sentry 與更多第三方工具和服務有現成的整合方案。

總結

選擇 Grafana Faro 還是 Sentry 取決於您的具體需求、現有技術和預算考量。
如果已經在使用 Grafana 並且主要關注前端監控，Faro 可能是更好的選擇。
如果需要更全面的錯誤追蹤解決方案和更廣泛的平台支援，Sentry 可能更適合。

參考：

什麼是 前端可觀測性？​

為什麼需要 前端可觀測性​

What is Real User Monitoring (RUM)?​

Grafana Faro​

使用情境​

介紹​

傳統的可觀測性三大支柱​

實現 Observability 的目的​

實作​

Faro Web SDK request payload example​

Console Instrumentation​

Errors Instrumentation​

Web Vitals Instrumentation​

Trace Instrumentation​

Grafana Faro 與 Sentry 的比較​

總結​