當移動互聯網與云計算出現后，用戶不必再和企業的服務人員打交道，而是通過移動APP來直接獲取服務，這就造成用戶體驗前置。傳統的ITOM產品由于缺少有效的移動端和云端監管手段，難以發現用戶體驗前置帶來的性能瓶頸，云智慧面向業務的端到端性能管理平臺透視寶以業務的視角，對整個用戶體驗交付鏈條的每一個環節進行數據采集和分析，準確發現和定位影響用戶體驗的任何性能問題。
目前透視寶前端應用包含以下幾個，關系圖如下所示
透視寶通過主站與用戶進行直接交互，為用戶提供網站、移動App、主機、服務等應用的性能數據。用戶認證、數據中心、文檔中心應用都是直接或間接為主站提供服務，本次說明只針對透視寶主站，以下使用的前端均指主站前端服務。
服務布局
透視寶前端涉及到以下幾個服務：
DataSource為后端數據系統，通常情況下的請求流程如下：用戶發出請求后首先訪問到Tengine，Tengine作為反向代理把請求轉發到Apache，Apache調用PHP首先從Redis獲取信息，若無數據則從Mysql中補充，如果請求含有主機、服務、應用等數據則會從Elasticsearch中獲取。
前端應用架構
云智慧透視寶前端使用PHP作為開發語言，使用了Seaslog的日志擴展，Cwop的用戶管理擴展，Redis擴展，yaf擴展(CwopServer端依賴)，其作用如下：
- Seaslog:PHP日志模塊，為開發人員提供線上線下日志情況的分析材料
- Curl:PHP Rest服務基礎，為PHP調用后端Api接口提供支持
- Yaf:Cwop的Server為yaf框架開發，依賴PHP的yaf框架
- Cwop:Cwop的php客戶端
PHP使用目前流行的Laravel框架進行開發，前端運行流程如下所示：
Laravel提供了多語言，數據庫，緩存，郵件，依賴包管理等功能，極大提高了透視寶的開發效率，以下是透視寶前端兩個比較重要的功能：
- 1．UnitTest - Laravel集成并強化了PHP的單元測試功能，結合谷歌插件，使開發人員可以完成端到端的調試工作；
- 2．Artisan命令行工具 - 結合Linux的Crontab，完成了郵件發送，SmartAgent插件管理、心跳管理，告警交互等功能，單獨使用時可以執行腳本完成數據庫的自動化修改；
從PHP處理數據到前端頁面展現我們使用了目前流行的：
- 3．BootstrapCss框架,使前端頁面美觀自適
- 4．Seajs為透視寶使用的JS模塊選擇加載框架
- 5．Echarts作為透視寶使用的繪圖工具，其適應性，可操作性都是非常良好的，透視寶所有版面的圖片基本都是Echarts生成的。
數據采集流程
透視寶數據采集分為三個來源：
- 1.用戶安裝SmartAgent，插件采集，通過SendProxy發送的數據。
- 2.用戶安裝SmartAgent插件后注入JS，或手動注入JS，JS采集的數據。
- 3.移動端嵌入SDK，采集移動APP數據。
如下圖所示：
數據采集使用Sendproxy為SmartAgent的調度器，所有SmartAgent的數據都經過Sendproxy進行統一調度發送。
其主要優勢在于：
- 發送隊列，保證各插件數據發送的穩定性
- 可以作為代理，部署都可聯外網的主機，可以保證局域網非聯網環境的數據發送
端到端實現原理
端到端是透視寶的重要功能特色，其實現原理簡單地說，把請求流程中所有途經節點都記錄下來，通過code堆棧和服務采集的數據還原請求所遍歷的過程。
上圖是一個請求拓撲，是典型的Nginx Proxy，Apache Server，PHP解析，Mysql DB的架構，請求經過了Nginx->Apache->PHP->Mysql&Api，在各節點上點擊可以查看：
- 請求當時各服務的運行狀態
- 請求的代碼堆棧，SQL連接，異常信息，連接狀態
實現原理如下(默認各節點已經安裝了我們的SmartAgent)：
請求到Nginx時，Nginx在請求中添加唯一id標志，然后轉發到Apache,Apache在請求中收到我們的id標志,則會延用此id,請求交到PHP,同理PHP，Mysql等也會在請求中延用此id標志。
PHP獲取數據處理完成后請求結束，開始響應過程，PHP在響應信息中添加相同的id標志，交還給Apache，Apache返回Nginx時會在響應信息中延用此id,Nginx把內容發送到瀏覽器靜態頁面時，連同id與我們的JS文件發送到用戶端，用戶端JS捕獲瀏覽器數據后發送到我們的后端DataSource處理。
透視寶獲取到PHP應用帶有此id的請求數據時，可以查到Nginx,Apache的請求信息，也可以獲取Mysql,Api的請求信息，端到端的拓撲圖也就形成了，通過id可心獲取終端用戶的信息。如果終點的Api也使用了我們的CodeAgent，則會轉化成應用，與前面的PHP一樣繼續向后延伸，否則只顯示請求的Api信息，獲取不到Code詳情。
在上述過程中，Nginx Agent,Apache Agent,Mysql Agent一直持續發送數據，所以當點擊Nginx時就可以根據請求時間獲取Nginx的即時狀態，為用戶端到端的分析提供強有力的支持。
下面提供一個前后端數據交互的完整點的簡圖，其中DataSource對Mysql的操作是通過透視寶應用的接口實現的
