记录一下前几天踩坑的经历。
背景:一个项目某一版之后很多用easyui的表格控件treegrid渲染的表格都显示不出来了
奇怪的地方主要有以下几点:
- 项目在测试环境才会这样,在本机能够正常运行,多次重新发布后无果
- 有很多表格显示不出来,但也有的代码几乎一样的表格却能正常显示数据
- 重新部署曾经可以正常运行的版本后依然如此
测试环境有问题本地没问题的情况我也是见得不少了,无论如何先F12看看
Uncaught TypeError: Cannot read property 'length' of undefined
观察异常栈,是easyui报的这个错,吐槽一下easyui报的错太不友好。这样很难看出问题,于是我又把测试服务器返回的html与本地服务器返回的html用工具进行比较,结果是只有渲染服务器地址的部分不一样(一个是localhost一个是ip)没看出来任何问题。观察ajax请求的数据,只有数据的id不一样(这是伏笔),id是后台随机生成的用于作表格的唯一标识符,也没有看出来问题。无奈之下,我只有debug到easyui的源码分析原因。
一个小时后。。。
通过对比服务端和本地的代码运行状况,观察差异,找到了报错的原因:id有重复,id重复导致树结构混乱,通过parentId查找父节点时查找到的是错误的父节点。这里再次吐槽一下easyui,您不能先验证一遍id有没有重复,有提示一下不好吗?无论如何,我找到了报错原因,那么接下来问题来了:为什么id会有重复?
前面有提到这里是用的是treegrid控件,这里树有三级,后台方法使用System.nanoTime()
方法产生一个随机数作为id设置给第二,三级树节点。这个方法返回的是Long
值
现在一切都可以解释了。
1.项目在测试环境才会这样,在本机能够正常运行,多次重新发布后无果
System.nanoTime()
产生的id会因为环境而有差异,在本地产生的id可能并未达到浮点数精度丢失的范围,而服务端产生的id超过了,导致了精度丢失,不一样的长整型由js处理后转换成浮点数后得到的结果是一样的,10000000000000000和10000000000000001得到的结果是一样的,从而导致了id重复
2.有很多表格显示不出来,但也有的代码几乎一样的表格却能正常显示数据
这一点是数据的问题,表格本身几乎一样但数据不一样,显示出数据的表格没有第三级节点,而报错的表格有,一二级节点因为是父节点所以都有children
属性,easyui的treegrid根据此属性形成树结构,而第三级节点没有children
属性因为它根本没有子节点,从而导致报错Uncaught TypeError: Cannot read property 'length' of undefined
3.重新部署曾经可以正常运行的版本后依然如此
因为相关代码并没有变动,这是一个地雷,早早埋下而不知何时会爆炸的地雷。
根本原因为后台返回的Long
类型数据由js处理后可能导致精度丢失。最后解决方案非常简单,把long转换成int就一切解决了。由此得出教训,后台返回给js的数据不要使用Long类型。
参见:
What is JavaScript's highest integer value that a number can go to without losing precision?