瀏覽器測量跨越一個受控邊界
瀏覽器永遠不會收到攝取金鑰或選擇目標資料表。您的伺服器在轉發分析事件之前驗證小負載。
- 1
測量
在同意後收集列入許可名單的 Web Vital 或有限的前端結果。
- 2
驗證
強制執行原產地、大小、費率、欄位、路線和數字範圍規則。
- 3
前進
使用伺服器端金鑰和一份受控事件合約。
- 4
審查
查詢樣本併發布趨勢以及每個聚合旁邊的數量。
開始之前
先決條件和界限
- 可以保持 Telemetry API 金鑰私有的同源伺服器端點
- 事件名稱、欄位、指標名稱、路由範本和數字範圍的白名單
- 記錄瀏覽器測量的同意、取樣、保留和刪除行為
交貨設定
安裝並初始化伺服器端
在僅伺服器程式碼中匯入 telemetry-sh 並使用 process.env.TELEMETRY_API_KEY 對其進行一次初始化。 將攝取憑據保留在瀏覽器包、客戶端可見的環境變數、原始碼控制、日誌和異常訊息之外。
npm安裝
npm install telemetry-sh- 1準備一個具有有限網路行為的可重用伺服器端交付客戶端。
- 2在成功、失敗、重試或超時邊界處新增結果事件。
- 3在啟用警示之前傳送受控裝置並檢查儲存的行。
片段
從一個結構化事件開始
在工作流程完成、失敗或重試的位置新增此形狀。然後從真實的欄位建置儀表板。
Browser JavaScript and Web Vitals Telemetry事件
// Browser: post only allowlisted measurements to your own origin.
function reportMetric(metric) {
navigator.sendBeacon("/api/browser-telemetry", JSON.stringify({
event_name: "browser_performance_observed",
metric_name: metric.name,
metric_value: metric.value,
metric_id: metric.id,
route_template: routeTemplateFor(location.pathname),
release: window.__APP_RELEASE__,
navigation_type: metric.navigationType,
}));
}
// Server: validate origin, size, rate, names, fields, and numeric ranges first.
await telemetry.log("browser_performance_observed", validatedMetric);活動合約
metric_name、metric_value、metric_id、route_template 和釋放
navigation_type、device_category、取樣、consent_state 和環境
沒有原始 URL、查詢字串、DOM 文字、表單值、cookie、引用識別符號或客戶端提供的資料表名稱
實施檢查點
檢查站 1
將少量列入白名單的有效負載傳送到您自己的來源；在轉發之前驗證來源、內容型別、正文大小、速率、事件名稱、欄位和範圍。
檢查站 2
使用路由範本而不是 location.href，並在瀏覽器傳送任何測量結果之前應用同意或選擇退出規則。
檢查站 3
sendBeacon 和 keepalive fetch 是盡力而為的。將樣本計數保留在百分位旁邊，並且永遠不要將瀏覽器交付視為精確的分類帳。
驗證
證明事件已到達
在演練已知的成功和失敗案例後執行此命令。如果您的最終事件契約與程式碼片段不同，請替換後備資料表名稱。
Browser JavaScript and Web Vitals Telemetry 驗證查詢
SELECT *
FROM browser_performance_observed
ORDER BY timestamp_utc DESC
LIMIT 20;實施參考
在啟用新的生產路徑之前，請檢查事件合約、資料安全指南和上游主要文件。
生產邊界
保持結果事件小且可恢復
該模式提供了
- 除了上游工作流程之外，還有一個有界的、SQL 就緒的結果。
- 用於儀表板、警示和跨事件關聯的穩定欄位。
- 用於驗證成功、失敗、重試和超時行為的夾具驅動路徑。
該模式不提供
- OTLP 匯出器、自動收集管道或詳細追蹤和診斷日誌的替代品。
- 僅因為有效負載包含事件 ID，所以僅傳送一次。
- 收集原始提供商有效負載、使用者內容、憑證或受監管資料的權限。
事件架構起點
此工作流程的事件契約
在將查詢或程式碼片段適應生產之前，請檢查行粒度、發出邊界、所需型別、隱私類、範例有效負載和驗證清單。
相關產品功能
繼續此工作流程 警示
將經過審查的可靠性查詢提升到擁有的閾值和回應工作流程中。
相關 SQL 查詢範例
用 SQL 回答下一個問題
針對此工作流程中的結構化欄位執行查詢，檢查範例結果，並將有用的答案轉換為儀表板或警示。
按路線和版本比較核心網路生命力
哪個路線和版本的前端效能最弱？
開啟查詢範例按路由和發布對 JavaScript 錯誤進行排名
哪個路由和前端版本會產生最廣泛的 JavaScript 錯誤影響？
開啟查詢範例按路線測量 SPA 導覽延遲
哪些目的地路線的客戶端導覽速度最慢？
開啟查詢範例按路由計算瀏覽器長任務率
哪些路線和版本在瀏覽器長任務中花費最多時間？
開啟查詢範例按主機查詢慢速前端資源
哪些資源主機和型別正在減慢或失敗頁面載入？
開啟查詢範例按實施系列瀏覽
比較相關整合模式
與此整合配對的範本
更多整合