监控埋点方案

图：Mako Tsereteli

代码埋点

代码埋点是最灵活，同时也是最耗时的一种方式。

一般会封装自己的一套埋点上报的npm包, 提供给各业务线使用。

一般我们需要上报什么信息呢？

埋点的标识信息, 比如eventId, eventType
业务自定义的信息, 比如电商, 点击一个按钮, 我们要上报用户点击的是哪个商品
通用的设备信息, 比如用户的userId, useragent, deviceId, timestamp, locationUrl等等

一般怎么上报？

实时上报, 业务方调用发送埋点的api后, 立即发出上报请求
延时上报, sdk内部收集业务方要上报的信息, 在浏览器空闲时间或者页面卸载前统一上报，上报失败会做补偿措施。

实现

1// async-task-queue.ts
2import { debounce } from 'lodash';
3
4interface RequiredData {
5    timestamp: number | string;
6}
7
8class TaskQueueStorableHelper<T extends RequiredData = any> {
9    public static getInstance<T extends RequiredData = any>() {
10        if (!this.instance) {
11            this.instance = new TaskQueueStorableHelper<T>();
12        }
13        return this.instance;
14    }
15
16    private static instance: TaskQueueStorableHelper | null = null;
17
18    protected store: any = null;
19    private STORAGE_KEY = 'my_store';
20
21    constructor() {
22        const localStorageValue = localStorage.getItem(this.STORAGE_KEY);
23        if (localStorageValue) {
24            this.store = JSON.parse(localStorageValue);
25        }
26    }
27
28    get queueData() {
29        return this.store?.queueData || [];
30    }
31
32    set queueData(queueData: T[]) {
33        this.store = {
34            ...this.store,
35            queueData: queueData.sort((a, b) => Number(a.timestamp) - Number(b.timestamp)),
36        };
37        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.store));
38    }
39
40}
41
42export abstract class AsyncTaskQueue<T extends RequiredData = any> {
43    private get storableService() {
44        return TaskQueueStorableHelper.getInstance<T>();
45    }
46
47    private get queueData() {
48        return this.storableService.queueData;
49    }
50
51    private set queueData(value: T[]) {
52        this.storableService.queueData = value;
53        if (value.length) {
54            this.debounceRun();
55        }
56    }
57
58    protected debounceRun = debounce(this.run.bind(this), 500);
59
60    protected abstract consumeTaskQueue(data: T[]): Promise<any>;
61
62    protected addTask(data: T | T[]) {
63        this.queueData = this.queueData.concat(data);
64    }
65
66
67    private run() {
68        const currentDataList = this.queueData;
69
70        if (currentDataList.length) {
71            this.queueData = [];
72            this.consumeTaskQueue(currentDataList); // .catch(() => this.addTask(currentDataList))
73        }
74    }
75}

1// track.ts
2import axios from "axios";
3import { AsyncTaskQueue } from "./async-task-queue";
4import queryString from "query-string";
5import { v4 as uuid } from "uuid";
6
7interface TrackData {
8    seqId: number;
9    id: string;
10    timestamp: number;
11}
12
13interface UserTrackData {
14    msg?: string;
15}
16
17export class BaseTrack extends AsyncTaskQueue<TrackData> {
18    private seq: number = 0;
19    public track(data: UserTrackData) {
20        this.addTask({
21            id: uuid(),
22            seqId: this.seq++,
23            timestamp: Date.now(),
24            ...data,
25        });
26    }
27    public consumeTaskQueue(data: any) {
28        return axios.post(`https://xxx.com`, { data });
29    }
30}

无埋点

概念

无埋点并不是真正的字面意思，其真实含义其实是，不需要研发去手动埋点。

一般会有一个 sdk 封装好各种逻辑, 然后业务方直接引用即可。

sdk中做的事情一般是监听所有页面事件, 上报所有点击事件以及对应的事件所在的元素，然后通过后台去分析这些数据。

业界有GrowingIO, 神策, 诸葛IO, Heap, Mixpanel等等商业产品

实现

监听window元素

1window.addEventListener("click", function(event){
2    let e = window.event || event;
3    let target = e.srcElement || e.target;
4}, false);

获取元素唯一标识 xPath

1function getXPath(element) {
2    // 如果元素有id属性，直接返回//*[@id="xPath"]
3    if (element.id) {
4        return '//*[@id=\"' + element.id + '\"]';
5    }
6    // 向上查找到body，结束查找, 返回结果
7    if (element == document.body) {
8        return '/html/' + element.tagName.toLowerCase();
9    }
10    let currentIndex = 1, // 默认第一个元素的索引为1
11        siblings = element.parentNode.childNodes;
12
13
14    for (let sibling of siblings) {
15        if (sibling == element) {
16            // 确定了当前元素在兄弟节点中的索引后, 向上查找
17            return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (currentIndex) +
18                ']';
19        } else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
20            // 继续寻找当前元素在兄弟节点中的索引
21            currentIndex++;
22        }
23    }
24};

获取元素的位置

1function getOffset(event) {
2    const rect = getBoundingClientRect(event.target);
3    if (rect.width == 0 || rect.height == 0) {
4        return;
5    }
6    let doc = document.documentElement || document.body.parentNode;
7    const scrollX = doc.scrollLeft;
8    const scrollY = doc.scrollTop;
9    const pageX = event.pageX || event.clientX + scrollX;
10    const pageY = event.pageY || event.clientY + scrollY;
11
12    const data = {
13        offsetX: ((pageX - rect.left - scrollX) / rect.width).toFixed(4),
14        offsetY: ((pageY - rect.top - scrollY) / rect.height).toFixed(4),
15    };
16
17    return data;
18}

上报

