最近在做一个前端监控的js
如图，一个大概的思路是这样的。
图片版
简单看下哈
--------------------------------------------------------文本版
# 代码异常处理
## 参考文章
### http://web.jobbole.com/93684/
### https://www.cnblogs.com/luozhihao/p/8635507.html
### https://segmentfault.com/a/1190000014672384
### https://juejin.im/post/5b5dcfb46fb9a04f8f37afbb
### https://www.jianshu.com/p/fc622f8cff99
### https://juejin.im/post/5aaa93345188257bf550cbfd?utm_medium=fe&utm_source=weixinqun
* 比较完善
##try-catch异常处理
### 缺点
*1.无法识别语法错误
*2.无法处理异步操作发生的错误
###try{代码块}catch{处理方法}
## window.onerror异常处理
### 优点
*1.可处理异步错误
### 缺点
*1.无法识别语法错误
*2.无法捕获网络异常的错误（404）
*3.静态资源跨域无法捕获到错误信息
* 解决方法
*1.标签添加crossorigin=”anonymous”
*2.对应服务器所有域可访问
*4.代码压缩无法精确到位置
* 解决方法
*1.sourceMap
### 注意点
*1.写在JS脚本前面
*2.需要返回true，否则控制台依旧显示错误
### demoCode
* window.onerror =function (msg, url, row, col, error) {
console.log(msg, url, row, col, error)
return true;
};
// 无message 方法
### vue
* dev
* webpack config 中 dev 配置 devTools 配置生成sourcemap 即 #source-map
* build
* 可以正常获取到错误内容
## 重写console.error
###message
* 错误信息
### stack
* 错误提示，只取第一级错误信息
### window.console.error=function(error){let {message,stack} = error}
## 资源的异常
### img
* window.addEventListener('error',()=>{if(img){this.src = demo.png}})
### window.addEventListener('error',function(){}) 用这个方法监听图片的异常，onerror不能监听的到
## promise
### promise内部发生的错误
* promise实例未书写catch捕获异常
* 导致try-catch和window.onerror不能发现异常
* 处理方法
*1.每个实例书写catch捕获异常处理
*2.添加promise全局异常捕获事件 unhandlededrejection
* window.addEventListener('unhandledrejection',function(e){e.preventDefault() ajax })
## 框架异常处理
### vue
* errorHandler
* Vue.config.errorHandler=function (err, vm, info) {}
* 仅在 组件渲染期间和watch中自动触发
* 建议在vue项目中，项目组员自己书写
## 代码压缩后解析
### sourcemap
* https://www.npmjs.com/package/source-map/v/0.6.1#new-sourcemapconsumerrawsourcemap
### 版本
*0.6.1
* 由于0.7+之后使用了 WebAssembly 写法，IE和360不支持，故使用0.6.1版本。压缩包可到git获取
###sourceMap API
*SourceMapConsumer
* 具体可看npm 文档
### 总结
* 代码压缩后解析，必须要有编译出来的js的map文件，具体可在压缩的js最后一行可看到map文件路径。在felog.js 中，逻辑是先取到 压缩后的js文件的全名，然后拼接.map 字段，再用ajax去请求 map文件回来，然后才通过SourceMapConsumer 分析map文件，得出源文件和行数。
## 上报的内容
###type
* string
*error
* window.onerror
* console.error
* promiseerror
* warn
* console.warn
* info
* console.info
###line
* string
###prj_id
* string
###url
* string
### brower_info
* string
###create_time
* date
###source
* string
###error_msg
* string
## 错误上报
###ajax
* 访问量巨大的情况下，错误信息过多
* 设置采集率
*if(Math.random < x){ajax}
### 动态创建img
*function report(error) {
var reportUrl ='http://xxxx/report';
new Image().src = reportUrl +'error=' + error;
}
## 成熟的系统
### BadJS
* 鹅厂封装的window.onerror事件
* https://github.com/BetterJS
* 介绍
* http://slides.com/loskael/badjs/fullscreen#/
* 开源
### FdSafe
* 阿里
### JSTracker
* 淘宝
### ravenjs
* 国外
## 方法总结
### 使用window.onerror捕获JS运行时错误
### 使用window.addEventListener('unhandledrejection')捕获未处理的promise reject错误
### 重写console.error捕获console.error错误
###在跨域脚本上配置crossorigin="anonymous"捕获跨域脚本错误
### window.addEventListener('error')捕获资源加载错误。因为它也能捕获js运行时错误，为避免重复上报js运行时错误，此时只有event.srcElement inatanceof HTMLScriptElement或HTMLLinkElement或HTMLImageElement时才上报
### 重写window.XMLHttpRequest和window.fetch捕获请求错误
网友评论