前端全链路优化实战课
唐俊开
前阿里前端技术专家,前教育企业前端总监
1160 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已更新 14 讲/共 32 讲
前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

13|关联后端:如何通过Skywalking把接口关联到后端服务?

你好,我是三桥。
前面几节课,我们一直围绕着前端技术栈之间的链路关系学习,例如交互行为、脚本运行错误等等。除了这些,在前端全链路的概念里还有一条链路也是非常重要的,它就是前后端请求调用链路。
什么是前后端请求调用链呢?
前后端的请求调用链,是指请求从前端页面发起,经过后端服务的处理,再返回到前端页面的整个过程。整个过程中,无论是前端还是后端的调用路径,我们都应该清楚地知道各个模块之间的传递情况,以及它们最终传达到用户的视图上的过程。
例如,在经过的后端服务里,其内部通常都是一个非常复杂的调用链,涉及的服务范围很广,包含分布式系统,RPC 调用、数据库和缓存的读写等等。
这样,当我们在遇到问题时,就能有效地跟踪这个调用链过程,快速定位和解决问题。

为什么要做前后端调用链路?

我的前端团队曾经解决过一个上传图片兼容性的问题。
我们当时制作了一个 H5 页面,允许用户在安卓系统的产品 App 内访问,并提供了海报制作的功能。其中一位用户反馈,每次选择手机相册图片后,H5 页面都没有更新显示,无法继续往后操作,生成海报。
最初,我们怀疑是图片上传失败导致的无法读取图片地址。接着,我们通过前后端全链路日志的排查,发现后端接收到图片的大小为 0 字节,初步判断问题不在后端服务。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

1. 前后端请求调用链路的重要性和作用:前后端请求调用链路能帮助快速定位问题发生在哪个服务环节,发现性能瓶颈,以及发现数据的一致性和安全性问题。 2. 使用SkyWalking实现前端和后端之间的有效调用链路:SkyWalking是专门为云原生和基于容器架构设计的应用性能监控工具,提供了调用链路追踪等功能。通过引入skywalking-client-js库,可以实现网络请求追踪功能,注册监控对象ClientMonitor,以及集成到前端全链路的SDK中。 3. SkyWalking的能力和前端应用的关系:SkyWalking提供了性能追踪、错误追踪和网络请求追踪功能,但在前端全链路的解决方案中,需要注意其与WebVitals方案的差异,以及错误追踪信息的可扩展性。 4. 具体实现:通过引入skywalking-client-js库,使用register方法注册监控对象,支持单页面应用的特性,以及将ClientMonitor对象集成在前端全链路的SDK中。 5. 调用链路追踪的作用:调用链路追踪能帮助程序员深入了解服务之间的依赖关系,判断可能出现问题的环节或性能瓶颈,解决微服务架构带来的问题,提高问题排查的效率。 6. SkyWalking的发展:SkyWalking在8.2版本开始支持浏览器端的监控,提供了一套前端埋点上报插件,以解决系统复杂性和运维难度等问题。 7. 前后端调用链路的重要作用:帮助打通前端和后端的链路日志,发现性能问题,以及发现数据的一致性和安全性问题。 8. SkyWalking的网络请求追踪功能:通过重写Fetch和Ajax实现,生成traceId并传递给后端,实现网络请求追踪功能。 9. SkyWalking的局限性:官方JS库提供了错误追踪的能力,但在数据结构的设计方面无法满足前端全链路的解决方案。 10. SkyWalking的实际应用:通过引入skywalking-client-js库,注册监控对象ClientMonitor,集成到前端全链路的SDK中,实现网络请求追踪功能,以及主动上报性能数据和报告错误等方法。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《前端全链路优化实战课》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部