美文网首页
头疼的线上调试,猝不及防的bug,react找不到webpack

头疼的线上调试,猝不及防的bug,react找不到webpack

作者: 前端劝退师_ty | 来源:发表于2019-12-27 17:16 被阅读0次

    https
    禁用图片权限 ios 没事 安卓不行 安卓能发图片 ios 发不了 两个正好相反
    微信303
    微信图片不加载
    不能微信支付

    程序员一直在和bug较量的职业。一个完整的项目开发周期只是占据一部分时间,更大的一部分时间是在找bug,然后修bug,剩下的时间是在迭代,嗯~总结的很到位,是这么个流程。
    在开发时已经在竭尽全力的思考缜密些,尽量少的产生问题,开发时的bug多少还能接受,有各种各样的调试工具可以便捷的定位问题位置,最让人头疼的是线上bug,各种机型的兼容问题,用户手机缓存问题,不堪回想。并且还有很多不可预料的bug。

    运营商劫持,https问题。

    系统正常使用时会忽然卡死,测试了几次基本找不到规律,非常随机。


    image.png
    这报错真是简洁,找不到webpack打包的这个js,webpack设置首屏加载后会把每个页面分割打包编译成一个个chunk.js 怎么能找不到,而且已经去服务器上翻了 看到了 这个js就在服务器上静静的躺着呢,再说这个问题也遇到过,比如用户正在使用你的程序,然后你更新了代码,用户手上的代码版本和服务器上最新打包的代码版本不匹配是会造成js文件丢失的问题。但报错不是这个样子 js文件丢失.png
    基本上是长这个样子。
    解决办法是注册一个全局捕获错误的监听 捕获这个 Unexpected token < 这个信息,触发页面刷新,重新加载服务器上最新资源即可解决这个问题。

    于是全网找解决办法,倒是找了几个遇到相同状况的,但是他们解决办法也是监听错误然后刷新...万能的刷新...(让我想起了网管,必杀绝招,不行就重启电脑),但是我没有使用刷新这个办法,
    第一遇到问题就刷新有点low,
    第二经我测试手动刷新再次访问还是会有很高的几率碰到同样的报错,
    第三也是最重要的 他们都是用vue写的项目 用 router.onError(callback) 可以监听到路由导航的错误,我是用react写的 ,react对应的路由错误监听没有捕获到,我刷新不了。
    但是在这个过程中 无意中看到了一条评论只有简单的几个字 电信劫持,刚开始没怎么注意都没往这方面想,并不是不相信会有这种情况,开发中也遇到过,页面正在访问呢忽然出现广告,是运营商的广告,也知道解决办法,换成 https 的就行,主要是没想到他会影响的页面加载,以为只是会弹弹广告。

    后来没有办法只能慢慢测试,哪些页面出现问题,什么情况下出现问题,逐渐找到了规律,电脑上基本没遇到过,手机上会遇到,电信,移动遇不到,联通遇得到,mmp,这让我怎么发现这个bug,怎么发现,测试过程相当痛苦,自己电脑上开发又看不到,自己手机是移动的也看不到,只能分享给同事不停刷,看到同样情况了就通知我,总结出了规律后,手机共享网络电脑查看,对比network发现,联通共享网络多加载了一个Ball.js, 下载下来里面的代码乱的要死,根本无法解读,但是我看懂了他的注释。 12131577434833_.pic_hd.jpg
    看到这里又联想到了之前无意中看到的评论,断定是https的问题,快给我加https,一切问题得以解决又时元气满满的一天。
    image.png

    用户反馈不能上传图片点击后没有反应。系统禁用微信相机权限

    自己测试微信开发者工具上没有问题可以上传,自己手机上测试没有问题可以上传,但就是有用户反馈上传不了,实在是没有办法了,询问用户手机型号,华为荣耀10,找到了一摸一样的型号测试,没有问题可以正常提交。碰到这种情况真的是心中万马奔腾。
    没有法子,问题摆在那里不能不去处理,测吧全公司借手机看看谁的手机会出现不能提交的情况,巧了有个同事新买了一个安卓手机,打开后出现了一个提示

    image.png
    禁止会怎么样(=ω=),选择了"禁止后不再提示",嗯?点击后没反应了,没有吊起本地相册,和用户描述的比较像,马上找回之前那个同型号手机,系统权限中禁用了微信相机功能,果然复现了问题,怎么点击都没有反应。泪流三千尺啊,我只是个前端,只会点js,系统权限禁用了,我是真真的没有办法。

    有些人会问,哪个用户会这么傻,把微信权限禁用,那他平时聊天的时候没有发过图片吗,没有权限微信聊天时怎么发图片。

    在用户反馈的时候也能看出来,出现类似问题的都是安卓机,ios没有反馈同样问题的。

    经实测,系统禁用微信相机功能后,
    ios 微信聊天时无法发送图片,但是h5中input file可以吊起图片库,
    安卓 微信聊天时可以发送图片,但是h5中input file不可以吊起图片库,
    想想真实场景其实也可以理解。询问你是否允许微信权限,有些人可能会误以为造成安全信息泄露,点击了禁用,禁用了以后这些安卓机还不影响自己聊天时发送图片,自然就会造成这样的现象。

    微信303

    image.png

    303和307是HTTP1.1新加的服务器响应文档的状态码,它们是对HTTP1.0中的302状态码的细化,主要用在对非GET、HEAD方法的响应上。文档规定:浏览器对303状态码的处理跟原来浏览器对HTTP1.0的302状态码的处理方法一样;浏览器对307状态码处理则跟原来HTTP1.0文档里对302的描述一样。
    百度查找的结果。
    看不懂 -- 问了一下后端同学什么情况,反馈给我 后台没有问题。


    image.png

    我是在关心你吗,我是在问你后台有没有问题吗,我是让你帮我看看303了咋整。
    解决问题也是一样,慢慢测,但是这个303真是不好碰到,几率非常小,后来也被我复现了,一点解决问题的思路都没有,就是突然的出现在你面前给你个惊喜,然后在怎么打开都是303了,退了一下微信,再次访问(✪ω✪),好了,ok了,没有了,仰天长啸,感觉可能是在开发的时候频繁访问固定的网站,出现问题。

    微信图片不加载

    不能微信支付

    12141577437680_.jpg

    这里就不多说了,iphone11 有时文字渲染了图片没渲染,微信忽然不能支付了,jssdk获取用户地址不成功了,总之如果出现问题,反复校验代码没有问题时不要死磕,可能问题不在你这里,退下微信你会发现海阔天空。

    全是泪,上面这些问题都是本人亲身经历实际开发时的截图,也只是想起来了一部分,这些不可预测并且不可解决的问题真是让人抓头,没有任何办法只能祝愿广大同胞们一帆风顺

    相关文章

      网友评论

          本文标题:头疼的线上调试,猝不及防的bug,react找不到webpack

          本文链接:https://www.haomeiwen.com/subject/yceloctx.html