Moment的feature导致线上bug解决分析


Posted in Javascript onSeptember 23, 2022

bug的出现

这一天,本来是平平淡淡的一天,我正准备一如既往的到点下班,结果qa说线上出了个匪夷所思的bug。

表象为:用户在日期选择器选择了1964-01-01之后,自动变成了1963-12-31

我心里想:这是什么神奇bug,于是我又尝试了一下选择1964-01-02、1963-12-31、1965-01-01、1963-01-01,结果都正常,那么到底是为什么会引发这个bug呢?

bug排查

由于后端把时间、日期类的字段都定义为了时间戳,因此前端是有进行一些处理的,可以看下面这个图

Moment的feature导致线上bug解决分析

从接口中拿到时间戳后,会先存到内存中,格式化后传入antd日期选择器中。每当用户选择日期之后,我会截取日期中的年月日,然后使用moment-timezone去获取到雅加达(印尼首都)当天零点的时间戳,存储到内存中,当用户点击提交的时候,这个时间戳就会被提交到后端去

再来看一下用户选择日期后进行处理的代码

import momentTimeZone from 'moment-timezone';
import moment from 'moment';
import type { Moment } from 'moment';
convert = (value?: Moment | null) => {
        if (value) {
          const valueString = momentTimezone.tz(value.format('YYYY-MM-DD'), 'Asia/Jakarta').format();
          return (moment(valueString).valueOf() / 1000).toFixed();
        }
        return value;
      }

bug的根因

乍一看,没什么问题呀,于是我开始断点,脑溢血的一幕出现了,大家可以去momentjs.com/timezone/do… 这个页面上试一试,百分百复现

Moment的feature导致线上bug解决分析

// 让人大吃一惊的等式
moment.tz('1961-01-01', 'Asia/Jakarta').format() === '1963-12-31T23:30:00+07:00';

这怎么转换之后,日期还给我整错了呢?我的第一反应就是给moment-timezone提issue,结果没想到有人赶在了我的前面 github.com/moment/mome…

官方也解释的很清楚了:由于当地历史原因,雅加达在1964年之前都是按东七半区来计算时区的,1964年开始才按照东七区来计算,总的来说,这个匪夷所思的等式居然是个feature,只是我使用之前没有了解清楚,所以出了bug,这锅是甩不掉了

解决方案

经过一系列的讨论,我们认为其实日期类型的字段用时间戳表达是不准确的,比如元旦这个节日,在全世界任何一个地区都应该是1月1日,可是如果用时间戳表达的话,可能在某些地区的确是1月1日,但是在其他地区却可能是1月2日了,因此正确的设计应该是用日期字符串来进行存储和传输,比如"2022-01-01",这样才能避免类似的bug,于是前端、app和be都进行了对应的修改,并且发布了hotfix

虽然影响范围比较小,但是众所周知虾皮对于质量是看的很重的,特别是线上的质量。。。只是可惜了我的绩效。。

好了以上就是Moment的feature导致线上bug解决分析的详细内容,更多关于Moment feature线上bug的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
Javascript !!的作用
Dec 04 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue 组件简介
Jul 31 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 #Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 #Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
TS 类型兼容教程示例详解
Sep 23 #Javascript
TS 类型收窄教程示例详解
Sep 23 #Javascript
You might like
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python ATM功能实现代码实例
2020/03/19 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python xlsxwriter模块的使用
2020/12/24 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
五年级音乐教学反思
2014/02/06 职场文书
同学会主持词
2014/03/18 职场文书
文案策划求职信
2014/04/14 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书