前端监控学习总结

拓扑图

错误监控

1、js错误

try catch主动捕获，try catch不能捕获异步错误，会被全局onerror事件捕获

try {const str = '11111'str.map()} catch (error) {errorCaptcher(error, error.message)}

window.onerror全局捕获，onerror绑定事件会被覆盖，需要使用自定义事件做下处理，不影响原有事件执行

// 全局事件捕获export const errorTrackerReport = () => {// js错误const originError = window.onerrorwindow.onerror = (msg, url, row, col, error) => {// 执行原有onerror事件originError && originError.call(window, msg, url, row, col, error)lazyReport('error', {message: msg,file: url,row,col,error: JSON.stringify(error, Object.getOwnPropertyNames(error), 2), // 直接传入error类型，序列化会丢失,errorType: 'jsError'})}

2、reject错误

promise未被catch捕获的reject，会被unhandledrejection捕获，添加全局监听捕获

// promise未被捕获错误window.addEventListener('unhandledrejection', (error) => {lazyReport('error', {message: error.reason,error: JSON.stringify(error, Object.getOwnPropertyNames(error), 2), // 直接传入error类型，序列化会丢失,errorType: 'promiseError'})})

3、资源加载错误

资源加载错误需要使用window.addEventListener(‘error’, () => {})捕获，需要筛选错误对象的标签，避免错误捕获重复上报。

// ------- resource error --------window.addEventListener('error', (error) => {let target = error.target;let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;if (!isElementTarget) {return; // js error不再处理}lazyReport('error', {message: "加载 " + target.tagName + " 资源错误",file: target.src,errorType: 'resourceError'});}, true)

4、语法错误

这个基本不要捕获，开发阶段eslint就可以抛出错误

5、框架错误

vue：Vue.config.handleError、errorCaptured
react:错误边界
小程序：App.onError()、Page.onError()、wx.onError()

6、白屏

白屏的监控使用document.elementsFromPoint(x, y), 判断当前点返回的第一个元素是否为html、body等，判断是否为空白点位，判断多个点位是否为空白。

7、常见问题

window.onerror方式的错误监听，会覆盖原有onerror方法；使用自定义事件改写onerror；

js报错，会走进资源加载错误监听事件内，导致重复日志；判断错误标签是否为script、link、img、video、audio；

除了onerror可以精确到行、列信息，其他错误无法精确位置；其他错误捕获后，使用throw error，让window.onerror再捕获；

行为监控

1、手动埋点

这个没什么说的，sdk提供上报方法，外部直接调用

<buttonstyle={{ 'marginRight': '20px' }}data-no="yes"onClick={() => actionTrackerReport('button', '手动埋点被点击了')}>

2、属性埋点

设置特定属性，全局监听click事件，触发上报功能。例如data-target=”属性埋点被点击了”

export const autoActionTrackerReport = () => {window.addEventListener('click', (e) => {const clickedDom = e.target// 获取自动上报标识内容const target = clickedDom" />const reportWebVitals = onPerfEntry => {if (onPerfEntry && onPerfEntry instanceof Function) {import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {getCLS(onPerfEntry);getFID(onPerfEntry);getFCP(onPerfEntry);getLCP(onPerfEntry);getTTFB(onPerfEntry);});}};

2、performance

使用window.performance原生api计算

代码片段

const {fetchStart,connectStart,connectEnd,requestStart,responseStart,responseEnd,domLoading,domInteractive,domContentLoadedEventStart,domContentLoadedEventEnd,loadEventStart,} = window.performance.timing;// 发送时间指标// 用户体验指标lazyReport('performance', {type: "timing", // 统计每个阶段的时间connectTime: connectEnd - connectStart, // TCP连接耗时ttfbTime: responseStart - requestStart, // 首字节到达时间responseTime: responseEnd - responseStart, // response响应耗时parseDOMTime: loadEventStart - domLoading, // DOM解析渲染的时间domContentLoadedTime:domContentLoadedEventEnd - domContentLoadedEventStart, // DOMContentLoaded事件回调耗时timeToInteractive: domInteractive - fetchStart, // 首次可交互时间loadTime: loadEventStart - fetchStart, // 完整的加载时间})

日志采集

采集方式

1、常规API

2、navigator.sendBeacon

3、JSONP方式，使用img标签

常见问题

异步xhr在页面卸载后，会被中止，导致丢失；

navigator.sendBeacon兼容性不太好；

上报太过频繁，服务器压力大；添加延迟并且合并上报；

error类型JSON.stringfy后会丢失；使用JSON.stringfy的第二个参数解决丢失问题；

TODO

日志上报接口开发

监控平台日志分析平台开发

demo代码

https://github.com/wufeng123456/front-monitor-sdk.git

参考链接

迄今为止最全的前端监控体系搭建篇(长文预警) – 知乎