前端监控和前端埋点

https://segmentfault.com/a/1190000015864670

1.前端监控

​ 需要统计产品用户行为和使用情况，从而可以从用户的角度去了解用户群体，从而升级和迭代产品和迭代产品。用户数据可以通过前端数据监控的方式获得。此外前端还需要实现性能监控和异常监控

性能监控：加载时间、白屏时间、http请求事件和http响应时间

异常监控：前端脚本执行报错

实现前端监控三个步骤：前端埋点和上报、数据处理 、数据分析

1.1 数据监控

• PV/UV:页面浏览量或点击量

• 用户在一个页面的停留时间

• 用户通过什么入口来访问该页面

• 用户在页面中出发了那些行为

#### 1.2 性能监控

    - 不同用户，不同机型和不同系统下的首屏加载时间
    - 白屏时间
    - http等请求的响应时间
    - 静态资源整体下载时间
    - 页面渲染时间
    - 页面交互动画完成时间

#### 1.4异常监控

 - JavaScript的异常监控
 - 样式丢失的异常监控

2.埋点前端解决方案

2.1 代码埋点

​ 代码埋点，就是以嵌入代码的形式进行埋点，

​ 优点：可以在任意时刻。精确的发送或保存所需要的数据信息

​ 缺点：工作量较大，每一个组件的埋点都需要添加相应的代码

2.2 可视化埋点

​ 通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等 ，最后输出代码耦合了业务代码和埋点代码

​ 缺点：可视化埋点的控件有限，不能手动定制

2.3 无埋点

​ 无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都绑定一个标识，所有的事件都被记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告

     无埋点优点：数据全，量大

     缺点：服务器压力和传输压力

3 选择方案

3.1 监控数据

​ 监控分为三个阶段：用户进入用户首页，用户在网页内部交互和交互中报错。每个阶段需要监控和上报数据

3.2 埋点方案

​ 考虑灵活控制，减少数据传输和服务器压力，使用代码埋点的方式

3.4 上报周期和上报数据类型

​ 数据少的时候可以用户出发事件后就上报。埋点的事件较多的时候，内部交互比较频繁，通过本地缓存上报信息，然后定期上报

​ 上报的数据类型JSON

​ 格式：who,when,where what

{
    currentUrl,
    fromUrl,
    timestamp,
    userAgent:{
        os,
        netWord
    },
    type,
    appid,
    element,
    data:{
        uid,
        uname
    }
}

    #### 3.4 埋点和上报举例

我们以上报首屏加载时间为例，DOM提供了document的DOMContentLoaded事件来监听dom挂载，提供了window的load事件来监听页面所有资源加载渲染完毕

3.5 前端埋点系统的前后端通信加密

在上报数据的前后端通信中，需要和server端协商加密机制，利用OpenSSL来实现的加密，OpenSSL已经是一个广泛被采用的加密算法。前端可以采用node的crypto模块，或者hash ,md5算法