Cpt-fe-monitor NPM

前端监控

什么是前端监控？

前端监控是相对于后端监控提出的。监控JS的执行错误，语法错误，资源加载错误，HTTP请求错误(这部分也可以后端监控.)。也指性能监控，监控页面的加载时间，DNS解析时间等（利用原生提供的performance API来实现）

如何接入错误监控

使用的方法: 有window.onerror 或者采用 try,catch

两者比较：

try,catch

无法捕捉到语法错误，只能捕捉运行时错误；
可以拿到出错的信息，堆栈，出错的文件、行号、列号；
需要借助工具把所有的function块以及文件块加入try,catch，可以在这个阶段打入更多的静态信息。
window.onerror的方案有如下特点：

window.onerror

可以捕捉语法错误，也可以捕捉运行时错误；
可以拿到出错的信息，堆栈，出错的文件、行号、列号；
只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等
跨域的资源需要特殊头部支持。
window.onerror实际上采用的事件冒泡的机制捕获异常，并且在冒泡(bubble)阶段时才触发，因此像网络请求异常这些不会冒泡的异常是无法捕获的。

可以通过script标签来引入监控SDK，也可以通过npm将监控代码接入到项目中

使用vue的话，需要在vue提供的错误劫持钩子errorHandler中进行配置

用法

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

Promise报错，onerror事件是捕获不到的。

对于Promise的错误，需要在每个Promise后面添加catch来捕获，或者监听unhandledrejection事件，不过unhandledrejection在浏览器的兼容不是很好只有PC端Chrome和Safari支持

如果是对于用户基数大，且宿主环境多样的产品来说，使用unhandledrejection不太可行，还是得手动添加catch来捕获error

npm.io

上报错误的完整性（遇到跨域脚本，如何做上报，监控哪些指标）

跨域问题

如果是所引用的跨域脚本发生错误，那么报错都是Script Error，因为一般的错误捕获方法window.onerror()，捕获不到跨域资源的报错。所以放在其他域(cdn提供商)下的资源需要设置crossorigin属性。CDN对该资源的响应信息首部需要设置Access-Control-Allow-Origin字段，把允许访问该资源的域名添加进去。不过现在CDN提供商，该字段设置的一般都是*，代表其他的所有外域都可以跨域访问该资源。