hugh 的个人博客

Everyday is a new day

最小化监控收集脚本

随着监控功能的逐步完善, 我们从最初的错误监控,一步步新增了请求、tracking、性能、录屏、自定义性能打点等等功能,数据收集js已经达到了30k, 这种情况下,最小化脚本已经是必须要做的事情了。

最小化脚本:

包含了监控框架的主体功能, 用于预收集数据,保存在内存或者本地缓存中,还可具备异步加载全量监控脚本的工作

需要具备哪些特征:

1. 体积足够小

2. 实现的监控收集的主体功能

3. 在全量收集脚本加载之后, 该部分功能需要兼容或者失效

 

如何最小化监控脚本

1. 从功能角度,抽离出基础的功能

a. 对js错误的监控 window.onerror

window.onerror = function(message, source, lineno, colno, error) {
        if(!window.FE_Moniter) { // 如果已经加载了框架主体, 则不处理该错误
            addErrorToMht(error)
        }
    }

b. 对资源错误的监控 document.onerror

 document.addEventListener("error", function(e) {
        addEventToMht(e) // 事件信息保存到内存或本地缓存
    }, true)

c. 提供统一的api, 主要包括mark(标记打点), measure(计算时间差), track(记录事件)

d. 防止错误阻塞会快速退出的情况,在pageunload时,将数据写入本地缓存

 

2. 在主监控脚本中对数据进行获取及发送

主要针对以上几类进行分别处理

a. 获取内存中收集到的数据,进行数据发送

 

3. 引用

a. 使用IIFE, 将构建好的代码发布到CDN, 直接引用

b. 基于webpack构建

AMD:构建,需要使用define,require引用, 你可以使用类似requireJs的框架引用

commonJS:需要exports,require, 可以在实现commonJS规范的框架中运行

UMD: 打包成支持AMD\commonJs\script加载的代码, 代码如下

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["fe_monitor"] = factory();
	else
		root["fe_monitor"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return xxx
})

在html页面应用UMD格式的最小化脚本, 在页面代码中 使用AMD或者commonJS模式加载主体框架即可

c. 实际项目中

实际项目中如果使用webpack构建, 这时候,可以使用UMD构建, 然后将最小化脚本在页面head中引入

或者使用webpack-concat-plugin

new ConcatPlugin({
        uglify: true,
        sourceMap: false,
        name: 'argus',
        outputPath: config.dev.assetsRoot+"/static/js",
        fileName: '[name].[hash].js',
        filesToConcat: ['src/lib/monitor_init.js'],
  })</pre>

在Html中引入即可

<script src="<%= htmlWebpackPlugin.files.webpackConcat.argus %>" type="text/javascript"></script>

 


标题:最小化监控收集脚本
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/09/18/1568773481682.html