前后端关联 Dashboard

欢迎回到第 12 章的学习。在上一节，我们学习了端到端追踪 Dashboard。现在我们要学习前后端关联 Dashboard，这是前后端可观察性整合的重要环节。

本节将学习：前后端性能对比、用户行为与系统性能关联、API 调用链路追踪、以及用户体验指标。

前后端性能对比

前后端性能对比的作用是什么？ 对比前端和后端的性能表现，识别性能瓶颈，优化整体性能。

前后端性能对比包括哪些呢？

第一个：响应时间对比。 前端响应时间和后端响应时间的对比。

第二个：错误率对比。 前端错误率和后端错误率的对比。

第三个：吞吐量对比。 前端请求量和后端处理量的对比。

第四个：性能趋势对比。 前端和后端性能趋势的对比。

如何设计前后端性能对比？ 使用并排图表展示前端和后端的性能指标，使用颜色编码表示性能状态。

性能对比查询：

# 前端响应时间
avg(frontend_page_load_time_seconds)

# 后端响应时间
avg(http_request_duration_seconds{service="order-service"})

# 前端错误率
sum(rate(frontend_errors_total[5m])) / sum(rate(frontend_requests_total[5m]))

# 后端错误率
sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m]))

用户行为与系统性能关联

用户行为与系统性能关联的作用是什么？ 关联用户行为和系统性能，了解用户行为对系统性能的影响。

用户行为与系统性能关联包括哪些呢？

第一个：用户操作与性能。 用户操作对应的系统性能表现。

第二个：用户路径与性能。 用户路径中各个节点的系统性能。

第三个：用户类型与性能。 不同类型用户对应的系统性能。

第四个：用户时段与性能。 不同时段的用户行为和系统性能。

用户行为与性能关联示例：

# 商品浏览操作对应的系统性能
avg(db_query_duration_seconds{db_operation="SELECT", db_table="products"}) by (product_id)

# 订单创建操作对应的系统性能
avg(http_request_duration_seconds{endpoint="/api/orders", method="POST"})

API 调用链路追踪

API 调用链路追踪的作用是什么？ 追踪前端 API 调用到后端处理的完整链路，识别 API 性能问题。

API 调用链路追踪包括哪些呢？

第一个：前端发起请求。 前端 API 调用的上下文。

第二个：网络传输。 请求的网络传输时间。

第三个：后端处理。 后端服务的处理时间。

第四个：数据库查询。 数据库查询的执行时间。

如何追踪 API 调用链路？ 使用 Trace ID 关联前端和后端的追踪数据，构建完整的 API 调用链路。

API 调用链路追踪示例：

用户体验指标

用户体验指标的作用是什么？ 衡量用户体验质量，评估系统对用户体验的影响。

用户体验指标包括哪些呢？

第一个：页面加载时间。 页面完全加载的时间。

第二个：交互响应时间。 用户交互的响应时间。

第三个：错误体验。 用户遇到的错误情况。

第四个：用户满意度。 用户的满意度评分（如果可用）。

如何设计用户体验指标？ 综合前端性能指标和后端性能指标，计算用户体验评分。

用户体验指标计算：

# 综合用户体验评分
# 页面加载时间权重: 30%
# 交互响应时间权重: 30%
# 错误率权重: 20%
# API响应时间权重: 20%

(
  (1 - (avg(frontend_page_load_time_seconds) / 3.0)) * 0.3 +
  (1 - (avg(frontend_interaction_time_seconds) / 0.5)) * 0.3 +
  (1 - (sum(rate(frontend_errors_total[5m])) / sum(rate(frontend_requests_total[5m])))) * 0.2 +
  (1 - (avg(http_request_duration_seconds) / 1.0)) * 0.2
) * 100

本节小结

在本节中，我们学习了前后端关联 Dashboard：

第一个是前后端性能对比。 对比前端和后端的性能表现，识别性能瓶颈，优化整体性能。

第二个是用户行为与系统性能关联。 关联用户行为和系统性能，了解用户行为对系统性能的影响。

第三个是 API 调用链路追踪。 追踪前端 API 调用到后端处理的完整链路，识别 API 性能问题。

第四个是用户体验指标。 衡量用户体验质量，评估系统对用户体验的影响。

前后端关联 Dashboard 设计流程： 设计性能对比 → 关联用户行为 → 追踪 API 链路 → 设计用户体验指标 → 持续优化。

这就是前后端关联 Dashboard。通过前后端关联 Dashboard，我们可以全面了解前后端的关联性能和用户体验。

在下一节，我们将学习数据库 Dashboard。学习如何设计数据库监控 Dashboard。