OpenCensus Web:前端性能監控與數據化運營的將來方案

做者：青現 方凳雅集出品

概述
谷歌推出了一個名爲OpenCensus Web的OpenCensus擴展，它是一個用於收集網頁應用程序性能和行爲監控數據的庫。該庫側重於在瀏覽器中執行的前端Web應用程序代碼，容許它收集用戶端性能數據。它仍處於alpha階段，API可能會發生變化。

OpenCensus Web與三個應用程序組件交互，即前端Web服務器，Browser JS和OpenCensus Agent。OC Agent從前端Web服務器代理端點或直接從瀏覽器JS接收消息，並將它們傳遞到後端。

OpenCensus Web的目前主要的特性：

OC Web的跟蹤跨越了初始加載階段，包括服務器端HTML渲染、DOM加載事件和網絡事件的詳細註釋
只要在DOM元素中完成單擊而且未禁用，就會自動跟蹤全部單擊事件
OC Web經過對History API進行修補來跟蹤頁面不一樣部分之間的路由轉換
它容許用戶爲其Web應用程序建立自定義跨度，以用於用戶交互中涉及的任務或代碼
據此能夠看出，一方面OC將對那些性能壓力較大的網站優化本身的加載性能有很大的幫助，例如優酷、愛奇藝等媒體驅動的網頁。另外一方面，這一技術的出現，也將爲前端數據化運營提供了全新的數據採集方案。隨着跟蹤監控窗口的進一步擴大，用戶的訪問、操做和來源監控將更加精準。這將有助於網站實現Growth hacking。

具體介紹
OpenCensus Web是一種跟蹤和監控用戶行爲，感知網頁性能的工具。以現有的技術工程師一般難以作到遠程診斷網頁性能。惟一能作的就是PWA或者是儘量的壓縮你的代碼。今天，Google正在開發的OpenCensus Web（OC Web）將幫助全部的前端開發者簡單自動的獲取客戶端的性能和操做數據。

背景
OpenCensus項目提供了一組特定的語言檢測庫，可從後端應用程序中收集日誌信息，並將其導出到跟蹤和監視後端，如Prometheus，Zipkin，Jaeger，Stackdriver等。

OpenCensus Web庫是OpenCensus的一個實現，專一於監控在瀏覽器中執行的前端Web應用程序代碼。 OC Web做爲收集用戶端性能數據的手段，包括延遲和分佈式跟蹤，爲開發人員提供診斷前端問題和監控總體應用程序運行情況的信息。

OpenCensus系列項目正在與OpenTracing與合併至OpenTelemetry。一旦OpenCensus Web準備就緒，它的功能將被遷移到OpenTelemetry JS中，儘管OC Web將在此期間繼續做爲alpha版本運行。

架構
OC Web與三個應用程序組件交互：
前端Web服務器（Frontend web server）：將初始HTML呈現給瀏覽器，包括OC Web庫代碼和配置。這一般會使用OpenCensus服務器端庫（Go，Java等）進行檢測。咱們還建議您在服務器中建立一個接收端來接收OpenCensus代理的HTTP / JSON跟蹤和代理。
瀏覽器代碼（Browser JS）：在瀏覽器中運行的OC Web庫代碼。這會測量用戶交互並收集瀏覽器數據，並經過HTTP / JSON將其寫入OpenCensus代理。
OpenCensus代理（OpenCensus Agent）：從前端Web服務器代理端點或直接從瀏覽器JS接收跟蹤信息，並將它們傳輸到後端（例如Stackdriver，Zipkin）。

特徵
初始頁面加載跟蹤
可使用OC Web捕獲初始頁面加載的痕跡，甚至能夠捕獲在瀏覽器加載OC Web庫以前發生的事件！初始頁面加載跟蹤顯示哪些資源可能致使網站性能不佳，幷包含一般沒法從分佈式跟蹤系統捕獲的數據。

爲了測量整個初始頁面加載交互的時間，OC Web等待文檔加載事件以後，經過瀏覽器的Navigation Timing和Resource Timing API來生成初始加載性能的時序。如下是OC Web的追蹤示例，該時間線是從初始加載示例應用程序中捕獲並導入到Zipkin中的。請注意「nav./」這個時間段是用戶整體的加載體驗時間。
此示例還包括用於客戶端和服務器端測量初始HTML負載的「/」時間段。這些時間段經過服務器以W3C跟蹤上下文格式發送回’window.traceparent'變量來拼接，由於瀏覽器不會爲初始頁面加載發送跟蹤上下文頭。服務器端加載的時間段包括瞭解析和渲染模板所花費的時間，這部分時間也應該計算在用戶的加載時間中：

自動追蹤點擊事件
只要在DOM元素（例如按鈕）中完成單擊而且未禁用單擊的元素，就會跟蹤全部瀏覽器單擊事件。 當用戶單擊元素時，將建立一個新區域來測量此交互並肯定總時間。

爲了命名這個根時間段，咱們爲開發人員提供了將屬性data-ocweb-id添加到元素併爲交互提供自定義名稱的選項。 對於下一個示例，結果名稱將爲「Save edit user info」：

<button type="submit" data-ocweb-id="Save edit user info">

Save changes

</button>
這有助於您識別與特定元素相關的跟蹤。 此外，當存在相似的交互時，這能夠避免模糊。 若是您不添加此屬性，OC Web將使用DOM元素ID，標記名稱以及交互中涉及的事件。 例如，單擊此按鈕：

<button id="save_changes"> Save changes </button>
將生成一個名爲「button#save_changes click」的時間段。

路由轉換的自動跟蹤
OC Web經過對History API進行猴補丁技術來跟蹤頁面不一樣部分之間的路由轉換。 OC Web將使用「Navigation / path / to / page」模式命名這些交互。 從用戶交互示例導出到Stackdriver的跟蹤如如下屏幕截圖，其中包括在路由轉換完成以前的多個網絡調用：

建立本身的自定義跨度
OC Web容許您使用自定義跨度來檢測Web應用程序，以執行用戶交互中涉及的任務或代碼。 這是一段代碼片斷，展現瞭如何執行此操做：

import { tracing } from '@opencensus/web-instrumentation-zone';

function handleClick() {

// Start child span of the current root span on the current interaction.
// This must run in in code that the button is running.
const childSpan = tracing.tracer.startChildSpan({

name: 'name of your child span'

});
// Do some operation...
// Finish the child span at the end of it's operation
childSpan.end();
}
參考資料：

OpenCensus Web: Unlocking Full End-to-End Observability for Your Entire StackOpenTracing and OpenCensus merge into OpenTelemetry project; Google introduces OpenCensus WebMonkey patching in JavaScript