腾讯二面：现在要你实现一个埋点监控SDK，你会怎么设计？

最新推荐文章于 2024-04-12 11:01:33 发布

前端私教年年

最新推荐文章于 2024-04-12 11:01:33 发布

阅读量1k

点赞数 3

文章标签：前端 javascript 面试 react.js vue.js

本文链接：https://blog.csdn.net/frontend_nian/article/details/124132644

版权

大家好，我是年年！

这是小伙伴上周被问到的一个综合性设计题，如果是没有用过埋点监控系统，或者没有深入了解，基本就凉凉。

这篇文章会讲清楚：

埋点监控系统负责处理哪些问题，需要怎么设计api？
为什么用img的src做请求的发送，sendBeacon又是什么？
在react、vue的错误边界中要怎么处理？

什么是埋点监控SDK

举个例子，公司开发上线了一个网站，但开发人员不可能预测，用户实际使用时会发生什么：用户浏览过哪几个页面？几成用户会点击某个弹窗的确认按钮，几成会点击取消？有没有出现页面崩溃？

所以我们需要一个埋点监控SDK去做数据的收集，后续再统计分析。有了分析数据，才能有针对性对网站进行优化：PV特别少的页面就不要浪费大量人力；有bug的页面赶紧修复，不然要325了。

比较有名的埋点监控有Google Analytics，除了web端，还有iOS、安卓的SDK。

公众号后台回复「ReactSDK」可获取react版本的github

埋点监控的职能范围

因为业务需要的不同，大部分公司都会自己开发一套埋点监控系统，但基本上都会涵盖这三类功能：

用户行为监控

负责统计PV（页面访问次数）、UV（页面访问人数）以及用户的点击操作等行为。

这类统计是用的最多的，有了这些数据才能量化我们的工作成果。

页面性能监控

开发和测试人员固然在上线之前会对这些数据做评估，但用户的环境和我们不一样，也许是3G网，也许是很老的机型，我们需要知道在实际使用场景中的性能数据，比如页面加载时间、白屏时间等。

错误报警监控

获取错误数据，及时处理才能避免大量用户受到影响。除了全局捕获到的错误信息，还有在代码内部被catch住的错误告警，这些都需要被收集到。

下面会从api的设计出发，对上述三种类型进一步展开。

SDK的设计

在开始设计之前，先看一下SDK怎么使用

import StatisticSDK from 'StatisticSDK';
// 全局初始化一次
window.insSDK = new StatisticSDK('uuid-12345');


<button onClick={
   ()=>{
   
  window.insSDK.event('click','confirm');
  ...// 其他业务代码
}}>确认</button>

首先把SDK实例挂载到全局，之后在业务代码中调用，这里的新建实例时需要传入一个id，因为这个埋点监控系统往往是给多个业务去使用的，通过id去区分不同的数据来源。

首先实现实例化部分：

class StatisticSDK {
   
  constructor(productID){
   
    this.productID = productID;
  }
}

数据发送

数据发送是一个最基础的api，后面的功能都要基于此进行。通常这种前后端分离的场景会使用AJAX的方式发送数据，但是这里使用图片的src属性。原因有两点：

没有跨域的限制，像srcipt标签、img标签都可以直接发送跨域的GET请求，不用做特殊处理；
兼容性好，一些静态页面可能禁用了脚本，这时script标签就不能使用了；

但要注意，这个图片不是用来展示的，我们的目的是去「传递数据」，只是借助img标签的的src属性，在其url后面拼接上参数，服务端收到再去解析。

class StatisticSDK {
   
  constructor(productID){
   
    this.productID = productID;
  }
  send(baseURL,query={
    }){
   
    query.productID = this.productID;
    let queryStr = Object.entries(query).map(([key, value]) => `${
     key}=${
     value}`).join('&')
    let img = new Image();
    img.src = `${
     baseURL}