错误监控

代码上线后，有可能会出现各种错误，因此部署错误监控，显得尤为重要

错误的分类

• 即时运行错误（代码错误）
• 资源加载错误

---

错误捕获

1. 即时运行错误捕获

   // trycatch
   try{
   
   }catch(err=>{
   console.log(err)
   })
   // winodw.onerror
   window.onerror = function(msg, url, line)    
   {            
   console.log( "真不幸，又出错了\n" + "\n错误信息："+msg+ 
   "\n所在文件："+ url  + "\n错误行号：" + line);  
   }
   

2. 资源加载错误捕获
   2.1. object.onerror (不向上冒泡)
   <img src="image.gif" onerror="myFunction()">
   2.2. window.performance.getEntries()
   返回的将是一个数组,数组的每个元素代表对应的静态资源的信息,包含了页面中所有的已成功加载 HTTP 请求,可以与预期加载资源比较document.getElementsByTagName('img')
   2.3 error事件捕获
winodw.addEventListener('error',function(e){ console.log('错误'+e)},true)

跨域的js运行错误

跨域的js运行错误可捕获，但拿不到具体信息

解决方法
1、script标签添加crossorigin 属性
2、服务端响应头添加 Access-Control-Allow-Origin

---

上报错误基本原理

1. 采用ajax上报
2. 使用image对象上报（大部分）

   (new Image().src=‘http://baidu.com/errorsave?t=11111’)
   

---

错误日志收集工具sentry

Sentry 是一个开源的实时错误报告工具，支持 web 前后端、移动应用以及游戏，支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ，还提供了 GitHub、Slack、Trello 等常见开发工具的集成。

安装说明
1、进入sentry官方网站注册账号
2、新建项目 选择vue项目这时会生成一个dsn
3、本地项目安装raven-js
4、配置

Raven.config('dns').install()

如果忘记dns找不到的话，可以进sentry文档里找说明文档
上报错误
以下内容转载自sentry使用
被动上报

js运行期间，如果发生错误时，错误（比如点击回调函数执行报错，ajax同源请求
报错等）没有被try catch或者以其他方式捕捉，就会冒泡到window，触发
[onerror][2]事件

主动上报

采用raven.captureException(msg/e, options),第一参数可以是字符串，
也可以是Error对象(ps: raven内部会对所传参数进行判断，如果是msg,会转换
成Error对象),第二个参数options可设置参数同raven配置安装时可以用的参数
同，只不过这里用到的参数作用域只限于此条错误日志，raven.config中用的
options对所有错误日志都生效。