14｜数据上报方案：如何在不影响用户体验下实现数据上报？
唐俊开
你好，我是三桥。
前面几节课，我们一直学习如何在前端应用中捕获前端异常信息，并基于全链路数据结构把信息存储起来。这节课，我们就来看下应该如何用最优的方法，把异常信息上报到后端服务。
不少前端同学都非常熟悉监控平台 SDK 上报埋点数据的流程，那在这节课，我们换个角度探讨 3 个重要的逻辑，分别是选择上报方式、实现简易的上报接口以及选择上报时机。
前端埋点上报的方式
实际上，前端全链路的埋点上报方案和前端监控埋点的方案是相同的。目前主流的前端监控平台都是使用 GIF 进行埋点，例如百度统计、谷歌统计等。
什么是上报呢？就是当前端页面产生链路日志后，将日志数据传递给服务器的过程。也就是说，只要能将数据上报到服务器，那么无论是 GIF 请求还是 Fetch 请求，监控服务器是不需要关心具体的上报方式的。
不过选择上报方式也很重要。在说如何选择之前，我们先来了解下三种常见的请求上报方式。
为什么不用 Fetch 和 xhr？
虽然使用 Fetch 特性上报埋点是一个可行的方案，但并不是最优的选择。有三个原因。
第一，Fetch 需要遵循同源策略。也就是说，跨域请求可能会因为浏览器的限制而请求失败。
第二，Fetch 是新 Web 浏览器的特性和标准，要满足兼容旧版本浏览器，就需要采用 polyfill 的方式解决兼容问题，无形中给 SDK 增加了不少兼容性代码，造成负担。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. 前端监控平台通常使用GIF图片方式进行数据上报，因为它简单快速，不会阻塞页面加载，且能节省用户流量。 2. 在选择上报方式时，需要考虑兼容性、跨域问题和用户体验，因此选择使用GIF图片作为埋点上报的方案。 3. 存储日志最常见的做法是把日志存储在日志服务或NoSQL数据库中，具体的方法有4种，日志文件存储、NoSQL数据库、分布式日志存储系统和日志分析平台。 4. 对于小规模的前端应用，建议直接使用NoSQL数据库就足够了；如果需要监控大量实时日志数据，可以考虑使用分布式日志存储系统。 5. 前端埋点的上报时机需要根据实际情况和事件类型来决定是立即上报还是延迟上报。 6. 收集用户链路日志必然涉及一些用户隐私数据，应在上报数据前进行敏感数据的脱敏，以防止敏感数据被利用或篡改。 7. 延迟上报的功能实现避免了一次性发起大量图片请求，从而不会影响用户体验和给日志服务带来压力。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59
《前端全链路优化实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论