前端监控

前端监控一般来说需要实现三个方面的监控：

• 异常监控
• 性能监控
• 用户行为监控

前端异常监控和性能监控的重要性不言而喻，做好前端异常监控和性能监控有助于帮助我们追踪异常，突破性能瓶颈。

对于第三点用户行为监控，这并非是窥探用户隐私，而是在用户允许允许的范围内收集用户的匿名行为数据来帮助产品提升用户体验。例如通过分析用户在某界面停留时间和使用人数等信息，来判断是否需要对该页面做进一步的体验优化。

从功能上来说，前端监控系统需要实现以下功能：

• 捕获异常
• 捕获性能问题
• 用户匿名数据收集
• 监控看板
• 异常监控报警
• 任务执行

前端监控的具体方法是埋点+上报。

数据收集

捕获异常

try…catch 和 window.onerror

通过try…catch和window.onerror可以捕获js执行错误，try…catch还可以捕获async函数执行错误。

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'

*/