单页应用程序_在单页应用程序中使用JavaScript遥测的重要性

最新推荐文章于 2024-09-09 18:34:56 发布

weixin_26750481

最新推荐文章于 2024-09-09 18:34:56 发布

阅读量136

点赞数

文章标签： python

原文链接：https://blog.bitsrc.io/importance-of-using-javascript-telemetry-for-single-page-apps-9805b8ffd563

版权

单页应用程序

We typically configure Telemetry and Monitoring for the backend code and infrastructure. It is crucial to capture these data to understand how our environment functions and to trace when something goes wrong.

我们通常为后端代码和基础结构配置遥测和监视。捕获这些数据以了解我们的环境如何运行并在出现问题时进行跟踪至关重要。

Sadly, most of us hardly put the same level of precedence for Frontend Telemetry. Some of you might wonder whether it’s even necessary. At least I was having the same mindset until I started capturing the JavaScript telemetry of a single-page app for the first time.

可悲的是，我们大多数人几乎没有为前端遥测技术提供相同的优先级。你们中有些人可能会怀疑是否有必要。至少在我第一次开始捕获单页应用程序JavaScript遥测之前，我一直有相同的心态。

After looking at the data, I really felt, how handicapped we were by neglecting the frontend telemetry all these years.

看完这些数据后，我真的感觉到，这些年来一直忽略前端遥测技术，对我们来说是多么的残障。

In this article, I will be taking you through the recent experience of capturing frontend telemetry with Azure App Insights, JavaScript SDK, and the opportunities it brought towards our doorstep.

在本文中，我将带您了解使用Azure App Insights，JavaScript SDK捕获前端遥测的最新经验，以及它为我们带来的机遇。

不要错过难题的重要组成部分。 (Don’t miss a vital part of the puzzle.)

In a single-page app, most of the backend operations are trigger by user interactions happening in the web browser. These interactions could vary from a single click to a complex state machine handled by your JavaScript code. When we set up telemetry only for the backend, we lose the big picture of whats going on.

在单页应用程序中，大多数后端操作是由Web浏览器中发生的用户交互触发的。这些交互可能从单击到由JavaScript代码处理的复杂状态机不等。当我们仅为后端设置遥测时，我们就不会了解发生了什么。

Image for post — Frontend and Backend Telemetry Overview

If you look at the above diagram, it illustrates what we can generate from telemetry data when we combine frontend and backend telemetry data.

如果您查看上面的图，它说明了当我们组合前端和后端遥测数据时可以从遥测数据生成的内容。

For example, after I set up the App Insight JavaScript SDK inside the single page app, the latency of each request became apparent. Also, I was able to connect the sequence of actions happening from the browser. Besides, this information is crucial to understand the end to end web app behavior.

例如，在单页应用程序中设置App Insight JavaScript SDK之后，每个请求的等待时间就变得很明显。另外，我还可以连接浏览器中发生的操作序列。此外，此信息对于了解端到端Web应用程序行为至关重要。

捕获完整动作序列的价值 (Value of capturing the full sequence of actions)

As soon as we started capturing the telemetry from JavaScript, we were able to trace up to the level of the UI component, which initiates the Backend HTTP calls. This information allows us to trace back any issue back to the UI component since some of them use the same Backend resources and methods.

一旦我们开始从JavaScript捕获遥测，就可以追溯到UI组件的级别，该组件启动了后端HTTP调用。此信息使我们可以将任何问题追溯到UI组件，因为其中一些使用了相同的后端资源和方法。

Also, having the insight for the entire sequence of actions gave me better confidence when investigating issues. For instance, it was natural for me to start tracing any errors, starting from the action trigger inside the browser.

另外，对整个动作序列的洞察力使我在调查问题时更有信心。例如，从浏览器内部的动作触发器开始，对我来说很自然地开始跟踪任何错误。

You can see a visual diagram of this in Azure App Insight, where it highlights the arrow (1) -> (2) in shown in the above diagram in red, displaying the relevant error codes in place. Besides capturing these telemetry doesn’t need any additional configurations with App Insights JavaScript SDK. These are default features.

