一款開源 Web 會話重放工具，幫我們快速定位問題

會話重放是每個產(chǎn)品和開發(fā)團(tuán)隊在產(chǎn)品投入生產(chǎn)后都需要的工具。這些工具使我們能夠了解最終用戶如何與產(chǎn)品交互。有了這些信息，我們可以了解諸如用戶體驗差距、由于用戶的不正確交互導(dǎo)致的業(yè)務(wù)邏輯問題、需要觸發(fā)復(fù)雜動作序列的邊緣案例以及許多其他選項。這里給大家推薦一款能夠支持裡會話的會話重放工具：「OpenReplay」。

OpenReplay 是一個可以自托管的會話回放套件，它可以讓我們查看用戶在我們的 Web 應(yīng)用程序上所做的事情，從而幫助我們更快地解決問題。

OpenReplay 具有以下能力

• 會話重放：OpenReplay 重播用戶所做的事情，同時它還通過捕獲網(wǎng)絡(luò)活動、控制臺日志、JS 錯誤、存儲操作/狀態(tài)、頁面速度指標(biāo)、cpu/內(nèi)存使用情況等來向我們展示網(wǎng)站或應(yīng)用程序的行為方式。
• 消耗?。菏褂眉s 18KB (.gz) 的跟蹤器異步發(fā)送最少的數(shù)據(jù)，對性能的影響非常有限。
• 自托管：不再有安全合規(guī)性檢查，第三方處理用戶數(shù)據(jù)。OpenReplay 捕獲的所有內(nèi)容都保留在我們自己的云中，以便完全控制我們的數(shù)據(jù)。
• 隱私控制：用于清理用戶數(shù)據(jù)的細(xì)粒度安全功能。
• 易于部署：支持主要公共云提供商（AWS、GCP、Azure、DigitalOcean）

特性

OpenReplay 具有以下特性：

• 會話重放：讓我們重溫用戶的操作，了解他們在哪里遇到問題以及如何影響他們的行為。每個會話重播都會根據(jù)啟發(fā)式自動分析，以便于分類。
• DevTools：就像在我們自己的瀏覽器中調(diào)試一樣。OpenReplay 為我們提供完整的上下文（網(wǎng)絡(luò)活動、JS 錯誤、存儲操作/狀態(tài)和 40 多個指標(biāo)），因此我們可以立即重現(xiàn)錯誤并了解性能問題。
• 協(xié)助：通過查看用戶的實時屏幕并立即與他們進(jìn)行溝通 (WebRTC) 來幫助我們支持用戶，而無需任何 3rd 方屏幕共享軟件。
• 全方位搜索：按幾乎任何用戶操作/標(biāo)準(zhǔn)、會話屬性或技術(shù)事件進(jìn)行搜索和過濾，因此我們可以回答任何問題。
• 渠道：用于發(fā)現(xiàn)導(dǎo)致轉(zhuǎn)化和收入損失的最有影響力的問題。
• 細(xì)粒度的隱私控制：選擇要捕獲的內(nèi)容、隱藏的內(nèi)容或忽略的內(nèi)容，這樣用戶數(shù)據(jù)甚至不會到達(dá)我們的服務(wù)器。
• 面向插件：通過跟蹤應(yīng)用程序狀態(tài)（Redux、VueX、MobX、NgRx、Pania 和 Zusand）和記錄 GraphQL 查詢（Apollo、Relay）和 Fetch/Axios 請求，更快地找到根本原因。
• 集成：將我們的后端日志與會話重播同步，并查看前后發(fā)生的情況。OpenReplay 支持 Sentry、Datadog、CloudWatch、Stackdriver、Elastic 等。

使用

這里，我們以 OpenReplay 的 Assist 功能為例，來簡單介紹一下使用。

我們可以使用以下命令來安裝 assist 插件

npm install @openreplay/tracker-assist

然后，通過以下代碼來開啟

//...
import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
const tracker = new OpenReplay({
  projectKey: "your project key"
});
tracker.use(trackerAssist({})); //add this line
tracker.start();

前端的操作就是這么簡單，接下來主要就是后臺的任務(wù)了。

查看會話清單

我們在托管的管理后臺上，點擊導(dǎo)航菜單上的Assist選項，如下圖

單擊此處后，我們將獲得活動輔助會話的列表。一旦用戶打開應(yīng)用程序，會話將自動出現(xiàn)在這里，我們將看到它如下所示：

我們可以看到以下信息：

• 用戶ID，我們可以使用跟蹤器上的 setUserID 方法進(jìn)行設(shè)置；
• 每個會話的開始時間和日期
• 會話的持續(xù)時間（在屏幕截圖中顯示為“14 秒”）。
• 關(guān)于用戶的地理信息

這里有很多信息，這對于我們確定要實時觀看的會話很重要。我們可以使用搜索欄來幫助執(zhí)行復(fù)雜的查詢以找到正確的會話。

查看特定會話

在找到要查找的會話后，單擊會話的“播放”圖標(biāo)。這將進(jìn)入客戶端應(yīng)用程序的實時視圖。

我們可以在下面的并排比較中看到“輔助”屏幕如何顯示正在觀察的當(dāng)前用戶的會話。

當(dāng)然，這里會有一些默認(rèn)行為，來保護(hù)用戶的隱私數(shù)據(jù)，跟蹤器會檢測用戶輸入的數(shù)據(jù)類型及其格式（如電子郵件字段）并決定現(xiàn)場保護(hù)它。

控制用戶的鼠標(biāo)

OpenReplay Assist 的一個額外的功能是控制客戶端鼠標(biāo)指針的能力。通過此功能，我們將能夠控制鼠標(biāo)并單擊應(yīng)用程序的不同位置。我們不能發(fā)送任何其他類型的輸入信號，不過這應(yīng)該足以幫助我們了。

要訪問此功能，我們只需單擊屏幕右上角的“遠(yuǎn)程控制”鏈接。當(dāng)我們這樣做時，客戶將看到一個請求權(quán)限的模式窗口。

確認(rèn)后，我們將控制他們的鼠標(biāo)，或者更確切地說，我們的指針將顯示在他們的屏幕上，我們將能夠單擊并與應(yīng)用程序交互，就像我們直接使用他們的鼠標(biāo)一樣?？梢栽谙旅娴钠聊唤貓D中看到，紅點是我們的輔助鼠標(biāo)，而黑色指針是用戶的。

小結(jié)

對于關(guān)心提供出色且完美的用戶體驗的團(tuán)隊而言，查看用戶對應(yīng)用程序所做的事情的能力是非常實用的。最重要的是，OpenReplay 擁有此功能并能夠在不需要任何額外軟件的情況下進(jìn)入會話并與用戶交互的能力。依托這些能力，我們能更準(zhǔn)確地定位出問題所在。

?

「OpenReplay」

地址：https://github.com/openreplay/openreplay

??：6.3k

語言：Python/TypeScript

?