本地缓存在localStorage中的监控对象
export default function monitorInit(timeout = 7 * 24 * 60 * 60) { let whiteScreen = new Date() - performance.timing.navigationStart; const monitor = { // 数据上传地址 // url: '', // 性能信息 performance: {}, // 资源信息 resources: {}, // 错误信息 errors: {}, // 用户信息 client: { // 屏幕宽度 screen: screen.width, // 屏幕高度 height: screen.height, // 浏览器平台 platform: navigator.platform, // 浏览器的用户代理信息 userAgent: navigator.userAgent, // 浏览器用户界面的语言 language: navigator.language }, cacheTime: new Date().getTime(), timeout: timeout // 手动添加错误 // addError(error) { // const obj = {}; // const { type, msg, url, row, col } = error; // if (type) obj.type = type; // if (msg) obj.msg = msg; // if (url) obj.url = url; // if (row) obj.row = row; // if (col) obj.col = col; // obj.time = new Date().getTime(); // monitor.errors.push(obj); // }, // 重置 monitor 对象 // reset() { // window.performance && window.performance.clearResourceTimings(); // monitor.performance = getPerformance(); // monitor.resources = getResources(); // monitor.errors = {}; // }, // 清空 error 信息 // clearError() { // monitor.errors = {}; // }, // 上传监控数据 // upload() { // 自定义上传 // axios.post({ // url: monitor.url, // data: { // performance, // resources, // errors, // user, // } // }) // }, // 设置数据上传地址 // setURL(url) { // monitor.url = url; // } }; const getMonitor = () => { isOverTime(); return JSON.parse(localStorage.getItem('monitor')); }; const isOverTime = () => { const data = JSON.parse(localStorage.getItem('monitor')); // 没有数据 一定超时 if (!data) { return true; } // 获取系统当前时间戳 const currentTime = new Date().getTime(); // 获取当前时间与存储时间的过去的秒数 const overTime = (currentTime - data.cacheTime) / 1000; // console.log(overTime); // 如果过去的秒数大于当前的超时时间，也返回null让其去服务端取数据 if (overTime > data.timeout) { localStorage.removeItem('monitor'); return true; } return false; }; // 获取性能信息 const getPerformance = () => { if (!window.performance) return; const timing = window.performance.timing; const performance = { // 重定向耗时 redirect: timing.redirectEnd - timing.redirectStart, // 白屏时间 whiteScreen: whiteScreen, // DOM 渲染耗时 dom: timing.domComplete - timing.domLoading, // 页面加载耗时 load: timing.loadEventEnd - timing.navigationStart, // 页面卸载耗时 unload: timing.unloadEventEnd - timing.unloadEventStart, // 请求耗时 request: timing.responseEnd - timing.requestStart, // 获取性能信息时当前时间 time: new Date().getTime() }; return performance; }; // 获取资源信息 const getResources = () => { if (!window.performance) return; const data = window.performance.getEntriesByType('resource'); const resource = { xmlhttprequest: [], css: [], other: [], script: [], img: [], link: [], fetch: [], // 获取资源信息时当前时间 time: new Date().getTime() }; data.forEach(item => { const arry = resource[item.initiatorType]; arry && arry.push({ // 资源的名称 name: item.name, // 资源加载耗时 duration: item.duration.toFixed(2), // 资源大小 size: item.transferSize, // 资源所用协议 protocol: item.nextHopProtocol }); }); return resource; }; window.onload = () => { // 在浏览器空闲时间获取性能及资源信息 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback let monitorObj = getMonitor() ? getMonitor() : monitor; if (window.requestIdleCallback) { window.requestIdleCallback(() => { monitorObj.performance = getPerformance(); // console.log('页面性能信息'); // console.log(monitor.performance); monitorObj.resources = getResources(); // console.log('页面资源信息'); // console.log(monitor.resources); localStorage.setItem('monitor', JSON.stringify(monitorObj)); }); } else { setTimeout(() => { monitor.performance = getPerformance(); // console.log('页面性能信息'); // console.log(monitor.performance); monitor.resources = getResources(); // console.log('页面资源信息'); // console.log(monitor.resources); localStorage.setItem('monitor', JSON.stringify(monitor)); }, 0); } }; // 捕获资源加载失败错误 js css img... addEventListener( 'error', e => { const target = e.target; if (target !== window) { let monitorObj = getMonitor() ? getMonitor() : monitor; let url = target.src || target.href; if (!monitorObj.errors[url]) { monitorObj.errors[url] = { type: target.localName, url: url, msg: (target.src || target.href) + ' is load error', // 错误发生的时间 time: new Date().getTime() }; localStorage.setItem('monitor', JSON.stringify(monitorObj)); // console.log('所有的错误信息'); // console.log(monitor.errors); } } }, true ); // 监听 js 错误 window.onerror = function(msg, url, row, col, error) { let monitorObj = getMonitor() ? getMonitor() : monitor; let key = `${url}：${row}`; if (!monitorObj.errors[key]) { monitorObj.errors[key] = { type: 'javascript', // 错误类型 row: row, // 发生错误时的代码行数 col: col, // 发生错误时的代码列数 msg: error && error.stack ? error.stack : msg, // 错误信息 url: url, // 错误文件 time: new Date().getTime() // 错误发生的时间 // console.log('所有的错误信息'); // console.log(monitor.errors); }; localStorage.setItem('monitor', JSON.stringify(monitorObj)); } }; // 监听 promise 错误 缺点是获取不到行数数据 addEventListener('unhandledrejection', e => { let monitorObj = getMonitor() ? getMonitor() : monitor; let msg = (e.reason && e.reason.msg) || e.reason || ''; if (!monitorObj.errors[msg]) { monitorObj.errors[msg] = { type: 'promise', msg: msg, // 错误发生的时间 time: new Date().getTime() }; // console.log('所有的错误信息'); // console.log(monitor.errors); localStorage.setItem('monitor', JSON.stringify(monitorObj)); } }); return monitor; }