编写代码只是做好项目的一小部分，写代码难免会遇到毛病。因而，在项目上线后，我们还须要主动对项目的毛病举行收集，不能等用户发明毛病，再联络我们，我们再去处置惩罚。如许很轻易造成大的丧失，提早做好毛病收集和处置惩罚，能够削减丧失。

本人并没有做过相干的事情，下面的文章只是我在进修中的一点思索和总结，能够有比较多不足和毛病的处所，愿望人人指正和指点。

本文章为前端进阶系列的一部分,
迎接关注和star本博客或是关注我的github

收集哪些毛病信息

先从一个口试题最先吧。腾讯第二轮电话口试的一个问题：假如用户运用网页，发明白屏，如今联络上了你们，你们会向他讯问什么信息呢？

<!– more –>
一个个去堆答案没有意义，我们换个思绪，先想一下为何会白屏？

毛病发作在什么环节

跟我之前的机能优化的文章一样，我们以用户接见页面的历程为递次，大抵排查一下

1. 用户没打开收集
2. DNS域名挟制
3. http挟制
4. cdn或是其他资本文件接见失足
5. 服务器毛病
6. 前端代码毛病
7. 前端兼容性问题
8. 用户操纵失足

收集哪些信息

经由过程以上能够发作毛病的环节，我们须要向用户手机一下以下的用户信息

1. 当前的收集状况
2. 运营商
3. 地理位置
4. 接见时刻
5. 客户端的版本(假如是经由过程客户端接见)
6. 体系版本
7. 浏览器信息
8. 装备分辨率
9. 页面的泉源
10. 用户的账号信息
11. 经由过程performance API收集用户各个页面接见流程所斲丧的时刻，看毛病出如今什么环节
12. 收集用户js代码报错的信息

怎样收集毛病的信息

如今话题来到了怎样收集毛病信息了。

前端毛病收集有两大派别：

一个是虚拟机监控，长处是目标完全，而且能够举行竞品监控，瑕玷是反应不全，轻易失真

另一个是剧本监控，长处是能够收集海量实在数据，瑕玷是影响机能，采样少的情况下轻易失真。

这里临时只讲剧本监控（挖个坑，以后能够填）

接见时刻纪录

performance API

在chrome浏览器控制台输入Performance.timing，会获得纪录了一个浏览器接见各阶段的时刻的对象。

举行毛病收集的时刻，能够对照这些时刻，看毛病发作在什么阶段

1. DNS 查询耗时 ：domainLookupEnd – domainLookupStart
2. TCP 链接耗时 ：connectEnd – connectStart
3. request 要求耗时 ：responseEnd – responseStart
4. 剖析 dom 树耗时 ： domComplete – domInteractive
5. 白屏时刻 ：responseStart – navigationStart
6. domready 时刻 ：domContentLoadedEventEnd – navigationStart
7. onload 时刻 ：loadEventEnd – navigationStart

其他要领

纪录接见最先的时刻可有以下的要领：

1. 服务器将接见的时刻衬着到页面上
2. SPA的话，纪录前一个页面卸载的时刻

纪录接见历程的时刻

1. 在head标签剖析后，衬着body标签前到场script标签举行办理，平常将这个时刻视为白屏时刻
2. 捕获DOMContentLoaded事宜来纪录dom元素加载终了的时刻
3. 在首屏页面的一切图片加载完后举行纪录，保留首屏时刻
4. 捕获load事宜纪录页面加载完成的时刻

剧本毛病收集

window.onerror

window.onerror能够捕获运行时毛病，能够拿到失足的信息，客栈，失足的文件、行号、列号

要注重以下几点：

1. 要把window.onerror这个代码块星散出去，而且比其他剧本先实行（注重这个条件！）即可捕获到语法毛病。
2. 因为收集要求非常事宜不会冒泡，须要在捕获阶段举行处置惩罚
3. 不能捕获promise的毛病信息
4. 跨域资本须要特地处置惩罚，须要在script标签加上crossorigin属性，服务器设置Access-Control-Allow-Origin
5. window.onerror 函数只要在返回 true 的时刻，非常才不会向上抛出，不然即使是晓得非常的发作控制台照样会显现 Uncaught Error: xxxxx。

promise的毛病处置惩罚

promise除了运用catch要领来捕获毛病，还能够运用window的unhandledrejection事宜捕获非常的

window.addEventListener("unhandledrejection", function(e){
  // Event新增属性
  // @prop {Promise} promise - 状况为rejected的Promise实例
  // @prop {String|Object} reason - 非常信息或rejected的内容

  // 会阻挠非常继承抛出，不让Uncaught(in promise) Error发生
  e.preventDefault()
})

try catch

没法捕获到语法毛病，只能捕获运行时毛病；
能够拿到失足的信息，客栈，失足的文件、行号、列号； 须要借助东西把一切的function块以及文件块到场try,catch，能够在这个阶段打入更多的静态信息。

要注重的是try catch只能捕获同步代码的非常，对回调，setTimeout，promise等无计可施

上报毛病的体式格局

1. 后端供应接口，前端ajax上传
2. 建立一个新的图片，url参数带上毛病信息

function report(error) {
  var reportUrl = 'http://xxxx/report';
  new Image().src = reportUrl + 'error=' + error;
}

末了

本文章为前端进阶系列的一部分,
迎接关注和star本博客或是关注我的github

参考

1. 前端魔法堂——非常不仅仅是try/catch
2. 前端优化-怎样盘算白屏和首屏时刻