一、排查具体过程
使用sentry监控vue项目发现挺多Uncaught SyntaxError: Unexpected token =>报错，出现这个报错，第一反应就是手机兼容性问题，也就是出现了箭头函数，而低版本浏览器不能够识别，导致这样的报错。进入sentry查看详细信息，没有找到出现该错误对应的代码，但是发现了一个规律就是都是vivo手机，且浏览器版本都是Chrome Mobile 38.0.2125；
image.png
因此，隐约感觉到用户使用的是vivo自带的原生浏览器访问（如果是微信或者QQ内置浏览器不可能这么凑巧都是vivo手机且浏览器版本一致），后来通过验证，果然是使用vivo自带的原生浏览器（原装未升级，升级了的可以做降级处理，之前不知道可以降级还特意下载Chrome Mobile 38.0.2125，但是貌似现在的手机系统不支持使用该版本的谷歌浏览器，所以才查到可以降级原生浏览器）访问导致这个报错。因此借来列表中的一部手机vivo Y66i A调试，发现 不支持chrome://inspect/#devices，因此换用spy-debugger，但是还是找不到该报错对应的代码且网络中没有发现第三方注入的脚本，后来为了验证该浏览器确实不支持ES6，在另一个jquery项目中写
let a;
a=1;
发现它确实不支持，并提示
image.png
除了提示Uncaught SyntaxError: Unexpected identifier，它还提示了
Uncaught SyntaxError: Unexpected token =>及Uncaught ReferenceError: processRandomSelector is not defined， 而这个项目我根本没有使用ES语法且没有使用processRandomSelector ，因此答案一下就浮出水面了，就是Uncaught SyntaxError: Unexpected token =>是vivo原生浏览器本身的问题，跟你的项目没有任何关系。。。其实如果你足够聪明的话，可以猜测到这个答案（因为只有vivo手机的Chrome Mobile 38.0.2125才出现这个报错）并通过访问没有使用ES6语法且简单的项目进行验证；
二、遇到的额外问题
另：今天在查找Uncaught SyntaxError: Unexpected token =>的原因的时候，还遇到一些一查就知道答案的小问题比如：
1、
Uncaught SyntaxError: Use of const in strict mode
2、
@ multi (webpack)-dev-server/client? webpack/hot/dev-server babel-polyfill ./src/main.js
image.png
三、总结
1、有时候不要完全相信权威；
国内封装的浏览器有时候也有问题；之前碰到微信双开内置浏览器 input type=file 时 onchange事件都有问题
2、出现问题时，应该首先想到排除法；
如果自己的项目有问题，那么可以拿正常的项目进行测试访问，如果正常的项目没有问题，那么说明就是自己的项目有问题；如果正常的项目也有问题，那么可能是浏览器本身的问题；
3、简化产生bug的环境有时也很有帮助；
网友评论