JavaScript/TypeScript运行时NaN值检测、监控与日志记录方案咨询

针对你提出的两个问题，分别给出可落地的方案： #

A. 静态Lint/类型检查方案

目前没有能100%覆盖所有NaN场景的lint规则，但通过以下配置可以拦截90%以上的常见NaN产生场景：

• 开启ESLint规则：
  • no-implicit-coercion：禁止隐式类型转换，避免undefined、null等非数值直接参与算术运算
  • no-unsafe-optional-chaining：检测可选链取值后直接参与运算的风险，避免取值为undefined时产生NaN
  • no-restricted-syntax：可以自定义规则禁止对可能为空的数组/对象直接按下标/属性取值后运算
• 启用TypeScript严格模式（strictNullChecks: true）：从类型层面强制要求所有参与算术运算的值必须为number类型，不允许undefined、null参与运算，你举例的API返回缺值、数组下标越界、对象属性不存在的场景都会在编译阶段直接报错。

静态检测的局限性是无法覆盖运行时才会出现的NaN，比如后端返回NaN、用户输入转数字失败等场景，这类需要配合运行时方案处理。

B. 运行时检测与监控方案

不需要逐个加isNaN()校验的前提下，有以下几种方案可选：

1. 入口统一校验
   所有外部输入（API返回、用户输入、本地缓存读取）统一做运行时类型校验，可以用轻量校验库对数值类型字段统一增加NaN校验，不符合规则的直接抛错或者赋值为默认值，从数据流入的源头堵死NaN进入业务逻辑的可能，成本远低于在业务逻辑里逐个校验。
2. 构建层自动插桩
   大型项目可以在构建阶段通过babel插件对所有算术运算、数字转换逻辑自动插入NaN检测代码，检测到NaN就自动上报调用栈和上下文信息，完全不需要业务开发者修改业务代码，适合排查偶发的线上NaN问题。
3. 本地调试技巧
   本地复现问题时，可以在浏览器调试工具里加条件断点，条件设置为Number.isNaN(变量名)，只要对应变量变为NaN就会自动断住，能快速定位NaN产生的位置。

针对难追踪的隐式NaN场景的补充建议 #

你提到的位运算、条件判断、类型转换中NaN隐式转换的问题，开启TypeScript的strict模式后，默认会禁止非布尔类型的值直接出现在if判断条件中，也禁止不同类型的值直接做运算，从语法层面就会拦截这类风险代码合入。

内容的提问来源于stack exchange，提问作者Chris