如果你没有一个集中的地方来查看这些指标，那么测量应用程序的性能又有什么意义呢？

毫无意义，这就是答案。

而与此同时，这也正是 OpenReplay 最近为其用户添加创建自定义仪表板功能的原因。

通过这些仪表板，用户可以创建一个单一的可视化视图，在其中一目了然地了解整个应用程序的状态。

此外，你可以为自己或整个团队创建仪表板。这样一来，如果不止一个人需要某个仪表板，就无需重复创建它了。

让我们来看看用户如何做到这一点。

注意： 如果你想要一个快速教程，向你展示如何实现一个带有自定义指标的仪表板，可以查看这个 YouTube 视频。

点击主菜单上的 Dashboards 部分即可开始。

然后点击屏幕正中央正盯着你看的 “Create Dashboard” 按钮：

一旦你点击它，系统就会向你展示 OpenReplay 关于你的应用程序所捕获的每一项指标。

你可以将这些指标归入以下几个类别来理解：

• 与错误相关：这些指标会向你展示应用程序中的问题。
• 与性能相关：通过这些指标，你将能够评估你的应用程序为用户运行得如何。
• 与资源相关：图片无法加载，或者由于 JavaScript 文件过大而导致的速度变慢，这类问题正是你通过这些指标能够准确定位的。
• Web Vitals：这些是像 Google 这样的搜索引擎用来判断网页/应用程序质量的指标。
• 与会话相关：这些是关于实际回放的指标，它们能让你了解应用程序的流量有多大，以及你捕获了其中多大比例的流量。

让我们来看看我们的指标如何在这些分组中进行组织，以及每一项的含义：

• Errors by Origin：每天的错误数量，按第三方错误与第一方（你自己的）错误进行划分。
• Errors by Type：按状态码、JavaScript 或与其他服务的集成分类的错误数量。
• Errors Per Domain：所选时间段内的错误数量（按域名分组）。
• Fetch Calls with Errors：出现 5xx-4xx 的 fetch 调用/响应。
• Sessions Affected by JS Errors：每天受 JS 错误影响的会话数量。
• Top Domains with 4XX Fetch Errors：出现 Bad Request 类型错误的主要域名
• Top Domains with 5XX Fetch Errors：错误来自服务器端的主要域名。
• Crashes：你的应用程序每天的崩溃次数。

• CPU Load：每天的平均 CPU 负载。
• DOM Build Time：构建应用程序整个 DOM 所需的平均时间，按时间分布显示。
• Slowest Domains：下载最慢资源（js、css、图片）的来源域名。
• Request Load Time: 一个 http（fetch/xhr/axios）请求的响应时间。
• Response Time：对应用程序发送的请求的平均响应时间。
• Memory Consumption：你项目所有录制中的平均内存消耗。
• Sessions impacted by Slow Pages：每天检测到慢速页面的会话数量。
• Frame Rate：你的 UI 的平均响应能力。
• Page Load Time：从浏览器向后端发送请求的时刻到页面加载完成的时刻所经过的平均时间。
• Pages Response Time：你的服务器将响应从浏览器返回所需的平均时间。
• Pages Response Time Distribution：页面响应时间（加载）的分布，以便你能够发现

• Breakdown of Loaded Resources：每天加载的资源数量，按 CSS、图片和脚本进行区分。
• Missing Resources：无法加载因而缺失的图片（主要）、字体、图标、样式表或 js。这意味着渲染它们的那些页面将受到影响。
• Resources Fetch Time：不同资源加载所需的平均时间
• Slowest Resources：最慢资源的列表及其相关的加载时间。
• Image Load Time：你的图片加载所需的平均时间。
• Resources Loaded vs. Visually Complete：已加载资源的数量与它们完成视觉加载所需时间之间的对比（如图片，但也将脚本和 CSS 纳入考虑）。
• Resources loaded vs. Response End：通过 XHR（及其他类型请求）加载的资源数量与后端交付它们所花费时间之间的对比。