您可以在Azure App Insight中看到一个可视化的图表，该图表以红色突出显示了上图中的箭头(1)->(2)，并在适当位置显示了相关的错误代码。除了捕获这些遥测外，App Insights JavaScript SDK不需要任何其他配置。这些是默认功能。

使用遥测进行性能评估 (Using telemetry for performance evaluations)

After adding the support for frontend telemetry capture, we started seeing the real performance data from the end-user perspective. Previously we only measured the backend performance.

添加了对前端遥测捕获的支持后，我们开始从最终用户的角度查看实际性能数据。以前，我们仅测量后端性能。

The significant finding we had here was that better backend performance didn’t always correlate with the end to end performance. There were instances where the amount of data transferred is large enough to results in poor performance impacting the overall response time.

我们在这里获得的重要发现是，更好的后端性能并不总是与端到端性能相关。在某些情况下，传输的数据量足够大，从而导致性能下降，从而影响总体响应时间。

Also, some pages had multiple requests traveling to the backend, which results in increasing the individual response time depending on the network bandwidth used by the end-users. Although we were able to simulate them, later on, to find the actual root causes, without capturing this telemetry information of HTTP requests at the browser level, we won’t be able to find these issues in the first place.

同样，某些页面有多个请求传输到后端，这导致最终用户增加了单独的响应时间，具体取决于最终用户使用的网络带宽。尽管我们能够对其进行仿真，但是稍后可以找到实际的根本原因，而又没有在浏览器级别捕获HTTP请求的遥测信息，则我们将无法首先找到这些问题。

Azure App Insights allowed us to sort all the request-response data, where we can clearly visualize which actions violate the performance criteria set for the application based on statistical data.

Azure App Insights允许我们对所有请求-响应数据进行排序，在此我们可以清晰地可视化哪些操作违反了根据统计数据为应用程序设置的性能标准。

摘要 (Summary)

I feel the decision behind capturing frontend telemetry is one of the most effective choices I have made very recently. Today I recommend capturing JavaScript telemetry for all my project teams.

我觉得捕获前端遥测背后的决定是我最近做出的最有效的选择之一。今天，我建议为我所有的项目团队捕获JavaScript遥测。

One of the initial setbacks I had was the uncertainty of the impact towards overall application performance when we start capturing frontend telemetry data. After trying out this with Azure App Insights JavaScript SDK, I’m confident that the effect is hardly visible.

我最初遇到的挫折之一就是当我们开始捕获前端遥测数据时对整体应用程序性能的影响的不确定性。在使用Azure App Insights JavaScript SDK进行尝试之后，我相信效果几乎是不可见的。

Besides, setting up frontend telemetry was almost as easy as adding Google Analytics to a web page. However, when capturing advanced telemetry data at UI component level, it required to write some additional code. But still, the complexity is less if you can plug it into the lifecycle methods of the framework you are using.

此外，设置前端遥测几乎就像将Google Analytics(分析)添加到网页一样容易。但是，在UI组件级别捕获高级遥测数据时，需要编写一些其他代码。但是，如果您可以将其插入正在使用的框架的生命周期方法中，则复杂性会降低。

I hope this article was convincing enough for you to consider capturing JavaScript telemetry data in your single-page apps. If you have any questions regarding any area I discussed, feel free to drop in a comment.

我希望这篇文章足够有说服力，让您考虑在单页应用程序中捕获JavaScript遥测数据。如果您对我所讨论的任何领域有任何疑问，请随时发表评论。

使用Bit共享和管理可重用JS组件 (Share & Manage Reusable JS Components with Bit)

Use Bit (Github) to share, document, and manage reusable components from different projects. It’s a great way to increase code reuse, speed up development, and build apps that scale.

使用Bit ( Github )共享，记录和管理来自不同项目的可重用组件。这是增加代码重用，加速开发并构建可扩展应用程序的好方法。

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Bit支持Node，TypeScript，React，Vue，Angular等。