2017年经历的那些灵异事件

2017年快要过去了，回顾这一年来，在业务代码里，开发新功能占据70%，修复BUG占了30%，在解决的这些BUG中，大部分都是代码级别的错误，使用 Chrome Devtools 基本均可以解决，但其中有三个比较神奇，算得上是灵异事件了。

鬼打墙

有一次后端同窗重构了一下 DSP 广告平台的接口，让 Java 服务化提供接口， PHP 作 web 控制层掌管路由和透传接口，因而对以前的接口URL从新规划统一了一下，内测没问题后就高高兴兴上线了，然而没过多久就有商家上报说页面报错没数据，因而我赶忙复现，但怎么都复现不出来，而后问商家浏览器是否是版本过低，网络是否是不稳定之类的，但商家的浏览器和网络环境都没问题，这就纳闷了，因而果断找了一台 Windows 机器（由于咱们都是Mac并且没装虚拟机），让商家加 QQ 远程协助看一下到底报了什么错，倒腾了半天，连上商家电脑，复现果真报错了 NetWork Error ，打开 Chrome Devtools 一查， ajax 请求竟然没没发出去。看了一眼浏览器上那一排插件，怀疑是否是插件搞的鬼，发现竟然有屏蔽广告的插件，大哥，你特么本身都在咱们平台上投广告，你还装屏蔽广告插件。果断让他关闭这个插件，而后果真没问题。原来咱们的接口URL里有 advertisement 这个单词，插件直接屏蔽了这个URL。没过多久，又有一个商家报页面没数据，呵呵，咱们直接叫他关闭浏览器屏蔽广告插件，结果商家告诉我仍是不行。?，仍是远程协助查一下，发现开了隐身窗口，接口仍是没返回数据，看到商家电脑右下角运行的系统杀毒软件，眉头一皱，难道是这货搞的鬼？打开设置一看，赫然有屏蔽广告这个选项。果真国产软件都流氓，你这全部的浏览记录都被人家知道了啊。次日果断把 advertisement 改为gg（guanggao），整个世界都清净了。

断头鬼

过了一段时间，我司搭了一个前端错误监控平台，能够收集客户端错误，上报到这个平台而后邮件告警开发者。收集的信息包括用户操做系统、浏览器版本、 IP 、操做路径等，这样就不须要再用 Windows 远程了。某一天，告警平台发邮件报错，店铺选择页面 js 运行报错，那还得了，选择不了店铺，至关于咱们的后台入口挂了啊。果断按照报错的操做路径操做一次，又没复现。再一看操做系统与浏览器版本，找了一个如出一辙的环境，仍是复现不出来。晕了，仍是用远程协助吧。商家那里确实有 js 运行报错，因为线上 js 也没有 source map ，压缩的代码也看不懂，查半天也没查出什么东西。回到监控平台后台，反复比对各条报错。结果发现 IP 都是差很少的范围，一查都是合肥电信的运营商，难道全部合肥电信的用户加载的这个 js 有问题？而后报给运维同窗，他把那个 js 下载下来一看，长度不同，和正常的版本比，少了一小段。确定是 cdn 同步的时候，出了故障，果断把锅丢给七牛。

替死鬼

前几天，有一次发布后，一直收到邮件告警某个 base 的 js 运行报错，涉及的浏览器版本都是Chrome 31到37，轻车熟路开虚拟机复现，找半天找了一个Chrome 31，确实报错了，然而报错内容看不懂。想着那天发布内容包括升级基础 react 组件，加了一个 babel runtime ，还有一些其余的改动，难道是这些问题引发的？
而后尝试想让虚拟机 Chrome 运行本地代码，因而在 win 里面装 node 、 git 、下载仓库、打包、把线上代码代理到本地。结果node-modules都装不上去。而后再试试装 fiddler 抓包软件，把打包后的代码放在 win 里面，抓取那几个 js ，替换成打包后的本地代码，然而仍是看不懂，只知道是一个基础函数，多是 babel polyfill 的问题，因而尝试把前端仓库那几天的改为一一 revert ，看看究竟是哪一个改动致使的问题。结果回退到发布以前都仍是报错，这就尴尬了，至此我已经花了一天时间去排查这个问题，期间让几个同事一块儿排查也没发现问题本源。
最后想着把 win 的网络设置成 Mac 同样的网络，把 win 浏览器使用 SwitchySharp 设置成 Mac 的代理，这样就能够在 win 里面使用 Mac 的开发环境，（其实就是在 Mac 起一个 node 服务，监听一个端口，在这个服务里把全部的线上的前端资源（ js , css ）替换成本地代码，本地这个服务至关于一个网关服务器，还能够把网址指向不一样环境的服务器。）结果惊奇的发如今预发环境是没有问题的，只有线上环境才有报错。个人第一反应是难道后端改造了什么数据类型？把线上数据和预发环境数据比对一下，然而如出一辙。这个时候，对比两个环境只有两个差别了，一个线上环境多一个统计日志上报的 js ，还有一个就是错误收集上报的 js ，问了一下这两个 js 的维护者，果真统计日志的js，在那次发布的时候改动了，为了使用Object.assign，加了一个 polyfill ，而后和 base js 里面的 polyfill 冲突了，因为统计日志的 js 先加载，因此报错是在 base js 里面。
这个问题比较难排查的地方是：

1. 复现环境比较苛刻
2. 后端仓库的改动（统计日志的 js ）和前端仓库产生了关联，版本回退难以排查
3. 产生问题的 js 并非出现报错的 js

总结

出现BUG在所不免，代码逻辑、浏览器兼容性、网络故障等等都会致使一些意想不到的问题，遇到问题首先不要慌，解决问题要有方法论，先把问题复现出来，而后使用 Chrome Devtools ，设置断点，观察数据条件，基本能够找出代码错误，其余问题，能够相似高中生物实验，结合条件对照，找出差别的条件，定位到问题，这个过程当中须要敏锐的观察力。