瀏覽器測量跨越一個受控邊界
瀏覽器永遠不會收到攝取金鑰或選擇目標資料表。您的伺服器在轉發分析事件之前驗證小負載。
- 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 導覽延遲
哪些目的地路線的客戶端導覽速度最慢？
開啟查詢範例按路由計算瀏覽器長任務率
哪些路線和版本在瀏覽器長任務中花費最多時間？
開啟查詢範例按主機查詢慢速前端資源
哪些資源主機和型別正在減慢或失敗頁面載入？
開啟查詢範例按實施系列瀏覽
比較相關整合模式
與此整合配對的範本
更多整合