腾讯二面:现在要你实现一个埋点监控SDK,你会怎么设计?

大家好,我是年年!

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

这篇文章会讲清楚:

  1. 埋点监控系统负责处理哪些问题,需要怎么设计api?
  2. 为什么用img的src做请求的发送,sendBeacon又是什么?
  3. 在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属性。原因有两点:

  1. 没有跨域的限制,像srcipt标签、img标签都可以直接发送跨域的GET请求,不用做特殊处理;
  2. 兼容性好,一些静态页面可能禁用了脚本,这时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}

你可能感兴趣的:(前端,javascript,面试,react.js,vue.js)