在开始正文之前，我们先想想为什么需要埋点&监控？ 当我们在分析复盘一个产品是否成功的时候，不同的角色考虑的方向是不同的。

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 我们的开发过程中并不总是一帆风顺。特别是在某些情况下，我们可能希望停止程序或在发生不良情况时通知用户。 在类似这些情况下，我们可以自己写个自定义的错误来管理，或者直接让引擎为我们去定义这些错误。有了错误定义后，…

前端开发攻城狮开开心心的 coding，非常自豪的进行了业务、UI 分离开发，各种设计模式、算法优化轮番上阵，代码写的 Perfect（劳资代码天下第一），没有 BUG，程序完美，兼容性 No.1，代码能打能抗质量高。下班轻松打卡，回家看娃。 实际上，开发环境与生产环境并不能等…

一般情况下都是通过重写js原生事件然后拿到错误信息，比如ajax请求，通过重写xhr、fetch事件来截取接口信息，所以我们需要优先编写一个易于重写事件的函数来复用。 所有的请求第三方库都是基于xhr、fetch二次封装的，所以只需要重写这两个事件就可以拿到所有的接口请求的信息…

之前也做过浏览器web端的SDK数据埋点上报，其实原理大同小异：通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这样就能实现无痕埋点。 在这个立即执行函数中，我们把原生的open方法通过originOpen暂时存储起来，然后在外面包裹一层函数，实现了打印输出url的功…

点击 这里 你可以查看该仓库的一个 demo。index.html 实践了的上述的方法，访问 results.php 可以查看结果 此外，分辨率监测还不是特别的准确，因为目前只能监测最常用的屏幕宽度。最后还想说的是，监测用户实际屏幕的宽度并没有想象中的那么简单，因为 CSS 监…

错误代码的位置定位是准确的，证明可行。

最近有朋友又重新提起了前端的数据采集。 于是花点时间重构了下。并做了对应的 demo 通过对用户行为的分析，可以得出用户的习惯以及偏好。 从而优化产品方案，优化业务流程，做到数据驱动产品。 1.自动埋点，通过大面积的数据采集，从数据中过滤出特定元素，这样做的缺点是数据量过大，优…