1window.addEventListener("click", function(event){
2    const e = window.event || event;
3    const target = e.srcElement || e.target;
4    const xPath = getXPath(target);
5    const offsetData = getOffset(event);
6
7    report({ xPath,  ...offsetData});
8}, false);

性能监控

1// performance.ts
2import { VueRouter } from 'vue-router/types/router';
3import { BaseTrack } from './track';
4
5export class Performance {
6    // TODO 注意上报的单位 现在是毫秒
7    public static readonly timing = window.performance && window.performance.timing;
8
9    public static init() {
10        if (!this.timing) {
11            console.warn('当前浏览器不支持performance API');
12            return;
13        }
14
15        window.addEventListener('load', () => {
16            new BaseTrack().track(this.getTimings());
17        });
18    }
19
20    public static record(router?: VueRouter) {
21        const setFPT = () => {
22            if (window.performance && window.performance.now) {
23                this.customFPT = window.performance.now();
24            }
25        };
26        return {
27            created: () => {
28                if (router) {
29                    router.onReady(() => {
30                        setFPT();
31                    });
32                } else {
33                    setFPT();
34                }
35            },
36        };
37    }
38
39
40    public static getTimings(): { [key in string]: number } {
41        if (!this.timing) {
42            console.warn('当前浏览器不支持performance API');
43            return {};
44        }
45
46        return {
47            redirect: this.getRedirectTime(),
48            dns: this.getDnsTime(),
49            tcp: this.getTcpTime(),
50            ttfb: this.getTimeOfFirstByte(),
51            req: this.getReqTime(),
52            ppdt: this.getParsePureDomTime(),
53            dclt: this.getDomContentLoadTime(),
54            fpt: this.getFirstPaintTime(),
55            load: this.getLoadTime(),
56        };
57    }
58
59    private static customFPT: number = 0;
60
61    private static getRedirectTime() {
62        // 重定向耗时
63        return Performance.timing.redirectEnd - Performance.timing.redirectStart;
64    }
65
66    private static getDnsTime() {
67        // dns查询耗时
68        return Performance.timing.domainLookupEnd - Performance.timing.domainLookupStart;
69    }
70
71    private static getTcpTime() {
72        // tcp连接耗时
73        return Performance.timing.connectEnd - Performance.timing.connectStart;
74    }
75
76    private static getTimeOfFirstByte() {
77        // 读取页面第一个字节耗时
78        return Performance.timing.responseStart - Performance.timing.navigationStart;
79    }
80
81    private static getReqTime() {
82        // request请求耗时
83        return Performance.timing.responseEnd - Performance.timing.responseStart;
84    }
85
86    private static getParsePureDomTime() {
87        // 解析纯DOM树耗时, 不包含js css等资源的加载和执行
88        return Performance.timing.domInteractive - Performance.timing.domLoading;
89    }
90
91    private static getDomContentLoadTime() {
92        // 页面资源加载耗时, 包含vue, js css等资源的加载和执行
93        return Performance.timing.domComplete - Performance.timing.domInteractive;
94    }
95
96    private static getFirstPaintTime() {
97        // first paint time, 首次渲染时间, 即白屏时间
98        return Math.round(
99            (window.performance.getEntriesByName &&
100                window.performance.getEntriesByName('first-paint') &&
101                window.performance.getEntriesByName('first-paint')[0] &&
102                window.performance.getEntriesByName('first-paint')[0].startTime) ||
103                this.customFPT,
104        );
105    }
106
107    private static getLoadTime() {
108        // 页面load总耗时
109        return Performance.timing.loadEventStart - Performance.timing.navigationStart;
110    }
111
112    private static toSeconds(time: number) {}
113}

Docker 常用命令

项目管理

JS沙箱sandbox的各种实现

Amazing！Solid 比react还react

puppeteer应用

做一个web termianl

TypeScript里常用的工具类型

Vim大法好

碧血丹心

chrome V8 引擎中的垃圾回收机制

如何开发一个cli

Javascript中的哲学

React Redux 实现 （Context 版）

mobx-react 使用

Less中的for和forEach循环

Webpack Splitchunks 详解

ssh-keygen命令详解

使用CURL发送POST请求

Webpack Plugin 开发

JS 实现两个大数相加？

字典树 trie

浏览器原理问题

MacBook快速进入一个文件夹目录

react合成事件

mini webpack实现

设计模式

babel核心

React 15 和 React 16 的区别

React性能优化

交通信号灯实现

内存管理

前端安全

网络和并发

跨域方法

react virtualList 虚拟列表无限滚动实现

监控埋点方案

Mini useEffect实现

Mini useState 实现

React Fiber

React class组件和function组件异同

Lodash Get 实现

手写reduce实现

Hooks 原理概览

Hook原理——状态Hook

手写Mini Redux实现

legacy和concurrent模式

react架构

react核心api和jsx

setState是同步的还是异步的

如何使用NodeJs创建HTTP服务？

NodeJS 事件循环模型

Buffer

微前端解决方案-qiankun

React Mini版实现(1)

brew安装

CommonJS简易版实现

极品透明Dashboard样式分享

Stream

NodeJS全局对象

如何部署Nodejs服务

Events

用JS绘制背景，让CSS直接使用 'background:paint(xxx)'

如何使用Nodejs来创建一个TCP/UDP服务?

Mac使用tree生成目录结构

常见算法

前端缓存

前端答疑

Nodejs 网络 & HTTP

JavaScript AST 抽象语法树

nodejs里面向切面编程的一种范式

各种JS模块化特性

手写Ajax实现

手写PromiseA+实现

debug和内存泄露

Javascript prototype 原型链

this指针、作用域

call、apply、bind的极简实现

CSS联合选择器区分列表元素个数不同所要求的不同样式

TypeScript基础

JS中的变量提升

React Redux 实现（Context 版）