使用开放式遥测进行前端故障排除

与后端开发一样，可观测性在前端开发中变得越来越重要，尤其是在故障排除方面。例如，假设一个简单的电子商务应用程序，其中包括移动应用程序、Web 服务器和数据库。如果用户在尝试购买时报告应用冻结，则确定问题的根本原因可能具有挑战性。这就是OpenTelemetry的用武之地。

本文将深入探讨前端开发人员如何利用 OpenTelemetry 来提高可观测性并有效地解决此类问题。

为什么要进行前端故障排除？

与后端开发类似，故障排除是前端开发的一个关键方面。例如，考虑一个简单的电子商务应用程序结构，其中包括移动应用程序、Web 服务器和数据库。假设用户报告应用在尝试购买深色主题机械键盘时冻结。

如果没有前端跟踪，我们将没有足够的关于问题的信息，因为它可能是由不同的因素引起的，例如前端或后端、延迟问题等。我们可以尝试收集日志以获得一些见解，但关联客户端和服务器端日志具有挑战性。我们可能会尝试从移动应用程序重现该问题，但如果客户端条件不可用，则可能非常耗时且不可能。

但是，如果未重现该问题，则需要更多信息来确定特定问题。这就是前端跟踪派上用场的地方，因为借助前端跟踪，我们可以停止做出假设，而是明确问题的位置。

使用分布式跟踪进行前端故障排除

跟踪数据按跨度进行组织，跨度表示单个操作，如 HTTP 请求或数据库查询。通过以树状结构显示跨度，开发人员可以获得其系统的全面实时视图，包括他们正在检查的特定问题。这使他们能够进一步调查并确定问题的原因，例如瓶颈或延迟问题。跟踪可以成为查明问题根本原因的宝贵工具。

下面的示例显示了三个简单的组件：前端、后端和数据库。

 

出现问题时，跟踪将包含来自前端应用和后端服务的跨度。通过查看跟踪，可以识别在组件之间传输的数据，从而使开发人员能够跟踪从前端中的特定用户单击到数据库查询的路径。

通过跟踪，您可以直观地表示问题，而不是依靠猜测来识别问题。例如，可以确定请求是否从设备发出、后端是否响应、响应中是否缺少某些组件以及可能导致应用无响应的其他因素。

假设我们需要确定延迟是否导致了问题。在Helios中，有一个功能可以显示跨度的持续时间。下面是它的样子：

 

现在，您可以简单地分析跟踪以查明瓶颈。此外，跟踪中的每个跨度都有时间戳，使你能够准确查看每个操作的发生时间以及处理请求时是否存在任何延迟。

Helios附带了一个专门为此目的创建的跨度浏览器。资源管理器允许根据持续时间或时间戳对跨度进行排序：

 

跟踪可视化提供有关每个操作所花费时间的信息，这有助于确定需要优化的区域。

Jaeger 中提供的默认视图也是通过显示跟踪细分来探索所有瓶颈的有效方法。

 

 

在 OpenTelemetery 中将前端检测添加到您的迹线：高级用例

建议在跟踪中包含前端检测，以增强分析瓶颈的能力。虽然OpenTelemetry提供的许多SDK都是为后端服务设计的，但值得注意的是，OpenTelemetry也为JavaScript开发了SDK。此外，他们计划在未来发布更多客户端库。下面，我们将看看如何集成这些库。

聚合跟踪

将来自不同请求的多个跟踪聚合到一个大型跟踪中对于分析整个流非常有用。例如，假设一个涉及三个 REST 请求的购买过程，例如验证用户、向用户计费和更新数据库。

若要将此流视为所有三个请求的单个跟踪，开发人员可以创建一个自定义跨度，将所有三个请求封装到一个流中。这可以使用如下所示的代码示例来实现。

const { createCustomSpan } = require('@heliosphere/web-sdk'); 
const purchaseFunction = () => {     validateUser(user.id);    chargeUser(user.cardToken);    updateDB(user.id); }; 
createCustomSpan("purchase", {'id': purchase.id}, purchaseFunction);

从现在开始，跟踪将包括在 、 和 类别下生成的所有跨度。这将使我们能够将整个流视为单个跟踪，而不是每个请求的单独跟踪。validateUserchargeUserupdateDB

添加跨度事件

在调查和分析前端瓶颈时，添加有关特定事件的信息可能很有用。借助OpenTelemetry，开发人员可以利用称为跨度事件的功能，该功能允许他们包含有关事件的报告并将其与特定跨度相关联。

跨度事件是跨度上的一条消息，用于描述没有持续时间的特定事件，可以通过单个时间戳标识。它可以被视为基本日志，并以以下格式显示：

const activeSpan = opentelemetry.trace.getActiveSpan(); activeSpan.addEvent('User clicked Purchase button);

跨度事件可以收集各种数据，例如点击、设备事件、网络事件等。

添加行李

行李是OpenTelemetry提供的一项有用功能，允许向跟踪添加上下文信息。此信息可以在跟踪中的所有跨度中传播，并且有助于传输用户数据，例如用户标识、首选项和 Stripe 令牌等。

此功能可以使前端开发受益，因为用户数据是该领域的关键元素。您可以在此处找到有关行李的更多信息。

部署前端检测

部署添加到跟踪的检测非常简单，就像部署任何其他开放遥测 SDK 一样。此外，您可以使用 Helios 的 SDK 可视化并获得更多见解，而无需设置自己的基础设施。

为此，只需访问 Helios 网站，注册，然后按照步骤安装 SDK 并将代码片段添加到您的应用程序中。Helios前端SDK的部署说明如下所示：

 

从这里开始：前端开发人员的后续步骤

启用前端检测是一个简单的过程，可为全栈和前端开发人员解锁大量新的故障排除功能。它允许您从 UI 单击开始绘制事务，并引导到特定的数据库查询或计划作业，从而为瓶颈识别和问题分析提供独特的见解。OpenTelemetry和Helios都支持前端仪器，使开发人员更容易访问它。立即开始使用这些工具来增强您的开发工作流程。