如何快速定位线上bug，是多数开发者都会遇到的难题 web-see 前端监控，提供了前端录屏+定位源码方式，让bug无处藏身

1.背景页面“白屏”是项目代码异常引起的，需要特别关注。故希望对该场景进行精准的探测，并由此而来开发出一整套白屏检测模块。2.问题分析2.1白屏定义白屏，是页面出于某些异常原因，未进行渲染，导致页面阻

常常会苦恼，平常做的项目很普通，没啥亮点；面试中也经常会被问到：做过哪些亮点项目吗？ 前端监控就是一个很有亮点的项目，各个大厂都有自己的内部实现，没有监控的项目就是在裸奔

近期一直在团队内开发可视化埋点平台，目前已经落地并成功在多个复杂业务中落地使用，在其中也踩了不少坑。故写此篇文章，给想要在团队内落地可视化埋点平台做一份参考，也是对笔者自己实现过程的一个记录

页面白屏，绝对是让前端开发者最为胆寒的事情，特别是随着 SPA 项目的盛行，前端白屏的情况变得更为复杂且棘手起来 这里的白屏是指页面一直处于白屏状态，要是能检测到页面白屏就太棒了……

本文的主要目的是介绍一种可扩展性较好的SDK架构，让后续业务迭代的代码更清晰明朗。这种架构已经在开源监控SDK:mitojs实践，有兴趣的小伙伴可以去瞅瞅~

PerformanceObserver ， 我们可以用它来获取首屏、白屏的时间，就不用再麻烦地手动去计算了。

在刚开始学前端的时候，那时候开发的应用总是在用户的设备中出现一些报错，开发者只知道这个型号的设备出现这个问题，但对其他信息却全然不知，比如说其他操作系统、其他设备型号、其他页面会有这个报错吗，这个报错

前端监控可以分为三类：数据监控、性能监控和异常监控。 统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。 性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验。常…