背景

之前开发了一个中后台页面,大概得功能是展示一些配置的单品,点击添加按钮弹出弹窗,弹窗内的功能是可以下拉框选择品的类型,下边有一些图片素材介绍等东西的上传等等功能。有一天突然收到一个前线反馈说,window电脑上只要打开弹窗点击下拉框,就会白屏,他们使用最新的谷歌版本或者老的谷歌版本都会浮现这个问题,但是只有这一个人会出现这个问题,别人的mac电脑不会复现。

当我收到这个问题的第一时间,看出我看我的电脑以及身边同时的mac电脑确实都复现不出来这个问题,所以就不能本地启动项目来调试这个问题。于是我去公司it前台借了一台window电脑,用半个小时,配置了电脑的环境、网络,然后访问这个页面,结果发现这台window电脑复现不出来,由于公司内部有安全红线的要求,不能借用有问题同事(公司的基础链路工单收集同事)的电脑,所以只能盲改。

解决过程

我想着第一个操作是打开问题电脑控制台报错是Minified React error #183,初步一看,看不出根本问题,报错隐蔽,于是百度这个错误,发现是react框架定义的死循环错误。于是我仔仔细细吧代码通读了一遍,感觉可能是change的是时候,触发的死循环,但是奇怪点在于,怎么就个别电脑死循环??

  • 于是我先在下拉框change会触发到的所有逻辑处以及核心的代码处打上日志,发到线上,然后在同事的电脑上看日志,也许排查到问题。结果是,正常的版本和白屏的版本的输出日志一模一样,第一个方案失败。
  • 于是我尝试吧这个白屏的change函数的内部逻辑用一个setTimeout 函数包裹了一下,发线上验证,依然白屏。
  • 于是,我又尝试吧change函数完全注释调,发线上,依然白屏!!!我真是惊呆了,change函数注释都白屏了,怎么可能还死循环呢??我蒙了半天,仔细想到底是为什么。。
  • 于是我问了这个问题电脑同事,在我升级迭代这个版本之前,这个页面是否会白屏?他说:不会,可以肯定的是,问题肯定是我迭代搞出来的。

我想了一下,逻辑肯定是没问题的,毕竟change都注释掉了,不可能再触发死循环了啊,那只能说是这个组件有问题吧,我猜测。这个下拉框是公司组件库的一个form.item组件,于是我看了上一个发布版本的打包的组件库的包版本,然后吧把我这个分支的包改成上一个,锁死包版本到,发到线上,果不其然,不白屏了。终于经过2天的排查,改掉了这个bug.

posted on 2024-04-07 15:00  蒸汽小工人  阅读(2)  评论(0编辑  收藏  举报