前端项目埋点

一、前端监控是监控什么？

一是监控用户的行为，比如说页面的入口来源、点击量、浏览量、页面停留时长等。通过对用户的行为数据进行分析，可以对我们的产品进行针对性的优化。比如说用户在哪个页面停留时间较长，我们便可以在这个页面进行我们的广告投放等；

二是监控页面的性能，比如说页面的白屏时长，首屏时长、接口请求快慢等。由于每个用户的手机型号、网络情况等的不同，我们开发时是没法明确知道页面的性能如何的，所以需要统计这些数据，对我们的页面进行相应的优化。页面加载时长越慢可能流失的用户就越多，没有人愿意去长时间等待一个卡顿的页面。

三是监控页面的异常，比如说弱网情况下某些文件加载失败、某些特定情况下才会出现的业务bug、页面的兼容bug、内存泄漏等，这些在测试阶段可能没办法都检测出来，所以需要对我们页面的错误进行监控，这点是很重要的。

二、怎么进行前端监控？

对我们的页面进行监控，那么我们就需要在我们的页面里进行埋点。什么是埋点呢？

埋点，它的学名是事件追踪（Event Tracking），主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语，也是互联网领域的一个俗称。埋点是产品数据分析的基础，一般用于推荐系统的反馈、用户行为的监控和分析、新功能或者运营活动效果的统计分析等。

简言之，就是需要在我们的页面里加上特定的代码进行数据的收集，然后提交给后台去进行分析。

那么埋点有哪些方案呢？

三、埋点方案

手动埋点

手动埋点也叫代码埋点，也就是在我们的代码里加上特定的代码上传数据给到后端或者说调用相应SDK的函数，常见的网站分析工具有很多，国内一般常用的有神策等，国外常用的有Google Analytics等。手动埋点的好处有可以让使用者很方便的设置自定义属性，自定义事件，只对自己需要的数据进行埋点，后续无需对大量的数据进行筛选。但是由于需要开发人员一一在代码中加入埋点，项目工程量比较大，且容易出现漏埋、错埋等情况。

埋点数据发送可以通过接口上报，也可以通过img/iframe/script上报。一般采用img标签的src属性进行发送，如下：

let baseURL = 'https://www......'
let queryStr = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')
let img = new Image();
img.src = `${baseURL}?${queryStr}`

采用img的src属性发送的原因有下：

• 没有跨域的限制，像srcipt标签、img标签都可以直接发送跨域的GET请求，不用做特殊处理。
• 兼容性好，不需要插入DOM，影响页面性能。

后端一般会返回一张1px * 1px大小的GIF图片。同样大小，不同格式的图片中GIF的大小是最小的。

可视化埋点

可视化埋点即以业务代码为输入，通过可视化系统配置埋点，最后以耦合的形式输出业务代码和埋点代码，但是可视化系统的埋点控件有限，并不能充分满足埋点需求。

可视化埋点的流程通常为：

输入页面的url => 页面加载完成后 => 配置可视化的工具 => 点击创建事件（click） => 进入元素选择模式 => 用鼠标点击页面上的某个元素（例如button、a这些element）=> 就可以在弹出的对话框里面 => 设置这个事件的名称（比如叫TEST），选上报数据属性（properties）=> 保存配置 => 用户访问点击按钮 => 数据上报

无埋点

无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本，不会出现漏埋、错埋等情况。缺点是流量和采集的数据过于庞大，服务器性能压力大。

四、错误监控

页面的用户行为监控及页面性能监控可能不是必须的，但是错误监控是所有的页面必须的。那么怎么对页面进行错误监控呢？
页面中的代码建议都加上try/catch，它能捕获常规运行错误，但是语法错误和异步错误不行。

try {
  console.log(notdefined);
} catch(e) {
  console.log('捕获到异常：', e);
}

window.onerror能捕获常规运行错误，异步错误也可捕获，但是不能捕获语法错误及资源加载错误。

window.onerror = function(message, source, lineno, colno, error) {
  console.log('捕获到异常：',{message, source, lineno, colno, error});
}
console.log(notdefined);

window.addEventListener能捕获常规运行错误、异步错误及资源加载错误，但是不能捕获语法错误、new Image错误及fetch错误。

window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
}, true)

以上方法都不能捕获promise类型的错误，要捕获promise类型的错误需要通过unhandledrejection捕获。

window.addEventListener("unhandledrejection", function(e){
  console.log('捕获到异常：', e);
});

由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码，所以在Vue里面出现的错误，并不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler。

Vue.config.errorHandler = function (err) {
  setTimeout(() => {
    throw err
  })
}

五、参考文章

1、腾讯二面：现在要你实现一个埋点监控SDK，你会怎么设计？
2、为什么大厂前端监控都在用GIF做埋点？
3、去大厂，你就应该了解前端监控和埋点!
4、miracle90/monitor
5、前端埋点总结
6、一篇讲透自研的前端错误监控