導語
用戶體驗（User Experience）提供了一種量化和分析 Web 應用程序感知性能的方法。與測試環境不同，用戶體驗數據反映了真實的用戶體驗。通過按 URL，操作系統，瀏覽器和位置查看數據來進一步細化 - 所有這些都會影響你的應用程序在最終用戶計算機上的性能。通過用戶體驗監控，我們可以知道誰在使用我們的網站，他們的用戶體驗咋樣。
概述
如上所示，我們可以通過用戶體驗監控瞭解 android 瀏覽器是否訪問太慢，或者用戶大多數什麼時候訪問我們的網站，他們大多數使用的是什麼瀏覽器。它是一個免費的功能，基於 Elastic Stack, 也是 Elastic Stack 可觀測性的一部分。通過和 APM，Logging， Metrics 的結合， 用戶體驗監控可以讓我們對網站的使用者有一個360度的全方位瞭解。
在 APM Real 用戶監視（RUM）代理的支持下，只需幾行代碼即可開始顯示關鍵的用戶體驗指標。數據通過 RUM 代理實時採集用戶的信息並傳送到 APM 服務器，再進一步傳入到 Elasticsearch。我們可以瞭解訪問網站的操作系統，瀏覽器，用戶的位置信息已經導航信息，比如裝載頁面的時間等。在 Kibana 中，我們可以通過用戶體驗應用中的圖表來表示出來。
爲什麼用戶體驗很重要？
當對網站進行自然排名時，搜索引擎越來越重視用戶體驗。Elastic 使你可以輕鬆地在 Google Core Web Vitals 的上下文中查看你的網站數據 - 這些指標對用戶體驗的三個關鍵方面進行了評分：加載性能，視覺穩定性和交互性。這些核心網絡生命力將成爲 Google 排名因素中的主要績效指標。如果你是要顯示在 Google 搜索結果的 “熱門故事” 部分中的基於內容的網站，則必須具有良好的 Core Web Vitals。
用戶體驗如何工作？
用戶體驗指標由 APM 真實用戶監視（RUM）代理提供支持。RUM 代理使用瀏覽器計時 API（例如導航計時，資源計時，繪畫計時和用戶計時）來捕獲用戶每次訪問你的頁面時的體驗指標。此數據存儲在 Elasticsearch 中，可以在其中使用 Kibana 對其進行可視化。
RUM 代理可以作爲對你的應用程序的依賴關係安裝，也可以僅使用幾行 JavaScript 進行安裝。只需幾分鐘即可開始。
查詢天氣網站
在今天的練習中，我將使用一個簡單的網站來做展示。你可以在地址 https://github.com/liu-xiao-guo/react-simple-weather-app 下載源碼。等下載完代碼，進入到項目的根目錄中，我們打入如下的命令：
npm install然後，我們執行如下的命令來運行：
REACT_APP_WEATHER_API_KEY=271d1234d3f497eed5b1d80a07b3fcd1 npm start在上面，我使用了一個申請的 API key 來訪問 https://openweathermap.org/。當網頁啓動後，我們可以看到各個城市的天氣：
安裝
Elastic Stack
我們需要安裝 Elasticsearch，Kibana 以及 APM 服務器。如果你還從來沒有安裝過 APM 服務，我們可以按照我們的文章 “Elastic：菜鳥上手指南” 來安裝及運行我們的 Elasticsearch 及 Kibana。如果你想安裝 APM 服務器，我們可以參考我之前的文章 “應用程序性能監控/管理(APM)實踐”。我們打開 Kibana 界面：
我們選擇合適的平臺來安裝 APM 服務器。在我們運行 APM 服務器之前。我們必須修改我們的 apm-server.yml 進行修改。我們在 apm-server.yml 文件的最後添加：
apm-server.rum.enabled: true等修改完上面的配置後，我們可以按照如下的方式來運行 APM 服務器：
./apm-server -e上面的運行方式是在 MacOS 上的。在實際的使用中，你需要根據自己的平臺按照 Kibana 中所提示的方式來運行。
用戶體驗監控
在上面的 Kibana 頁面中，我們向下來滾動屏幕：
我們選擇 RUM 並按照上面的要求來進行修改之前的天氣網站。我們進入到天氣網站的源碼的根目錄下：
01
$ pwd/Users/liuxg/nodejs/react-simple-weather-app$ npm install @elastic/apm-rum --save
02
import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./app";import { init as initApm } from '@elastic/apm-rum'var apm = initApm({// Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space)serviceName: 'weather',// Set custom APM Server URL (default: http://localhost:8200)serverUrl: 'http://localhost:8200',// Set service version (required for source map feature)serviceVersion: '1'})ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById("root"),);
在上面，我們添加了 apm 相關的部分代碼。
好了，我們的修改就已經完成了。我們再次按照上面的方法來重新運行網站：
REACT_APP_WEATHER_API_KEY=271d1234d3f497eed5b1d80a07b3fcd1 npm start我回到 Kibana 的用戶體驗監控界面：
我們刷新天氣網站，我們可以看見 Total page views 的數據將會變化。
因爲我們採用的是 localhost 來訪問的，所以沒法顯示訪問的 IP 地理位置信息。否則的話，我們可以在如下的地圖中看到來自世界各地的訪問。我使用的是 Chrome 瀏覽器，同時是在 Mac OS 進行的訪問。在如下的圖中，它可以顯示瀏覽器及操作系統的分佈。
正文完
作者：劉曉國
本文編輯：喝咖啡的貓
嗨，互動起來吧！
喜歡這篇文章麼？
歡迎留下你想說的，留言 100% 精選哦！
Elastic 社區公衆號長期徵稿，如果您有 Elastic 技術的相關文章，也歡迎投稿至本公衆號，一起進步! 投稿請添加微信：medcl123
招聘信息
Job board
社區招聘欄目是一個新的嘗試，幫助社區的小夥伴找到心儀的職位，也幫助企業找到所需的人才，爲伯樂和千里馬牽線搭橋。有招聘需求的企業和正在求職的社區小夥伴，可以聯繫微信 medcl123 提交招聘需求和發佈個人簡歷信息。
關
注
我
們
Elastic中文社區公衆號 (elastic-cn)
爲您彙集 Elastic 社區的最新動態、精選乾貨文章、精華討論、文檔資料、翻譯與版本發佈等。
喜歡本篇內容就請給我們點個[在看]吧
本文分享自微信公衆號 - Elastic中文社區（elastic-cn）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。