• Time to Interactive：你的 UI 变得完全可交互（可响应用户输入）所需的平均时间。
• Speed Index by Location：你页面的可见内容完成填充所需的平均时间（按国家/地区计）。
• First Paint：浏览器渲染你 UI 的第一个像素所需的平均时间。
• DOM Content Loaded：初始 HTML 文档完全加载并被浏览器解析所需的平均时间（不考虑样式表、图片和子框架）。
• Time to Render：浏览器渲染已加载 DOM 所需的时间。如果能显示与 DOM Content Loaded 的差异就更好了。
• Time Till First Byte：你的用户浏览器在请求页面后接收到第一个字节所需的平均时间。

• Captured Requests：每个录制会话中所发出的请求数量。
• Captured Sessions：随着时间推移为某个项目捕获的会话数量。
• No. of Visited Pages：一次会话期间访问页面的平均数量。
• Sessions Per Browser：为某个特定浏览器（例如 Chrome）捕获了多少会话。
• Session Duration：你项目每天的平均会话时长。

你有 40 项指标可供选择，这意味着无论你在寻找什么，你都可以创建你所需要的那种仪表板。

在向你展示指标列表后，你只需点击你想要的那些，等你全部选好后，点击位于屏幕左下角的 “Create” 按钮即可。

除了平台提供的预定义指标之外，你还可以创建自己的指标，以全面自定义你仪表板内所拥有的详细程度。 在同一个 Dashboards 部分中，不要创建新仪表板，而是点击屏幕左侧的 Metrics 选项并选择 “Create Metric”。

给它起个名字，在我的例子中我会把它命名为 “Sessions from Spain”（你稍后就会明白为什么）。 然后选择指标类型，你有：

• Timeseries：这将绘制符合下方筛选条件的会话数量。
• Table of [option]：这将列出你为 “option” 所选择的内容（它可以是 Users、Sessions、JS Errors、Issues、Browsers、Devices、Countries 和 URLs）。此列表中的每个元素都是可点击的，你将能够从中获取更多详细信息。
• Funnels：它将基于你所选择的筛选条件创建一个漏斗（查看这个教程以了解如何利用漏斗）。

如果你想了解如何使用 JSErrors 列表，请查看这个另外的教程。

在这个示例中，我将创建一个指标，列出产品页面上所有来自西班牙的会话。这将让我快速查看在我所选时间窗口内获得了多少会话，与此同时，我只需轻轻一点便能重现它们。

你可以复制这个指标，并按其他国家/地区对它们进行筛选，这样你就可以一目了然地了解谁从不同国家/地区访问你网站的某个特定部分，以及他们是如何与之交互的。

例如，假设你正试图创建一个简单的仪表板，显示速度缓慢的各项指标，以了解与缓慢相关的问题来自何处。 在此基础上，你还想添加来自西班牙、已到达你电子商务网站产品页面的人员列表。

那么你将选择：

• Slowest resources
• Sessions impacted by Slow Pages
• Framerate
• Response time
• Time to Interactive
• 你自定义的 “Sessions from spain” 指标

根据你的使用场景，你可能会考虑添加其他指标，但在这个示例中，这些指标将为我们提供我们试图理解的完整画面：我们的页面是否缓慢以及是什么导致了这种情况。 结果应该看起来类似这样：

你所添加的小组件可以随意移动，以确保你最先看到你最感兴趣的那些。

你还可以更改用于绘制这些指标图表的时间窗口。默认情况下，正如你在仪表板右上角所看到的，这些小组件向你展示的是最近 7 天的数据。 你可以将时间范围更改为：

• Today，仅向你展示今天迄今为止收集到的数据。
• Yesterday，向你展示前一天的摘要。
• Past seven days，这是默认选中的选项。
• Past 30 days，向你展示更大的时间范围。
• Custom range，让你选择你想要的时间范围。

你还可以使用标题旁边、左上角的 “Add Metric” 按钮，继续向新仪表板添加指标。

你可以随心所欲地创建任意多个仪表板；它们可以充当你系统的不同视图，向你展示正在发生情况的综合摘要。然后你可以用它们来筛选回放，了解你的应用程序中正在发生什么。

如果你在为项目设置自定义仪表板时遇到任何问题，请通过我们的 Slack 社区联系我们，直接向我们的开发人员提问！