前端数据监控

为什么要数据监控平台？各维度数据量化，去衡量真实用户的加载速度
监控平台链路：sdk上报，上报到服务器和数据存储（接收上报心想、数据清洗、入库），展示分析

有什么数据需要收集？

监控指标：

• 登录异常、启动过程异常
• 服务器页面加载失败404、500、503
• 混合App内部报错（套壳错误：webview、NW.js、Electron）
• 服务器接口返回错误

数据采集流程：上报、收集、清洗、入库

收集完，怎么上报？

自动上报数据

在head标签中嵌入上报数据的sdk脚本

收集哪些数据：

• error 错误类型数据、
• performance性能相关数据、
• 环境相关数据（公共数据）
  • pid：projectId，产品的具体编号，方便我们以某个产品维度为基准进行查询
  • uid：userId，以用户的uid为查询参数对数据进行存储的，以及方便跟踪错误相关的用户数据
  • sid：sessionId，记录用户当次登录的所有操作
  • version：版本。
  • ua：userAgent 的缩写，是浏览器默认获取相关 IP、浏览器型号、操作系统版本等通用环境信息的数据。
  • 开关类数据：比如，是否采集错误数据、是否采集性能数据、数据是否为测试数据，测试数据会上传到日志服务器，但是不会入库（主要是为了检测从收集到上报的链路。

手动上报数据

自动上报数据只能解决通用代码层面的错误问题，不能解决逻辑错误问题，逻辑错误对计算机来说不是错误，
所以需要人工甄别出什么样的错误是逻辑错误，然后制定出规则，在不匹配的情况下手动触发数据上报

• 用户行为数据：比如监控用户在线时长
• 流程错误数据：记录用户按照特定流程操作的数据集合

上报数据形式

• 通过请求方式get\head\post请求方式把数据传输到服务器
• 使用加载资源的方式（js/css/图片）把需要上报的数据传输到服务器（推荐，没有跨域问题）
  图片体积小、支持透明。支持透明图片有BMP（BMP32格式可以支持透明，最小请求数据需要74字节）、png（67字节）、gif（43字节）

const log = (type = '', code, detail = {}, extra = {}){
  const logInfo = {
    type，
    code，
    detail: detailAdapter（code, detail），
    extra: extra，
    common: {
      ...commonConfig，
      timestamp: Date.now()，
      runtime_version: commonConfig.version，
      sdk_version: config.version，
      page_type: pageType
    }
  }
  // 动态创建图片进行数据上报 
  var img = new window.Image()；
  img.src =「」.concat（feeTarget，「？d=」）.concat(encodeURIComponent(JSON.stringify  
（logInfo）))；
}</code>

https://sdk.test.com/img01.gif?d={"detail":{"navigationStart":1550739289058,"unloadEventStart":0,"url":"m.test.com/bj/"},"common":{"pid":"test","uuid":...},"version":"1.0.0","sdk_version":"1.0.40","page_type":"m.test.com/bj/"}}

浏览器中对脚本报错信息有跨域限制, 通过标签引入js时, 需要在所有要监控的script标签中添加 crossorigin="anonymous" 属性后, 才能获取到错误堆栈数据, 否则只能看到Script error的提示

<script src="https://xxx.com/xxx.js" crossorigin="anonymous"></script>

上报完，各种数据怎么处理？

数据采集后，数据分析（机器学习）专家一般会对数据进行筛选、降维、建模（清洗、入库）

1）上报的数据在进入服务器时，会在服务器上留下访问日志
每次访问nginx服务器，会会把访问的日志写入access.log文件（这就是要收集的数据，前端监控平台的数据来源）

default_type  application/octet-stream;
#log_format  main  '$remote_addr - $remote_user [$time_local] "$request"     '
#                  '$status $body_bytes_sent "$http_referer" '
#                  '"$http_user_agent" "$http_x_forwarded_for"';
access_log  logs/access.log  main;
sendfile        on;
#tcp_nopush     on;
#keepalive_timeout  0;
keepalive_timeout  65;
#gzip  on;
server {
	listen       80;
	server_name  localhost;
	#charset koi8-r;
	#access_log  logs/host.access.log  main;
}

2）如果只有一台日志服务器或者日志量不大，可以监控access.log日志文件变化，将服务器日志access.log清洗入库。
日志服务器可能是多台机器，就需要引入kafka

数据存储：

例子

// sdk.js
import perf from './perf.js'
perf.init((perform)=>{
	// 上传到后台
   console.log('perf init', perform);
})

// perf.js
export default {
	init: (cb) => {
		Util.domready(() => {
	      // ...
	      // 收集数据后，传给cb带会去
	      cb(perfData);
	    });
	}
}

开源产品：
sentry 搭建 vue react 一起使用 开箱即用
灯塔
商业产品：神策

参考：
书籍：从零搭建前端监控平台
Script error.解决方法

未完待续…