前端监控-SDK

前端监控-SDK.md

前端监控-SDK

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState

https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

1. UA 数据采集

2. 页面停留时间

3. userInfo

4. 性能监控 APM

5. Sentry 错误监控

1. sendBeacon 发送 FormData, 浏览器有长度限制 max limited String size

const autoReport = (timer = 10000) => {
    window.setInterval(() => {
        const stringData = registry.metrics();
        console.log('重复 bug ???', registry);
        // console.log('stringData ???', stringData);
        // axios.post(url, stringData).then(() => {
        //     // 0
        //     registry.reset();
        // });
        //
        const flag = navigator.sendBeacon(url, stringData);
        if(flag) {
            registry.reset();
        }
    }, timer);
};

2. visibilityState & beforeunload & unload, 监控 tab 切换，页面关闭，刷新

document.visibilityState;
// "visible"

document.hidden;
// false

3. pageshow & pagehide

4. History API 重载

https://gist.github.com/xgqfrms/f093866224fb83d3dbe1b73a9d463953