前端监控系统

前端监控

• 异常监控

• 性能监控

• 用户行为监控

• 捕获异常

• 捕获性能问题

• 用户匿名数据收集

• 监控看板

• 异常监控报警

• 任务执行

捕获异常

try…catch 和 window.onerror

window.addEventListener("error", ({filename,colno ,lineno ,error,message,path}) 
=> {
    // console.log(error);
  console.table({filename ,colno ,lineno ,error:error.stack , message, path});
});

s  // 报错
/*
(索引)     值
filename	'http://127.0.0.1:5500/err.html'	
colno	5	
lineno	53	
error	'ReferenceError: s is not defined\n at http://127.0.0.1:5500/err.html:53:5'
message	'Uncaught ReferenceError: s is not defined'


*/

async function fetchData(){
	try{
			const res = await getAPI();
	}catch{
			// 捕获异常
	}
}

Promise.catch 和 unhandledrejection

Promise.reject('error').catch(err=>{
    console.error(err);
})

// 如果Promise异常没有被Promise.catch捕获，异常会传递到window.unhandledrejection事件中
window.addEventListener('unhandledrejection',(err)=>{
        console.error(err);
    })
Promise.reject('error')

捕获接口异常

资源加载异常

const img = document.querySelector("img");
img.onerror = function (e) {
    console.log(e);
};

window.addEventListener('error',function(e){
  console.log(e);
},{
  capture: true
})

Vue异常捕获

• errorHandler

• errorCaptured

app.config.errorHandler

errorCaptured生命周期

捕获性能问题

衡量性能的指标

• LCP 最大内容绘制

• FID 首次输入延迟

• CLS 累积布局偏移

• FCP 首次内容绘制

• TTI 可交互时间

• TBT 总阻塞时间

• …

Chrome API

(window.chrome.loadTimes().firstPaintTime - window.chrome.loadTimes().startLoadTime) * 1000

PerformanceTiming

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domContentLoadedEventEnd- fetchStart
domready可操作时间 = domContentLoadedEventEnd - fetchStart
onload总下载时间 = loadEventEnd - fetchStart

PerformanceEntry

• performance.getEntries() 获取所有时间缀信息

• performance.getEntriesByName(name,type); 获取指定名称和类型的时间缀信息

• performance.getEntriesByType(type); 获取指定类型的时间缀信息

const observer = new PerformanceObserver(function (list) {
  const perfEntries = list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe ( {entryTypes: [ ...类型 ] } )

setTimeout(() => {
  window.performance.getEntriesByType("resource").forEach((item) => {
    const { name, duration, initiatorType } = item;
    console.log({
      name,         // 资源url
      duration,   // 加载时间
      initiatorType,  // 资源类型
    });
  });
}, 1000);

const observer = new PerformanceObserver(function (list) {
  const perfEntries = list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe ( {entryTypes: [ "resource" ] } )

• FP： First Paint，即首次绘制

• FCP： First Contentful Paint，首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。

• FMP： First Meaningful Paint，即首次有意义的绘制，测量页面的主要内容对用户可见的情况。

var a = new PerformanceObserver((entries=>{entries.getEntries()?.forEach((item)=>{
    console.log(`${item.name}：${item.startTime + item.duration}`);
})}))
a.observe({
    entryTypes: ['paint']
})
//  first-paint：1118.7000000476837
//  first-contentful-paint：1118.7000000476837

1. <img>元素

2. <image> 内部的<svg>

3. <video>

4. 具有background-image的元素

5. 文本节点组，如 <p>.

const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach((entry) => {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

• name：保存的是 event.type 字段，表示一个事件的类型，例如 touchstart、touchmove

• entryType：表示 entry 的类型，这里是一个常量 "event"

• startTime：保存 event.timeStamp 字段，记录了事件生成时的时间戳

• processingStart：记录内核开始处理事件的时间点

• processingEnd：记录内核处理完事件的时间点

• duration：在处理完事件时，通过 Math.ceil((performance.now() - newEntry.startTime)/8) * 8 计算，这里的处理主要是为了减少时间精度，增加安全性

• cancelable：保存 event.cancelable 字段，表示事件是否可以被取消

• Performance 接口只有一个 eventCounts 属性，它记录了所有已经分发过的 Event，处理时间是否大于 50ms

const observer = new PerformanceObserver(function (list) {
	const perfEntries = list.getEntries().forEach((entry) => {
	  console.log(entry);
	  // 全程
	  const inputDuration = entry.duration;
	  // 输入延迟（处理事件之前）
	  const inputDelay = entry.processingStart - entry.startTime;
	  // 同步事件处理时间（在开始和结束分发之间）。
	  const inputSyncProcessingTime =
	    entry.processingEnd - entry.processingStart;
	
	
	});
});
// // 注册事件观察者。
observer.observe({entryTypes:['event']});

observer.observe({
  type: 'first-input',
  buffered: true,
});

function wait() {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve()
		}, 1000)
	})
}
async function fn() {

	performance.mark('myTask:start');
	await wait()
	// 记录任务运行后的时间。
	performance.mark('myTask:end');

	// 测量任务开始和结束之间的增量
	console.log(performance.measure('myTask', 'myTask:start', 'myTask:end'));
}

const observer = new PerformanceObserver((list)=>{
  list.getEntries().forEach(item=>{
    console.log(item);
  })

})
observer.observe({
  entryTypes: ['measure']
})

setTimeout(()=>{
  let a = 0
  performance.mark('hello:start')
  for(let i=0; i<100000000;i++){a++}
  performance.mark('hello:end')
  performance.measure('hello', 'hello:start', 'hello:end')
},0)

const observer = new PerformanceObserver((list)=>{
  list.getEntries().forEach(item=>{
    console.log(item);
  })

})
observer.observe({
  entryTypes: ['longtask']
})

// 假设有长时间的任务
setTimeout(()=>{
  let a = 0
  for(let i=0; i<100000000;i++){a++}
},0)

用户匿名数据收集

页面打开次数

路由跳转

• hash

• history

• memeory

javascript复制代码
window.onpopstate = function(event) {
  console.log("State changed: " + event.state);
};

javascript复制代码
window.onhashchange = function() {
  console.log("Hash changed: " + location.hash);
};

用户点击

页面停留时间

let startTime = Date.now();
window.addEventListener("unload", function() {
  let endTime = Date.now();
  let duration = endTime - startTime;
  console.log("Page stay time: " + duration + "ms");
});

浏览器信息收集

页面来源

数据上报

丢点：在浏览器点击跳转时，跳转前的点击上报请求都会进行一个三次握手，如果此时，网络较慢、服务器运行缓慢或者上报请求还在处理阶段，这时，如果页面被卸载了，浏览器都会自动对当前的请求进行abort。这样，这个http的请求就没有建立，导致上报没有真正发出。

前端容灾

• CDN

• LocalStorage

埋点

• 代码埋点（手动埋点）

• 可视化埋点

• 全埋点

代码埋点

可视化埋点

无痕埋点

参考