前端应用监控体系_为什么前端监控对于2020年的Web应用至关重要

前端应用监控体系

The best tools we use in our lives can often appear like magic. They simplify our tasks in ways that we thought unimaginable, and we’re often left thinking about why we didn’t discover them earlier or even thought about it.

我们一生中使用的最好的工具常常看起来像魔术。 它们以我们认为无法想象的方式简化了我们的任务,而我们常常被遗忘了为什么我们没有更早发现它们甚至没有想到它们的原因。

This was my reaction when I was first introduced to frontend monitoring.

这是我第一次接触前端监视时的React。

“I remember my colleague from the product department calling me. The impact of our latest frontend modification was worrying him. He thought the design wasn’t particularly brilliant, coherent, and that users were being deceived by it.

“我记得产品部门的同事打电话给我。 我们最新的前端修改的影响使他感到担心。 他认为设计不是特别出色,连贯,并且用户被它所欺骗。

I wondered how he knew all this stuff. I was sure he was in contact with test users. But it’s hard to have such a level of confidence in what is wrong and what is not with just a few test cases.

我不知道他怎么知道所有这些东西 我确定他正在与测试用户联系。 但是,很难对只有几个测试用例的错误和非错误有这样的信心。

As soon as the screen sharing option was enabled, all my doubts about his knowledge were shattered. He proceeded to show me a series of recordings the exact actions that users had gone through.

启用屏幕共享选项后,我对他的知识的所有怀疑都被粉碎了。 他继续向我展示了一系列记录用户执行过的确切操作的记录。

How they used the app, what section they were the most active in, and even what the problems were since you could clearly see the users flowing through the app in confusion.

他们如何使用该应用程序,他们最活跃的部分是什么,甚至是什么问题,因为您可以清楚地看到用户在混乱中流过该应用程序。

The error he mentioned was there, plus other logic errors that escaped the checking of us developers.”

他提到的错误在那里,还有其他逻辑错误使我们开发人员无法进行检查。”

It’s been a while since I had that first experience of what it really means to monitor your frontend application. And in 2020 this discussion is more relevant than ever.

自从我对监视前端应用程序的真正含义有了第一次体验以来已经有一段时间了。 到2020年,这一讨论比以往任何时候都更加重要

With the average user waiting in general no more than three seconds for a page to load, plus increasingly complex web applications, it has become mandatory to have a clear, all-in-one way to monitor your web applications.

由于一般用户等待页面加载的时间一般不超过三秒钟,再加上越来越复杂的Web应用程序,必须有一种清晰,多合一的方式来监视Web应用程序

These are the business years of pure concentration on the final client. On its experience and overall satisfaction, on how smoothly and error-free your application is able to work.

这些是纯粹专注于最终客户的营业年。 根据其经验和总体满意度,以及您的应用程序能够如何流畅和无错误地工作。

Missing on this point can mean for your business increased possibilities of something going wrong, of wasted engineering time and resources, and possibly severe losses in future revenue for your company.

遗漏这一点可能意味着您的企业增加了发生问题,浪费工程时间和资源的可能性,并可能给公司的未来收入造成严重损失。

出色的前端监视工具的作用 (What a Great Frontend Monitoring Tool Does)

With that clear in mind, let’s analyze how a frontend monitoring tool can benefit your business application product:

牢记这一点,让我们分析前端监视工具如何使您的业务应用程序产品受益:

  • It gives you full context for your users' sessions: every interaction the user has with your application is miscellaneous of various technical details. A great frontend monitoring tool will give you all the tools you need to inspect these details thoroughly. From stack traces, to console logs and errors, network activities, resource loads, interactions with the app’s state(see Redux or MobX ), JavaScript errors, page speed metrics and performance analytics

    它为您的用户会话提供了完整的上下文:用户与您的应用程序进行的每次交互都包含各种技术细节。 出色的前端监视工具将为您提供彻底检查这些详细信息所需的所有工具。 从堆栈跟踪,到控制台日志和错误,网络活动,资源负载,与应用程序状态的交互(请参阅ReduxMobX ),JavaScript错误,页面速度指标和性能分析

  • It gives you analytics on your app’s performances: page load time, few server requests and a smooth experience are essentials for your user’s experience. A fully-equipped monitoring tool will provide you with all the data you need about your performances. See your app’s memory usage or frame-rate, or even your user’s network speed and general rendering metrics.

    它为您提供了应用程序性能的分析:页面加载时间,少量服务器请求和流畅的体验是用户体验的关键。 功能齐全的监控工具将为您提供有关表演所需的所有数据。 查看应用程序的内存使用率或帧速率,甚至查看用户的网络速度和常规渲染指标。

  • It makes you understand how your user’s use the app: “rage-clicks” and oblivious UIs are enormous turns off for your user’s experience. A frontend monitoring tool can help you understand how every user interacts with your application. Find out if any parts of it are not clear, usable or understandable. Discover the “psychology” of your product usability and its flaws thanks to recordings of sessions and replays.

    它使您了解用户如何使用该应用程序:“怒击”和遗忘的用户界面极大地改变了用户的体验。 前端监视工具可以帮助您了解每个用户如何与您的应用程序进行交互。 找出其中的任何部分不清楚,可用或可理解。 通过记录会话和重放,发现产品可用性的“心理”及其缺陷。

结论 (Conclusion)

Complexity has become a guaranty in modern web applications. With complex state management systems, infinite UI experience variables and the increasing need to focus on your clients.

复杂性已成为现代Web应用程序的保证。 对于复杂的状态管理系统,无限的UI体验变量以及对客户的关注日益增长。

This can be the perfect recipe for unmanaged or silent problems, which can seriously damage your application and your company.

这可能是解决非管理性问题或无声问题的完美方法,这些问题可能严重损害您的应用程序和公司。

The purpose of frontend monitoring tools is to provide you with a single, all-in-one hub to understand your application better. What works and what doesn’t, how the users interact with it, and what are their experience expectations and flows.

前端监视工具的目的是为您提供一个单一的,多合一的中心,以更好地了解您的应用程序。 什么有效,什么无效,用户如何与之交互,以及他们的经验期望和经验是什么。

重要要点 (Key Takeaways)

  • Modern web applications have become increasingly more complex, requiring more attention to details and customer’s experience.

    现代Web应用程序变得越来越复杂,需要更多地关注细节和客户体验。
  • It arises then the necessity to have clear, miscellaneous analytics about your application errors, UI flaws, possible downtimes, or performance issues.

    这就需要对应用程序错误,UI缺陷,可能的停机时间或性能问题进行清晰,杂项的分析。
  • Frontend monitoring tools came to live as a response to this problem. Providing an all-in-one platform to manage, analyze and improve your business application.

    前端监视工具应运而生,以解决此问题。 提供一个多平台的平台来管理,分析和改进您的业务应用程序。

资源资源 (Resources)

翻译自: https://medium.com/javascript-in-plain-english/why-frontend-monitoring-is-vital-for-your-web-apps-in-2020-6a60b815876d

前端应用监控体系

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值